jquery表单验证.docx

jquery表单验证.docx

《jquery表单验证.docx》由会员分享，可在线阅读，更多相关《jquery表单验证.docx（43页珍藏版）》请在冰豆网上搜索。

jquery表单验证

JQuery笔记（表单验证大全）

jquery.validate.js是jquery旗下的一个验证插件，借助jquery的优势，我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法。

举个例子，有这么一个表单：

viewplaincopytoclipboardprint?

在这个表单中，有名、姓、用户名、密码、确认密码和email。

他们都为非空，并且电子邮件需要是格式正确的地址、确认密码和密码一致。

使用jQuery验证最简单的方式是引入jquery.js和jqueryvalidation.js两个js文件。

然后分别在input中加入class即：

viewplaincopytoclipboardprint?

以下列出validate自带的默认验证

required:

"必选字段",

remote:

"请修正该字段",

email:

"请输入正确格式的电子邮件",

url:

"请输入合法的网址",

date:

"请输入合法的日期",

dateISO:

"请输入合法的日期（ISO）.",

number:

"请输入合法的数字",

digits:

"只能输入整数",

creditcard:

"请输入合法的信用卡号",

equalTo:

"请再次输入相同的值",

accept:

"请输入拥有合法后缀名的字符串",

maxlength:

jQuery.format（"请输入一个长度最多是{0}的字符串"）,

minlength:

jQuery.format（"请输入一个长度最少是{0}的字符串"）,

rangelength:

jQuery.format（"请输入一个长度介于{0}和{1}之间的字符串"）,

range:

jQuery.format（"请输入一个介于{0}和{1}之间的值"）,

max:

jQuery.format（"请输入一个最大为{0}的值"）,

min:

jQuery.format（"请输入一个最小为{0}的值"）

然后，在document的read事件中，加入如下方法：

这样，当form被提交的时候，就会根据input指定的class来进行验证了。

如果失败，form的提交就会被阻止。

并且，将提示信息显示在input的后面。

不过，这样感觉不好，因为验证规则侵入了我们的html代码。

还有一个方式，便是使用“rules”。

我们将input的那些验证用class删除掉。

然后修改document的ready事件响应代码：

$（document）.ready（function（）{

$（"#signupForm"）.validate（{

rules:

{

firstname:

"required",

lastname:

"required",

username:

"required",

password:

"required",

confirm_password:

{

required:

true,

equalTo:

"#password"

},

email:

{

required:

true,

email:

true

}

}

}）;

}）

这样以来，也能达到相同的效果。

那么，接下的问题，就是显示的错误提示是默认的。

我们需要使用自定义的提示：

$（document）.ready（function（）{

$（"#signupForm"）.validate（{

rules:

{

firstname:

"required",

lastname:

"required",

username:

"required",

password:

"required",

confirm_password:

{

required:

true,

equalTo:

"#password"

},

email:

{

required:

true,

email:

true

}

},

messages:

{

firstname:

"必填项",

lastname:

"必填项",

username:

"必填项",

password:

"必填项",

confirm_password:

{

required:

"必填项",

equalTo:

"密码不一致"

},

email:

{

required:

"必填项",

email:

"格式有误"

}

}

}）;

}）

如果你还想在错误信息上显示特别的样式（比如字体为红色）即可通过添加：

#signupFormlabel.error{

padding-left:

16px;

margin-left:

2px;

color:

red;

background:

url（img/unchecked.gif）no-repeat0px0px;

}

继续添加对输入密码长度的验证规则：

$（document）.ready（function（）{

$（"#signupForm"）.validate（{

rules:

{

firstname:

"required",

lastname:

"required",