jQuery Validate插件实现表单强大的验证功能

jQuery Validate插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。

第一节：jQuery Validation让验证变得如此容易

一、官网下载jquery，和jquery validation plugin
二、引入文件

三、接下来,声明下面的HTML片段

 
 姓名:
 
 密码:
 
  
 

通过以上代码，大家会发现我们对于每一个input都加上了class="required"
他的作用就是在这个inpute标签为空时会提示用户出错。
四、最后我们要为我们的框架找到一个切入点

运行效果如下

 

当然提示信息默认是英文的，可根据需要在jquery.validate.js里修改。

第二节：jQuery Validation让验证变得如此容易

上一个例子我们是统一引用jquery.validate.js这样所有必填字段的提示信息都将是This field is required.
现在要改成动态提示，比如姓名如果为空则提示姓名不能为空，密码如果为空则提示密码不能为空。
这次我们将校验规则写在代码里
首先还是先引入文件

接下来,声明下面的HTML片段

 
 姓名:
 
 密码:
 
  
 

和之前的相比没有了class="required"
最后 校验规则如下：

$(function() { 
 $("#jvForm").validate({ 
  rules: { 
   username: { 
    required: true 
   }, 
   password: { 
    required: true 
   } 
  }, 
  messages: { 
   username: { 
    required: "姓名不能为空!" 
   }, 
   password: { 
    required: "密码不能为空!" 
   } 
  } 
 }); 
}) 

运行效果如下

 

第三节：jQuery Validation让验证变得如此容易

以下代码进行对jQuery Validation的简单演示包括必填项、字符长度，格式验证
一、引入文件

二、声明HTML片段

 
  用 户 名:
 
  密 码:
 
  确认密码:
 
  出 生 地:--北京 
 上海深圳
 
  手 机:
 
  邮 箱:
 
   
 

三、错误提示样式

四、验证代码

因为jquery.validate.js中没有mobile验证，所以需要自己增加一个
首先找到messages 在里面添加mobile 如下：

messages: { 
 required: "This field is required.", 
 remote: "Please fix this field.", 
 email: "Please enter a valid email address.", 
 url: "Please enter a valid URL.", 
 date: "Please enter a valid date.", 
 dateISO: "Please enter a valid date (ISO).", 
 number: "Please enter a valid number.", 
 mobile: "请填写正确的手机号码.", 
 digits: "Please enter only digits.", 
 creditcard: "Please enter a valid credit card number.", 
 equalTo: "Please enter the same value again.", 
 maxlength: $.validator.format("Please enter no more than {0} characters."), 
 minlength: $.validator.format("Please enter at least {0} characters."), 
 rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."), 
 range: $.validator.format("Please enter a value between {0} and {1}."), 
 max: $.validator.format("Please enter a value less than or equal to {0}."), 
 min: $.validator.format("Please enter a value greater than or equal to {0}.") 
} 

然后在methods中添加mobile的正则校验

mobile: function( value, element ) { 
 return this.optional(element) || /^1[3|4|5|8][0-9]\d{8}$/.test(value); 
} 

运行效果

以上就是为大家展示的jQuery Validate 插件为表单提供了强大的验证功能，希望大家喜欢。