jquery.validate.js

jquery.validate.js 使用

 $.ajax({
   type: "POST",
   url: url, //请求地址
   dataType: "json",
   cache: true, 
   xhrFields: {
     withCredentials: true
   },
   data: {
     phone_number: phone,
     sms_code: code
   },
   success: function (msg) {
     if(msg.code == 200) {
       myvalidate.resetForm()
       formId.submit();  
       // form.reset()
       return true;
     } else {
     }
     if(msg.code==201){
       //验证码已过期，请重新发送
       myvalidate.showErrors({
         "sms_code": "验证码已过期，请重新发送！"
       });
       return false;
     }
     if(msg.code==204){
       //请输入正确的验证码
       myvalidate.showErrors({
         "sms_code": "验证码错误！"
       });
       return false;
     }
   },
   error: function() {
   }
 })

rules: {//配置表单项校验的规则
   phone_number: {
     required: true,
     maxlength: 11,
     phone_number: true,
     remote: {
       type: "POST",
       url: "url", //请求地址
       dataType: "json",
       cache: false, 
       xhrFields: {
         withCredentials: true
       },
       async: true,
       data: {
         phone_number: function() {
           return phone
         }
       },
       dataFilter: function (data) {
         var msg = $.parseJSON(data)
           if(msg.code == 200) {
             // 手机号已经绑定，可以用来解绑
             return true;
           }
           if(msg.code==-100){
             //显示提示信息，提示：该手机号未绑定
             return false;
           }
       }
     }
   },
   sms_code: {
     required: true,
     maxlength: 6,
     sms_code:true
   }
 },

messages: {//配置对应的表单项校验失败后的错误提示信息
  phone_number: {
    required: "请输入手机号！",
    remote: "该手机号未绑定！"
  },
  sms_code: {
    required: "请输入验证码！"
  }
}

$.validator.addMethod("phone_number",function(value, element, params){
  //value：要校验的值（校验组件的value值）
  //element：要校验的表单项标签对象
  //params：使用此规则时，配置的规则的值。（校验规则的参数）
  //如果校验通过，就返回true；否则返回false
  return /^[1][0-9]{10}$/.test(value)
},"请输入正确的手机号！");

  $.validator.addMethod("sms_code",function(value, element, params){
  //value：要校验的值（校验组件的value值）
  //element：要校验的表单项标签对象
  //params：使用此规则时，配置的规则的值。（校验规则的参数）
  //如果校验通过，就返回true；否则返回false
  return /^\d{6}$/.test(value)
},"验证码错误！");