设为首页 加入收藏

TOP

jQuery表单校验jquery.validate.js的使用(一)
2014-11-24 12:23:39 来源: 作者: 【 】 浏览:0
Tags:jQuery 表单 校验 jquery.validate.js 使用

jQuery是一个快速、简洁的js库,为网站的快速开发简化了HTML文档遍历,事件处理,动画,以及Ajax交互。使用jQuery将极大的提高编写java script代码的效率, 让写出来的代码更加优雅, 更加健壮。


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


1.jquery包的引入:


引入jquery包:



2.添加校验说明:


主要使用的是java script编写的验证库——jQuery.Validate,这个验证库是属于jQuery的插件。


引入:



jQuery.Validate是监控form的,在任何提交表单的操作前jQuery.Validate都会检测表单里的输入项是否满足规则,满足才允许提交。所以需要在jQuery(document).ready()时为form进行验证注册,格式: $(“#formid”).validate(jsonobj)。


其中formid是文件中form表单的id,jsonobj包含两个属性:rules和messages,rules用来指明每个字段上添加的校验规则,messages用来说明相应的校验出错时对应的提示语。


messages为非必须,如果自己不定义该属性,会采用默认的提示。


例如/test/validate/formvalidate.jsp:


"http://www.w3.org/1999/xhtml">



"Content-Type" content="text/html; charset=ISO-8859-1" />


表单校验







"test">


"nameput" type="text" size="20"/>


"submit" type="submit" value="提交"/>






注意:nameput是input标签的name。


Required、minlength、maxlength都是jQuery校验的内置验证方式。jQuery内置验证方式参考jQuery.validate.js的API。



3.自定义验证方式


下面是自定义的验证方式:


$.validator.addMethod("stringlength", function(value, element,params) {


//默认值 : {trim:true,minLength:-1,maxLength:-1


params = $.extend([true,-1,-1],params); //对于默认参数支持


if(params[0]){ //过滤首尾空格


value=$.trim(value);


}


value = value.replace(/<( :.)* >/g,""); //验证时过滤标签


return this.optional(element) || ((params[1]<0 || value.length>=params[1])&&(params[2]<0 || value.length<=params[2]));


}, jQuery.format("长度在{1}-{2}之间"));


例如home工程中的登录校验:


$('#loginform').validate({//登陆校验


rules:{


"userAccount.userName":{


"requiredstring":["true"],


" requiredstring ":true,


"stringlength":["true","3","40"]


},


"userAccount.userPwd":{


"requiredstring":["true"],


"stringlength":["true","1","20"]


}


},


messages:{


"userAccount.userName":{


"requiredstring":"用户名必填",


"stringlength":jQuery.format("用户名长度在{1}和{2}之间")


},


"userAccount.userPwd":{


"requiredstring":"密码不可以为空",


"stringlength":jQuery.format("密码长度在{1}和{2}之间")


}


}


})


userAccount.userName是页面对应的input的name,requiredstring、requiredstring、stringlength是自己定义的校验,定义在/image/hi/common/js/zxwvalidate.js里。


{1}、{2}等是rules里面对应验证方式的第几个元素,从0开始。


简单的实例:


$.validator.addMethod("twd", function(value, element,params) { //默认值 : {trim:true,minLength:-1,maxLength:-1


params = $.extend([true,-1,-1],params); //对于默认参数支持


if(params[0]){


value=$.trim(value);


}


})


首页 上一页 1 2 下一页 尾页 1/2/2
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
分享到: 
上一篇Android开发:如何解决Bitmap Out.. 下一篇jQuery实现Ajax

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容:

·数据库:推荐几款 Re (2025-12-25 12:17:11)
·如何最简单、通俗地 (2025-12-25 12:17:09)
·什么是Redis?为什么 (2025-12-25 12:17:06)
·对于一个想入坑Linux (2025-12-25 11:49:07)
·Linux 怎么读? (2025-12-25 11:49:04)