深深学习jQuery Validate表单验证_jquery_脚本之家

今天我们来说一下表单验证,有人说我们在进行表单验证的时候使用正则来验证是非常麻烦的,现在我来给大家介绍一下表单验证的插件:jquery.validate.min.js

本文实例介绍了jQuery
Validate表单验证,主要是利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示,分享给大家供大家参考,具体内容如下

它是与jquery一起结合用来使用的,使用它是非常方便,只需写校验规则和错误字段即可。

1、添加一个另外一个插件jquery.metadata.js
并把校验规则写在控件里面。2、需要改写触发校验的方式。

我们常见的校验规则有以下几种:

$.validate;

 jQuery表单验证插件----利用jquery.metadata.js将校验规则写到控件中  * { font-family: Verdana; font-size: 96%; }label { width: 10em; float: left; }label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }p { clear: both; }.submit { margin-left: 12em; }em { font-weight: bold; padding-right: 1em; vertical-align: top; }  $.ready{ $.validate; });   

required:true 必输字段email:true 必须输入正确格式的电子邮件date:true
必须输入正确格式的日期dateISO:true 必须输入正确格式的日期digits:true
必须输入整数equalTo:”#pass” 输入值必须和#pass相同maxlength:5
输入长度最多是5的字符串minlength:10
输入长度最小是10的字符串rangelength:[5,10] 输入长度必须介于 5 和 10
之间range:[5,10] 输入值必须介于 5 和 10 之间min:10 输入值不能小于10

required:true 必输字段 remote:”check.php”
使用ajax方法调用check.php验证输入值
email:true
必须输入正确格式的电子邮件
url:true 必须输入正确格式的网址
date:true 必须输入正确格式的日期 日期校验ie6出错,慎用
dateISO:true 必须输入正确格式的日期,例如:2009-06-23,1998/01/22
只验证格式,不验证有效性
number:true 必须输入合法的数字
digits:true 必须输入整数 creditcard: 必须输入合法的信用卡号
equalTo:”#field” 输入值必须和#field相同 accept:
输入拥有合法后缀名的字符串
maxlength:5 输入长度最多是5的字符串
minlength:10 输入长度最小是10的字符串 rangelength:[5,10]
输入长度必须介于 5 和 10 之间的字符串”)
range:[5,10]
输入值必须介于 5 和 10 之间
max:5 输入值不能大于5 min:10
输入值不能小于10

然后接着写提示字段就可以了,不过可以不写,因为它有英文的提示字段,下面就来请大家看一下以下代码:

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 .", dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.", number: "Please enter a valid number.", numberDE: "Bitte geben Sie eine Nummer ein.", digits: "Please enter only digits", creditcard: "Please enter a valid credit card number.", equalTo: "Please enter the same value again.", accept: "Please enter a value with a valid extension.", 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}.")},

我们在使用插件之前必不可缺的是要引入jquery文件 和插件

5、注意:使用
的方式,必须引入包:jquery.metadata.js。可以使用如下的方法,修改提示内容: