- 浏览: 319493 次
- 性别:
- 来自: 南昌
文章分类
最新评论
-
j_bird:
你好,想探讨下滑动窗口是怎么计算的,一条群发短信发出去,滑动窗 ...
协议研发 中移动CMPP2.0协议API -
andyliulin:
楼主,现在的magicode 生成器工具的 官网,http: ...
Mgicode 生成器正式发布 -
huazai_wow:
楼主 你只是分析了 在jquery 中 有使用到 jQu ...
jquery event trigger 分析 -
dengkanghua:
CMPP2.0中出现流量控制错误是什么引起的。有什么解决办法吗 ...
协议研发 中移动CMPP2.0协议API -
JohnHust:
[flash=200,200][/flash][url][/u ...
Jquery源码分析(一)
[转载]jquery.validate.js的基本用法入门 jquery.validate.js是jquery下的一个验证插件,功能比较强大,早就有所耳闻但是一只没有动手用过,现在在于能够研究一下了。 这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录。 先贴一个国内某大公司的代码: JavaScript代码 1. <script type="text/javascript"><!-- 2. 3. function lang(key) { 4. mylang = { 5. 6. 'ls_input_myb': '请输入您的账户', 7. 'ls_myb_email': '漫游币账户为邮箱地址', 8. 'ls_login_password': '请输入您的登录密码', 9. 'ls_password_length': '密码长度为{0}-{1}位之间', 10. 'ls_input_captcha': '请输入验证码', 11. 'ls_captcha_length': '验证码的长度为{0}位', 12. 'ls_account_email': '账户名为邮箱地址', 13. 14. '':'' 15. }; 16. 17. return mylang[key]; 18. } 19. 20. // --></script> 21. 22. <script type="text/javascript"><!-- 23. $(document).ready(function() { 24. 25. $("#loginForm").validate({ 26. rules: { 27. uEmail: { 28. required: true, 29. email: true 30. }, 31. uPassword: { 32. required: true, 33. rangelength: [6, 30] 34. } 35. }, 36. messages: { 37. uEmail: { 38. required: lang('ls_input_myb'), 39. email: lang('ls_myb_email') 40. }, 41. uPassword: { 42. required: lang('ls_login_password'), 43. rangelength: $.format(lang('ls_password_length')) 44. } 45. }, 46. errorPlacement: function(error, element) { 47. var placement = $(element.parent("td").parent("tr").next("tr").find("td").get(1)); 48. placement.text(''); 49. error.appendTo( placement ); 50. }, 51. onkeyup: false 52. }); 53. 54. var accountTipsText = lang('ls_account_email'); 55. $("#uEmail").focus(function() { 56. if (!$($(this).parent().parent().next().find('td').get(1)).text()) { 57. $($(this).parent().parent().next().find('td').get(1)).html('<span class="font_888_8">' + accountTipsText + '</span>'); 58. } 59. $(this).css('color', '#000'); 60. }).focus(); 61. 62. 63. 64. }); 65. 66. // --></script> 我就是从这个例子中开始的,其实这个例子几乎包含了jquery.validate.js的精髓,如果你完整理解了这个代码基本上算是入门了。 想起以前做期货网页在线模拟的时候都自己写代码去判断,真实幼稚死了………… 下面是完整的文章介绍。 默认校验规则 (1)required:true 必输字段 (2)remote:"check.php" 使用ajax方法调用check.php验证输入值 (3)email:true 必须输入正确格式的电子邮件 (4)url:true 必须输入正确格式的网址 (5)date:true 必须输入正确格式的日期 (6)dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性 (7)number:true 必须输入合法的数字(负数,小数) (8)digits:true 必须输入整数 (9)creditcard: 必须输入合法的信用卡号 (10)equalTo:"#field" 输入值必须和#field相同 (11)accept: 输入拥有合法后缀名的字符串(上传文件的后缀) (12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符) (13)minlength:10 输入长度最小是10的字符串(汉字算一个字符) (14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符) (15)range:[5,10] 输入值必须介于 5 和 10 之间 (16)max:5 输入值不能大于5 (17)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 (ISO).", 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}.") }, 如需要修改,可在js代码中加入: jQuery.extend(jQuery.validator.messages, { required: "必选字段", remote: "请修正该字段", email: "请输入正确格式的电子邮件", url: "请输入合法的网址", date: "请输入合法的日期", dateISO: "请输入合法的日期 (ISO).", number: "请输入合法的数字", digits: "只能输入整数", creditcard: "请输入合法的信用卡号", equalTo: "请再次输入相同的值", accept: "请输入拥有合法后缀名的字符串", maxlength: jQuery.validator.format("请输入一个长度最多是 {0} 的字符串"), minlength: jQuery.validator.format("请输入一个长度最少是 {0} 的字符串"), rangelength: jQuery.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"), range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"), max: jQuery.validator.format("请输入一个最大为 {0} 的值"), min: jQuery.validator.format("请输入一个最小为 {0} 的值") }); 推荐做法,将此文件放入messages_cn.js中,在页面中引入 <script src="/admin/js/messages_cn.js" type="text/javascript"></script> 使用方式 1.将校验规则写到控件中 <script src="/admin/js/jquery.js" type="text/javascript"></script><script src="/admin/js/jquery.validate.js" type="text/javascript"></script><script src="/admin/blogs/js/jquery.metadata.js" type="text/javascript"></script> $().ready(function() { $("#signupForm").validate(); });
Firstname E-Mail Password 确认密码使用class="{}"的方式,必须引入包:jquery.metadata.js 可以使用如下的方法,修改提示内容: class="{required:true,minlength:5,messages:{required:'请输入内容'}}" 在使用equalTo关键字时,后面的内容必须加上引号,如下代码: class="{required:true,minlength:5,equalTo:'#password'}" 另外一个方式,使用关键字:meta(为了元数据使用其他插件你要包装 你的验证规则在他们自己的项目中可以用这个特殊的选项) Tell the validation plugin to look inside a validate-property in metadata for validation rules. 例如: meta: "validate" 再有一种方式: $.metadata.setType("attr", "validate"); 这样可以使用validate="{required:true}"的方式,或者class="required",但class="{required:true,minlength:5}"将不起作用 2.将校验规则写到代码中 $().ready(function() { $("#signupForm").validate({ rules: { firstname: "required", email: { required: true, email: true }, password: { required: true, minlength: 5 }, confirm_password: { required: true, minlength: 5, equalTo: "#password" } }, messages: { firstname: "请输入姓名", email: { required: "请输入Email地址", email: "请输入正确的email地址" }, password: { required: "请输入密码", minlength: jQuery.format("密码不能小于{0}个字符") }, confirm_password: { required: "请输入确认密码", minlength: "确认密码不能小于5个字符", equalTo: "两次输入密码不一致不一致" } } }); }); //messages处,如果某个控件没有message,将调用默认的信息
Firstname E-Mail Password 确认密码required:true 必须有值 required:"#aa:checked"表达式的值为真,则需要验证 required:function(){}返回为真,表时需要验证后边两种常用于,表单中需要同时填或不填的元素 常用方法及注意问题 1.用其他方式替代默认的SUBMIT $().ready(function() { $("#signupForm").validate({ submitHandler:function(form){ alert("submitted"); form.submit(); } }); }); 可以设置validate的默认值,写法如下: $.validator.setDefaults({ submitHandler: function(form) { alert("submitted!");form.submit(); } }); 如果想提交表单, 需要使用form.submit()而不要使用$(form).submit() 2.debug,如果这个参数为true,那么表单不会提交,只进行检查,调试时十分方便 $().ready(function() { $("#signupForm").validate({ debug:true }); }); 如果一个页面中有多个表单,用 $.validator.setDefaults({ debug: true }) 3.ignore:忽略某些元素不验证 ignore: ".ignore" 4.errorPlacement:Callback Default: 把错误信息放在验证的元素后面指明错误放置的位置,默认情况是:error.appendTo(element.parent());即把错误信息放在验证的元素后面 errorPlacement: function(error, element) { error.appendTo(element.parent()); } //示例:
First Name
14/02/07
02/14/07
发表评论
-
使用javascript动态创建SVG对象的问题
2011-01-11 17:18 4697无沙备忘录系列 -平时的一些研究,有时也会颇费功夫,然 ... -
evaluate mxGraph
2010-06-10 16:09 1679To evaluate mxGraph: - Navigate ... -
js中的prototype与constructor
2010-06-09 10:53 2861并且每个函数都有一个默认的prototype属性。 如果这个函 ... -
Jquery1.2.6 源码分析
2008-08-29 00:13 14073jQuery是一个非常优秀的J ... -
jquery fx分析
2008-08-28 19:37 62278 FX分析 prk/彭仁夔 ... -
jqueyr fx源码(修改)
2008-08-28 19:33 2624/* * author:prk date:2008-08-0 ... -
jquery.ajax
2008-08-27 16:50 80547.2 jquery.ajax ... -
jquery event domready
2008-08-26 17:39 40926.3 domReady的处理 ... -
jquery event trigger 分析
2008-08-26 17:37 112966.2.2 trigger ... -
jquery event addEvent 分析
2008-08-26 17:36 111456.2 事件的处理 ... -
jquery event 封装的源源分析
2008-08-26 17:35 45586.Event分析 ... -
jquery position
2008-08-25 16:34 87115.2.3 position ... -
jquery wrap
2008-08-25 08:12 44385.3.5 wrap ... -
jquery element content
2008-08-25 08:11 43025.4dom元素的内容 ... -
jquery class
2008-08-22 23:18 53275.1.2 Class prk/彭仁夔 2008- ... -
jquery attr
2008-08-22 23:16 75755 DOM元素 prk/彭仁夔 ... -
jquery Selector (修改)
2008-08-21 17:10 3059/** * author:prk * date:2008- ... -
CSS selector (jquery的源码分析,修改)
2008-08-21 17:09 43323.3、采用CSS方式查找Dom节点 ... -
如何找到Dom元素
2008-08-20 22:10 27683、如何找到Dom元素 ... -
Jquery源码分析(修改)
2008-08-20 22:07 5710Jquery源码分析 ...
相关推荐
jquery.validate.1.9.0.min.js jquery.validate.1.12.0.min.js jquery.validate.1.13.1.min.js jquery.validate.1.16.0.min.js jquery.validate.1.14.0.min.js jquery.validate.1.15.1.min.js jquery.validate....
jquery.validate.js jquery.validate.js
jquery.validate.min.js 1.16.0插件,jquery验证
jquery.validate.jsjquery.validate.jsjquery.validate.jsjquery.validate.jsjquery.validate.jsjquery.validate.jsjquery.validate.jsjquery.validate.jsjquery.validate.jsjquery.validate.jsjquery.validate.js...
微软的jquery.validate.unobtrusive.js验证插件,可以用来验证单选和多选框的.
jquery.validate.extend.js
jquery 验证表单1.8版本,附加常用地址 https://docs.microsoft.com/en-us/aspnet/ajax/cdn/jquery-validate/cdnjqueryvalidate18
jquery.validate.js 和 帮助文档.rar
jquery.validate插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来...
jquery.validate1.7.js最新版本,除了需要为输入框手工添加很多很多属性(onkeyup, onkeydown等等), 而且还不够通用, 占用服务器资源和网络资源.但是当初也是花费了很久的时间完成的作品. 站在巨人的肩膀上, 让我感觉...
js插件 jquery-1.11.1.min.js jquery.validate.min.js
jquery.validate.js表单验证 jquery.validate.messages_cn.js 表单验证中文提示
jquery.validate.extension.js文件
jquery.validate.js表单验证.pdf
jquery表单验证的“jquery.validate.js ”文件,版本1.17.0
jquery.validate Validation .js验证框架 帮助 手册 文档.chm 版本 方面查询 (一)、可选项( options ) 1 (二)插件方法 (jQuery validation) 6 (三、四)选择器及实用工具 (jQuery validation) 7 四、实用工具...