简单表单提交验证效果js实现

前端  /  管理员 发布于 5年前   376

<form action="url" enctype="multipart/form-data" method="post" onSubmit="return check()">
<table>
<tr>
<td>
<input type='text' name='phone' id='phone' style='width: 25px;border: 1px solid #E5E5E5;
    height: 30px;border-radius: 10px;' placeholder="(必填) 请输入手机号" />
</td>
</tr>
<tr>
<td>
<input type='text' name='xmname' id='xmname' style='width: 25px;border: 1px solid #E5E5E5;
    height: 30px;border-radius: 10px;'placeholder="(必填) 请输入姓名" />
</td>
</tr>
</table>
<div>
    <input type="submit" name="submit" value="提交" />
</div>
</form>

<script>
  function check()
  {
    re = /^1\d{10}$/
    tel=document.getElementById("phone").value;
    if (re.test(tel)) {
    } else {
        alert("请输入正确的手机号！");
        return false;
    }
    name=document.getElementById("xmname").value;
    if(name=="")
    {
      alert("请输入姓名！")
      return false;
    }
 }
</script>

简单的弹窗效果：不改都能用