原生jq input表单提交的验证(手机号码,邮箱,以及其他是否为空 )

在input表单提交的时候应当对表单进行验证在满足一定条件的时候才可以提交

比如所有的都不能为空,手机,邮箱应当符合格式

下列就是一个简单的验证函数

       <div>
         <input type="text"
                 id="name"
                 name="username"
                 value=""
                 placeholder="您的姓名"
                 onblur="validata(value,id)" />
          <img src="http://img3.donews.com/special/award/images/jinggao.png" />
        </div>
        <div>
          <input type="text"
                 id="mobile"
                 name="mobile"
                 value=""
                 placeholder="您的手机"
                 onblur="validata(value,id)" />
          <img src="http://img3.donews.com/special/award/images/jinggao.png" />
        </div>
        <div>
          <input type="text"
                 name="company"
                 value=""
                 placeholder="公司名称" />
        </div>
        <div>
          <input type="text"
                 id="email"
                 name="company_email"
                 value=""
                 placeholder="公司邮箱"
                 onblur="validata(value,id)" />
          <img src="http://img3.donews.com/special/award/images/jinggao.png" />
        </div>
<script>
var sub = true;//定义一个状态,根据状态来判断是否正确,是否提交
function validata(v, id) {//传入俩个参数一个是当前input的value,另一个是当前input的id,这个函数最终返回的是一个布尔值
  if (v == "") {//判断value是否为空
    $("#" + id).next().css('display', 'block');
    sub = false;//为空的话
  } else {
    sub = true;
    if (id == 'mobile') {//如果传入的id是手机的id 判断手机号码的格式是否正确
      var myreg = /^1[3458]\d{9}$/;
      if (!myreg.exec(v)) {
        sub = false;
      } else {
        sub = true;
      }
    } else if (id == 'email') {//如果传入的id是邮箱的id 判断邮箱号码的格式是否正确
      var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
      if (!reg.test(v)) {
        sub = false;
      } else {
        sub = true;
      }
    }
  }
  if (sub) {//如果sub为true那么让警告的小图标隐藏
    $("#" + id).next().css('display', 'none');
  } else {
    $("#" + id).next().css('display', 'block');
  }
  return sub //将最终的sub的状态return出来,以便提交的时候判断是否提交
}
//提交的时候
$('.btn').click(function() {
  var info = [//拿到每个input对应的value和id
    {
      value: $("input[name='username']").val(),
      id: ''
    }, {
      value: $("input[name='mobile']").val(),
      id: 'inp'
    }, {
      value: $("input[name='company_email']").val(),
      id: 'email'
    }
  ]
  var infoFlag = info.every(function(item, index, array) {//遍历每一项
    return validata(item.value, item.id)//如果有一项不是则返回false
  })
  //然后用infoFlag 的状态来判定 是否可以提交,发送请求
})
</script>

 


版权声明:本文为chu_geng原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
THE END
< <上一篇
下一篇>>