您好,欢迎访问一九零五行业门户网

jQuery验证插件validation使用指南_jquery

在网站开发过程中,有时我们需要验证用户输入的信息是否符合我们的要求,所以我们会对用户提交的数据进行验证。验证分两次进行,一次是在客户端,一次是在服务端。客户端的验证可以提升用户的体验。
jquery验证插件有很多,实现的功能也基本相同。本文介绍的只是jquery验证插件中的一种jquery.validate
jquery.validation是一款优秀的jquery插件,它能对客户端表单进行验证,并且提供了许多可以定制的属性和方法,良好的扩展性。
1.jquery.validate插件功能
简单实现客户端信息验证,过滤不符合要求的信息
2.jquery.validate官方地址
官方地址:http://jqueryvalidation.org/,有详细的插件使用说明
官方demo:http://jquery.bassistance.de/validate/demo/
3.jquery.validate使用方法
1.引用js

2.css样式,可自定义,简单的只需要添加error样式,也可使用官方demo中的样式。
.error{ color:red; margin-left:8px;}
3.js代码
$(document).ready(function() { // validate signup form on keyup and submit var validator = $(#signupform).validate({ rules: { firstname: required, username: { required: true, minlength: 2 }, password: { required: true, minlength: 5 }, password_confirm: { required: true, minlength: 5, equalto: #password }, email: { required: true, email: true, }, dateformat: required, terms: required }, messages: { firstname: 姓名不能为空, username: { required: 用户名不能为空, minlength: jquery.format(用户名只少由 {0} 字符组成) }, password: { required: 密码不能为空, minlength: jquery.format(密码只少由 {0} 字符组成) }, password_confirm: { required: 确认密码不能为空, minlength: jquery.format(确认密码只少由 {0} 字符组成), equalto: 秘密与确认密码不一致 }, email: { required: 邮箱不能为空, email: 邮箱格式不正确 }, dateformat: 请选择性别, terms: }, // the errorplacement has to take the table layout into account errorplacement: function(error, element) { if ( element.is(:radio) ) error.appendto( element.parent().next().next()); else if ( element.is(:checkbox) ) error.appendto ( element.next()); else error.appendto( element.parent().next()); }, // specifying a submithandler prevents the default submit, good for the demo submithandler: function() { alert(submitted!); }, // set this class to error-labels to indicate valid fields success: function(label) { // set as text for ie label.html( ).addclass(checked); }, highlight: function(element, errorclass) { $(element).parent().next().find(. + errorclass).removeclass(checked); } });});
以上的代码只使用了插件提供的属性和方法。也可以自定义验证方法。如
$.validator.addmethod(checkusername, function(value) { //value为验证的值,对应于元素id //方法代码}, '用户名格式不正确');
使用自定义方法也非常简单,只需要 元素id:”checkusername”
4.使用的html
姓名
用户名
密码
确认密码
邮箱
性别 男 女
以阅读并同意网站条款.

更多验证方法的应用请查看http://jqueryvalidation.org/
其它类似信息

推荐信息