原生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>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值