当前位置：文档之家› validate表单验证

validate表单验证

jQuery 表单验证插件——Validation(基础)

(2011-04-23 15:10:21)

转载▼

分类：javascript

标签：

杂谈

jQuery 表单验证插件——Validation

Validation插件式历史悠久的jQuery插件之一,经过了全球各种项目的验证,得到了很多WEB开发者的好评,作为一个表单验证的解决方案,Validation有很多的优点,比如:内置的验证规则，如：必填、数字、E-Mail、URL和信用卡号码等19类内置验证规则可以自定义验证规则：可以很方便地自定义验证规则

简单而且强大的验证信息提示：没人了验证信息提示，并提供自定义覆盖默认提示信息功能

实时进行验证的功能.：通过blur和keyup时间来触发验证规则

此外，还是用ajax实现了服务器端远程验证。都可以令前台开发变得非常的简单.

下载地址：https://www.doczj.com/doc/d317155309.html,/project/vlidate

写法一（推荐直接使用写法三，因为它实现了行为与结构的分离）

废话少说，代码解释：

一个简单的验证带验证提示的评论例子

姓名

电子邮件

网址

你的评论

*</texta rea><input class="submit" type="submit" value="提交"/></fieldset></form>验证效果：上面绿色标出的部分是需要注意的部分，也是validation执行验证的部分。可以看到validation 统计一段$("#commentForm").validate();便可完成原来繁重任务。你可能会问，他的验证规则在哪里啊，为什么获取一个form表单元素连上一个validate()便可完成验证。其实validation 把验证规则都封装在了内部，还记from表单里标出的class和minlength属性么，它可以来调去告诉其自身所在input元素所用的验证规则，如：<input type='text' class='required' > ,这个input框就会被validation解释为必须填写的。此外：minlength最少输入字符，class里的包括required 必须、email 电子邮件、url 网址、其他验证的写法写法二上面的方法时而将验证信息写在class中，时而写在minlength中实在麻烦，validation充分考虑了这一点，设置了另一种方法，将与验证相关的信息都写在class属性中，便于管理。操作步骤如下：1 引入插件——jquer.metadata.js2 改变验证方法为：$("formId").validate( {meta: "validate"}); validate是自定义的，但要和下文class中的保持一致3 将验证规则全部写入class属性中（表单中input元素要添加name值，否则提交时只会验证第一个input元素，其他的在点击后才会验证）<input id="cusername" name="username" size="25" class="{validate: {required: t rue , minlength：2}}" value="" /><input id="c email" name="email" size="25" class="{validate：{required: true , email: true}}" value="" /><input id="c url" name="url" size="25" class="{validata：{ url: true }}" value="" /><textarea id="ccomment" name="cols="22" class="{validata: {required:true }}">

写法三

上面的写法并没有完全脱离HTML结果，下面介绍一种与HTML元素属性无直接关联，而是通过name属性来关联字段和验证规则的验证写法。这种写法实现了行为与结构的分离。

1 将原来的class属性移除，使其无多余的属性：

2 jQuery代码如下：

$("#formId").validate({

rules : { //增加rules属性

username: { required : true , minlength : 2} ,

email : { required : true , email : true} ,

url : "url" ,

comment : "required"

}

})

验证信息

Validation插件的验证信息默认是英文的，如果要改为中文，只需要引入validation提供的中文验证信息库即可，引入代码如下：

自定义验证信息

Validation插件可以很方便地自定义验证规则，用来代替千遍一律的默认验证信息。如：

如在jquery代码里加messages的话是和rules同级

$("#formid").validate({

rules:{

username:{required:true,minlength:2},

messages:{

username:{required:"必须填写",minlength:"最少2个字符"}

}

});

jQuery 表单验证插件——Validation(基础)

自定义验证信息并美化

在jquery中（与rules同级）添加下列代码：

errorElement : "em", //用来创建错误提示信息标签(可自定义)

Success : function(label){ //验证成功后执行的回调函数，label指向上面那个错误提

示信息标签em

label.text( ' ' ) //清空错误提示消息

. addClass("success") //添加上自定义的success类

}

再在css中给em.error 和 em.success设置样式（如背景分别为错号和对号等）

自定义验证规则

创建规则：

$.validator . addMethod(

"formula", //自定义规则方法名

function(value , element , param){ /自定义规则体

return value == eval_r(param);

'请输入正确的数学公式计算后的结果' //提示信息

)

调用：

Rules中加入valcode :( 自定义规则名 : "参数")

$("#formId").validate({

rules : { //增加rules属性

username: { required : true , minlength : 2} ,

email : { required : true , email : true} ,

url : "url" ,

comment : "required" ,

valcode : (formula : "7+9") //valcode为name的值

}

})

Validation的具体属性及高级应用见下面链接：

https://www.doczj.com/doc/d317155309.html,/view/1283e485ec3a87c24028c48a.html

自定义验证规则：

https://www.doczj.com/doc/d317155309.html,/article/24013.htmmment" cols="22" class="{validata: {required: true }}">

写法三

1 将原来的class属性移除，使其无多余的属性：

2 jQuery代码如下：

$("#formId").validate({

rules : { //增加rules属性

username: { required : true , minlength : 2} ,

email : { required : true , email : true} ,

url : "url" ,

comment : "required"

}

})

验证信息

Validation插件的验证信息默认是英文的，如果要改为中文，只需要引入validation提供的中文验证信息库即可，引入代码如下：

自定义验证信息

Validation插件可以很方便地自定义验证规则，用来代替千遍一律的默认验证信息。如：

如在jquery代码里加messages的话是和rules同级

$("#formid").validate({

rules:{

username:{required:true,minlength:2},

messages:{

username:{required:"必须填写",minlength:"最少2个字符"}

}

});

自定义验证信息并美化

在jquery中（与rules同级）添加下列代码：

errorElement : "em", //用来创建错误提示信息标签(可自定义)

Success : function(label){ //验证成功后执行的回调函数，label指向上面那个错误提示信息标签em

label.text( ' ' ) //清空错误提示消息

. addClass("success") //添加上自定义的success类

}

再在css中给em.error 和em.success设置样式（如背景分别为错号和对号等）

自定义验证规则

创建规则：

$.validator . addMethod(

"formula", //自定义规则方法名

function(value , element , param){ /自定义规则体

return value == eval_r(param);

'请输入正确的数学公式计算后的结果' //提示信息

)

调用：

Rules中加入valcode :( 自定义规则名: "参数")

$("#formId").validate({

rules : { //增加rules属性

username: { required : true , minlength : 2} ,

email : { required : true , email : true} ,

url : "url" ,

comment : "required" ,

valcode : (formula : "7+9") //valcode为name的值}

})

Validation的具体属性及高级应用见下面链接：

https://www.doczj.com/doc/d317155309.html,/view/1283e485ec3a87c24028c48a.html

自定义验证规则：

https://www.doczj.com/doc/d317155309.html,/article/24013.htm

三大框架练习题

评卷浏览考生姓名张彬答题开始时间2013-04-24 10:15 结束时间2013-05-02 10:15 考生得分0 满分161 及格分60 一、单项选择题（共41题，41分） 1. Customer对象在程序执行到第几行时变为脱管状态？ Customer customer=new Customer(); //line1 customer.setName("张三"); Session session=sessionFactory.openSession(); //line2 Transaction tx = session1.beginTransaction(); session.save(customer); //line3 https://www.doczj.com/doc/d317155309.html,mit(); //line4 session.close(); //line5 （1 分） A) line1 B) line2 C) line4 D) line5 —标准答案：D —考生答案：D —考生得分：1 评语： 2. 在struts2应用开发中下列描述正确的是（1 分） A) 为每一个Action在XML中配置一个action，并且这个XML配置文件必须命名为struts.xml，并放置在类的根路径下。 B) 为每一个可能接收的逻辑请求编写一个Action类，该类必须继承父类ActionSupport 。 C) 在web程序的部署描述文件（web.xml）中配置struts2核心控制器，该核心控制器是一个过滤器。 D) Struts2的Action必须实现Action接口。 —标准答案：C —考生答案： —考生得分：0 评语：

js表单验证代码全集

js表单验证代码全集 2008年06月25日星期三下午 03:23 1:js 字符串长度限制、判断字符长度、js限制输入、限制不能输入、textarea 长度限制 2.:js判断汉字、判断是否汉字、只能输入汉字 3:js判断是否输入英文、只能输入英文 4:js只能输入数字,判断数字、验证数字、检测数字、判断是否为数字、只能输入数字 5:只能输入英文字符和数字 6: js email验证、js 判断email 、信箱/邮箱格式验证 7:js字符过滤,屏蔽关键字 8:js密码验证、判断密码 2.1: js 不为空、为空或不是对象、判断为空、判断不为空 2.2:比较两个表单项的值是否相同 2.3:表单只能为数字和"_", 2.4:表单项输入数值/长度限定 2.5:中文/英文/数字/邮件地址合法性判断 2.6:限定表单项不能输入的字符 2.7表单的自符控制 2.8:form文本域的通用校验函数 2.9：js验证手机号,含158,159段的 1. 长度限制

2. 只能是汉字 3." 只能是英文 2. 只能是汉字 3." 只能是英文