1. function lang(key) {
  2. mylang = {
  3. 'ls_input_myb': '请输入您的账户',
  4. 'ls_myb_email': '漫游币账户为邮箱地址',
  5. 'ls_login_password': '请输入您的登录密码',
  6. 'ls_password_length': '密码长度为{0}-{1}位之间',
  7. 'ls_input_captcha': '请输入验证码',
  1. 我就是从这个例子中开始的,其实这个例子几乎包含了jquery.validate.js的精髓,如果你完整理解了这个代码基本上算是入门了。
  2. 想起以前做期货网页在线模拟的时候都自己写代码去判断,真实幼稚死了…………
  3. 下面是完整的文章介绍。
  4. 默认校验规则
  5. (1)required:true 必输字段
  6. (2)remote:"check.php" 使用ajax方法调用check.php验证输入值
  7. (3)email:true 必须输入正确格式的电子邮件
  8. (4)url:true 必须输入正确格式的网址
  9. (5)date:true 必须输入正确格式的日期
  10. (6)dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-231998/01/22 只验证格式,不验证有效性
  11. (7)number:true 必须输入合法的数字(负数,小数)
  12. (8)digits:true 必须输入整数
  13. (9)creditcard: 必须输入合法的信用卡号
  14. (10)equalTo:"#field" 输入值必须和#field相同
  15. (11)accept: 输入拥有合法后缀名的字符串(上传文件的后缀)
  16. (12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
  17. (13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
  18. (14)rangelength:[5,10] 输入长度必须介于 5 10 之间的字符串")(汉字算一个字符)
  19. (15)range:[5,10] 输入值必须介于 5 和 10 之间
  20. (16)max:5 输入值不能大于5
  21. (17)min:10 输入值不能小于10
  22. 默认的提示
  23.  
  24. 复制代码 代码如下:
  25.  
  26. messages: {
  27. required: "This field is required.",
  28. remote: "Please fix this field.",
  29. email: "Please enter a valid email address.",
  30. url: "Please enter a valid URL.",
  31. date: "Please enter a valid date.",
  32. dateISO: "Please enter a valid date (ISO).",
  33. dateDE: "Bitte geben Sie ein gltiges Datum ein.",
  34. number: "Please enter a valid number.",
  35. numberDE: "Bitte geben Sie eine Nummer ein.",
  36. digits: "Please enter only digits",
  37. creditcard: "Please enter a valid credit card number.",
  38. equalTo: "Please enter the same value again.",
  39. accept: "Please enter a value with a valid extension.",
  40. maxlength: $.validator.format("Please enter no more than {0} characters."),
  41. minlength: $.validator.format("Please enter at least {0} characters."),
  42. rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
  43. range: $.validator.format("Please enter a value between {0} and {1}."),
  44. max: $.validator.format("Please enter a value less than or equal to {0}."),
  45. min: $.validator.format("Please enter a value greater than or equal to {0}.")
  46. },
  47.  
  48. 如需要修改,可在js代码中加入:
  49.  
  50. 复制代码 代码如下:
  51.  
  52. jQuery.extend(jQuery.validator.messages, {
  53. required: "必选字段",
  54. remote: "请修正该字段",
  55. email: "请输入正确格式的电子邮件",
  56. url: "请输入合法的网址",
  57. date: "请输入合法的日期",
  58. dateISO: "请输入合法的日期 (ISO).",
  59. number: "请输入合法的数字",
  60. digits: "只能输入整数",
  61. creditcard: "请输入合法的信用卡号",
  62. equalTo: "请再次输入相同的值",
  63. accept: "请输入拥有合法后缀名的字符串",
  64. maxlength: jQuery.validator.format("请输入一个长度最多是 {0} 的字符串"),
  65. minlength: jQuery.validator.format("请输入一个长度最少是 {0} 的字符串"),
  66. rangelength: jQuery.validator.format("请输入一个长度介于 {0} {1} 之间的字符串"),
  67. range: jQuery.validator.format("请输入一个介于 {0} {1} 之间的值"),
  68. max: jQuery.validator.format("请输入一个最大为 {0} 的值"),
  69. min: jQuery.validator.format("请输入一个最小为 {0} 的值")
  70. });
  71.  
  72. 推荐做法,将此文件放入messages_cn.js中,在页面中引入
  73. <script src="../js/messages_cn.js" type="text/javascript"></script>
  74. 使用方式
  75. 1.将校验规则写到控件中
  76.  
  77. 复制代码 代码如下:
  78.  
  79. <script src="../js/jquery.js" type="text/javascript"></script>
  80. <script src="../js/jquery.validate.js" type="text/javascript"></script>
  81. <script src="./js/jquery.metadata.js" type="text/javascript"></script>
  82. $().ready(function() {
  83. $("#signupForm").validate();
  84. });
  85. <form id="signupForm" method="get" action="">
  86. <label for="firstname">Firstname</label>
  87. <input id="firstname" name="firstname" class="required" />
  88. <label for="email">E-Mail</label>
  89. <input id="email" name="email" class="required email" />
  90. <label for="password">Password</label>
  91. <input id="password" name="password" type="password" class="{required:true,minlength:5}" />
  92. <label for="confirm_password">确认密码</label>
  93. <input id="confirm_password" name="confirm_password" type="password" class="{required:true,minlength:5,equalTo:'#password'}" />
  94. <input class="submit" type="submit" value="Submit"/>
  95. </form>
  96.  
  97. 使用class="{}"的方式,必须引入包:jquery.metadata.js
  98. 可以使用如下的方法,修改提示内容:
  99. class="{required:true,minlength:5,messages:{required:'请输入内容'}}"
  100. 在使用equalTo关键字时,后面的内容必须加上引号,如下代码:
  101. class="{required:true,minlength:5,equalTo:'#password'}"
  102. 另外一个方式,使用关键字:meta(为了元数据使用其他插件你要包装 你的验证规则在他们自己的项目中可以用这个特殊的选项)
  103. Tell the validation plugin to look inside a validate-property in metadata for validation rules.
  104. 例如:
  105. meta: "validate"
  106. <input id="password" name="password" type="password" class="{validate:{required:true,minlength:5}}" />
  107. 再有一种方式:
  108. $.metadata.setType("attr", "validate");
  109. 这样可以使用validate="{required:true}"的方式,或者class="required",但class="{required:true,minlength:5}"将不起作用
  110. 2.将校验规则写到代码中
  111.  
  112. 复制代码 代码如下:
  113.  
  114. $().ready(function() {
  115. $("#signupForm").validate({
  116. rules: {
  117. firstname: "required",
  118. email: {
  119. required: true,
  120. email: true
  121. },
  122. password: {
  123. required: true,
  124. minlength: 5
  125. },
  126. confirm_password: {
  127. required: true,
  128. minlength: 5,
  129. equalTo: "#password"
  130. }
  131. },
  132. messages: {
  133. firstname: "请输入姓名",
  134. email: {
  135. required: "请输入Email地址",
  136. email: "请输入正确的email地址"
  137. },
  138. password: {
  139. required: "请输入密码",
  140. minlength: jQuery.format("密码不能小于{0}个字符")
  141. },
  142. confirm_password: {
  143. required: "请输入确认密码",
  144. minlength: "确认密码不能小于5个字符",
  145. equalTo: "两次输入密码不一致不一致"
  146. }
  147. }
  148. });
  149. });
  150. //messages处,如果某个控件没有message,将调用默认的信息
  151. <form id="signupForm" method="get" action="">
  152. <label for="firstname">Firstname</label>
  153. <input id="firstname" name="firstname" />
  154. <label for="email">E-Mail</label>
  155. <input id="email" name="email" />
  156. <label for="password">Password</label>
  157. <input id="password" name="password" type="password" />
  158. <label for="confirm_password">确认密码</label>
  159. <input id="confirm_password" name="confirm_password" type="password" />
  160. <input class="submit" type="submit" value="Submit"/>
  161. </form>
  162.  
  163. required:true 必须有值
  164. required:"#aa:checked"表达式的值为真,则需要验证
  165. required:function(){}返回为真,表时需要验证
  166. 后边两种常用于,表单中需要同时填或不填的元素
  167. 常用方法及注意问题
  168. 1.用其他方式替代默认的SUBMIT
  169.  
  170. 复制代码 代码如下:
  171.  
  172. $().ready(function() {
  173. $("#signupForm").validate({
  174. submitHandler:function(form){
  175. alert("submitted");
  176. form.submit();
  177. }
  178. });
  179. });
  180.  
  181. 可以设置validate的默认值,写法如下:
  182. $.validator.setDefaults({
  183. submitHandler: function(form) { alert("submitted!");form.submit(); }
  184. });
  185. 如果想提交表单, 需要使用form.submit()而不要使用$(form).submit()
  186. 2.debug,如果这个参数为true,那么表单不会提交,只进行检查,调试时十分方便
  187. $().ready(function() {
  188. $("#signupForm").validate({
  189. debug:true
  190. });
  191. });
  192. 如果一个页面中有多个表单,用
  193. $.validator.setDefaults({
  194. debug: true
  195. })
  196. 3.ignore:忽略某些元素不验证
  197. ignore: ".ignore"
  198. 4.errorPlacementCallback Default: 把错误信息放在验证的元素后面
  199. 指明错误放置的位置,默认情况是:error.appendTo(element.parent());即把错误信息放在验证的元素后面
  200.  
  201. 复制代码 代码如下:
  202.  
  203. errorPlacement: function(error, element) {
  204. error.appendTo(element.parent());
  205. }
  206. //示例:
  207. <tr>
  208. <td class="label"><label id="lfirstname" for="firstname">First Name</label></td>
  209. <td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" /></td>
  210. <td class="status"></td>
  211. </tr>
  212. <tr>
  213. <td style="padding-right: 5px;">
  214. <input id="dateformat_eu" name="dateformat" type="radio" value="0" />
  215. <label id="ldateformat_eu" for="dateformat_eu">14/02/07</label>
  216. </td>
  217. <td style="padding-left: 5px;">
  218. <input id="dateformat_am" name="dateformat" type="radio" value="1" />
  219. <label id="ldateformat_am" for="dateformat_am">02/14/07</label>
  220. </td>
  221. <td></td>
  222. </tr>
  223. <tr>
  224. <td class="label"> </td>
  225. <td class="field" colspan="2">
  226. <div id="termswrap">
  227. <input id="terms" type="checkbox" name="terms" />
  228. <label id="lterms" for="terms">I have read and accept the Terms of Use.</label>
  229. </td>
  230. </tr>
  231. errorPlacement: function(error, element) {
  232. if ( element.is(":radio") )
  233. error.appendTo( element.parent().next().next() );
  234. else if ( element.is(":checkbox") )
  235. error.appendTo ( element.next() );
  236. else
  237. error.appendTo( element.parent().next() );
  238. }
  239.  
  240. 代码的作用是:一般情况下把错误信息显示在<td class="status"></td>中,如果是radio显示在<td></td>中,如果是checkbox显示在内容的后面
  241. errorClassString Default: "error"
  242. 指定错误提示的css类名,可以自定义错误提示的样式
  243. errorElementString Default: "label"
  244. 用什么标签标记错误,默认的是label你可以改成em
  245. errorContainerSelector
  246. 显示或者隐藏验证信息,可以自动实现有错误信息出现时把容器属性变为显示,无错误时隐藏,用处不大
  247. errorContainer: "#messageBox1, #messageBox2"
  248. errorLabelContainerSelector
  249. 把错误信息统一放在一个容器里面。
  250. wrapperString
  251. 用什么标签再把上边的errorELement包起来
  252. 一般这三个属性同时使用,实现在一个容器内显示所有错误提示的功能,并且没有信息时自动隐藏
  253. errorContainer: "div.error",
  254. errorLabelContainer: $("#signupForm div.error"),
  255. wrapper: "li"
  256. 设置错误提示的样式,可以增加图标显示
  257. input.error { border: 1px solid red; }
  258. label.error {
  259. background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;
  260. padding-left: 16px;
  261. padding-bottom: 2px;
  262. font-weight: bold;
  263. color: #EA5200;
  264. }
  265. label.checked {
  266. background:url("./demo/images/checked.gif") no-repeat 0px 0px;
  267. }
  268. successString,Callback
  269. 要验证的元素通过验证后的动作,如果跟一个字符串,会当做一个css类,也可跟一个函数
  270. success: function(label) {
  271. // set as text for IE
  272. label.html(" ").addClass("checked");
  273. //label.addClass("valid").text("Ok!")
  274. }
  275. 添加"valid" 到验证元素, CSS中定义的样式<style>label.valid {}</style>
  276. success: "valid"
  277. nsubmit Boolean Default: true
  278. 提交时验证. 设置唯false就用其他方法去验证
  279. onfocusoutBoolean Default: true
  280. 失去焦点是验证(不包括checkboxes/radio buttons)
  281. onkeyupBoolean Default: true
  282. keyup时验证.
  283. onclickBoolean Default: true
  284. checkboxes radio 点击时验证
  285. focusInvalidBoolean Default: true
  286. 提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点
  287. focusCleanupBoolean Default: false
  288. 如果是true那么当未通过验证的元素获得焦点时,移除错误提示。避免和 focusInvalid 一起用
  289.  
  290. 复制代码 代码如下:
  291.  
  292. // 重置表单
  293. $().ready(function() {
  294. var validator = $("#signupForm").validate({
  295. submitHandler:function(form){
  296. alert("submitted");
  297. form.submit();
  298. }
  299. });
  300. $("#reset").click(function() {
  301. validator.resetForm();
  302. });
  303. });
  304.  
  305. remoteURL
  306. 使用ajax方式进行验证,默认会提交当前验证的值到远程地址,如果需要提交其他的值,可以使用data选项
  307.  
  308. 复制代码 代码如下:
  309.  
  310. remote: "check-email.php"
  311. remote: {
  312. url: "check-email.php", //后台处理程序
  313. type: "post", //数据发送方式
  314. dataType: "json", //接受数据格式
  315. data: { //要传递的数据
  316. username: function() {
  317. return $("#username").val();
  318. }
  319. }
  320. }
  321.  
  322. 远程地址只能输出 "true" "false",不能有其它输出
  323. addMethodname, method, message
  324. 自定义验证方法
  325. // 中文字两个字节
  326. jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
  327. var length = value.length;
  328. for(var i = 0; i < value.length; i++){
  329. if(value.charCodeAt(i) > 127){
  330. length++;
  331. }
  332. }
  333. return this.optional(element) || ( length >= param[0] && length <= param[1] );
  334. }, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));
  335. // 邮政编码验证
  336. jQuery.validator.addMethod("isZipCode", function(value, element) {
  337. var tel = /^[0-9]{6}$/;
  338. return this.optional(element) || (tel.test(value));
  339. }, "请正确填写您的邮政编码");
  340. radiocheckboxselect的验证
  341. radiorequired表示必须选中一个
  342. <input type="radio" id="gender_male" value="m" name="gender" class="{required:true}" />
  343. <input type="radio" id="gender_female" value="f" name="gender"/>
  344. checkboxrequired表示必须选中
  345. <input type="checkbox" class="checkbox" id="agree" name="agree" class="{required:true}" />
  346. checkboxminlength表示必须选中的最小个数,maxlength表示最大的选中个数,rangelength:[2,3]表示选中个数区间
  347.  
  348. 复制代码 代码如下:
  349.  
  350. <input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" class="{required:true, minlength:2}" />
  351. <input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" />
  352. <input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" />
  353.  
  354. selectrequired表示选中的value不能为空
  355.  
  356. 复制代码 代码如下:
  357.  
  358. <select id="jungle" name="jungle" title="Please select something!" class="{required:true}">
  359. <option value=""></option>
  360. <option value="1">Buga</option>
  361. <option value="2">Baga</option>
  362. <option value="3">Oi</option>
  363. </select>
  364.  
  365. selectminlength表示选中的最小个数(可多选的select),maxlength表示最大的选中个数,rangelength:[2,3]表示选中个数区间
  366.  
  367. 复制代码 代码如下:
  368.  
  369. <select id="fruit" name="fruit" title="Please select at least two fruits" class="{required:true, minlength:2}" multiple="multiple">
  370. <option value="b">Banana</option>
  371. <option value="a">Apple</option>
  372. <option value="p">Peach</option>
  373. <option value="t">Turtle</option>
  374. </select>
  1.  
  1. 'ls_captcha_length': '验证码的长度为{0}位',
  2. 'ls_account_email': '账户名为邮箱地址',
  3. '':''
  4. };
  5. return mylang[key];
  6. }
  7. </script>
  8. <script type="text/javascript">
  9. $(document).ready(function() {
  10. $("#loginForm").validate({
  11. rules: {
  12. uEmail: {
  13. required: true,
  14. email: true
  15. },
  16. uPassword: {
  17. required: true,
  18. rangelength: [6, 30]
  19. }
  20. },
  21. messages: {
  22. uEmail: {
  23. required: lang('ls_input_myb'),
  24. email: lang('ls_myb_email')
  25. },
  26. uPassword: {
  27. required: lang('ls_login_password'),
  28. rangelength: $.format(lang('ls_password_length'))
  29. }
  30. },
  31. errorPlacement: function(error, element) {
  32. var placement = $(element.parent("td").parent("tr").next("tr").find("td").get(1));
  33. placement.text('');
  34. error.appendTo( placement );
  35. },
  36. onkeyup: false
  37. });
  38. var accountTipsText = lang('ls_account_email');
  39. $("#uEmail").focus(function() {
  40. if (!$($(this).parent().parent().next().find('td').get(1)).text()) {
  41. $($(this).parent().parent().next().find('td').get(1)).html('<span class="font_888_8">' + accountTipsText + '</span>');
  42. }
  43. $(this).css('color', '#000');}).focus();
  44. });
  45. </script>

jquery校验是否为空的更多相关文章

  1. jQuery校验

    jQuery校验 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一导入js库 <script src=&q ...

  2. jQuery校验validate详解(转)

    jQuery校验 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一导入js库 <script src=&q ...

  3. Jquery取小数后边2位,N位;jQuery去掉字符串首尾空字符串

    function fix(num, N) { , N); return Math.round(num * base) / base; } 实例,取小数后边两位 var yhmoney2 = fix(1 ...

  4. 判断jQuery选择器结果为空 - CSDN博客

    原文:判断jQuery选择器结果为空 - CSDN博客 jQuery选择器获取到的是一个对象,所以无论页面上存在或者不存在元素,这个对象都不为空.因此,如果要使用jQuery检查元素再给某个页面上是否 ...

  5. jquery 判断是否为空

    jquery 判断是否为空 if(my_val == null || my_val == undefined || my_val==""){ console.log("我 ...

  6. Jquery校验中国身份证号码是否正确

    在项目中使用表单时经常会涉及到身份证号码是否正确的校验,下面看看应该中国二代身份证号码应该怎么用Jquery校验呢? 二代身份证校验码的计算方法 二代身份证由17位数字和一位校验码组成,那么校验方法是 ...

  7. ajax jquery校验用户是否已经注册

    服务端代码这里就不贴了 html代码比较简单,需要自行引入jquery库 <body> 请输入用户名:<input type="text" id="us ...

  8. jQuery校验 表单验证

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...

  9. 用jquery校验radio单选按钮(原创)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head ...

随机推荐

  1. FastJson使用方法

    FastJson是阿里的一款开源框架,用来快速实现Java的序列化和反序列化. 官方地址:https://github.com/alibaba/fastjson 使用方法演示: 下载jar包,使用ID ...

  2. 小程序跳坑 --- navigator 和 API中wx.系列的跳转(如 wx.navigateTo、wx.reLaunch等)

    工作之余,想着帮老妈开发个小程序,一是宣传一下她的业务,二是学习使用一下微信小程序的开发,哈哈.在此过程中遇到了navigator跳转的问题,最终还是成功解决了,下面就记录下来,并做个系列总结以作记录 ...

  3. Java代码启动/关闭进程

    ProcessBuilder builder = new ProcessBuilder(命令,参数,参数...); Process process = builder.start(); br = ne ...

  4. <jquery>滚动例子

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 外引js — 先引入cdn,cdn失效时引入本地js

    参考:http://www.tianshan277.com/563.html 效果: html: <!DOCTYPE html> <html lang="en"& ...

  6. C++命令行多文件编译(g++)

    在刚开始学Java时用命令行进行编译代码.而C++一直在用IDE, 这次尝试下命令行编译.vs下也可以用cl.exe.link.exe等命令来进行编译 但这次是通过安装MinGW来学习命令编译,主要用 ...

  7. angularjs 1 Failed to read the 'selectionStart' property from 'HTMLInputElement':

    在找angularjs input(type='number')在获取焦点的时候,文本框内容选中效果,参考了:Select text on input focus,我直接复制他的code之后,在ion ...

  8. 转载别人的ftp,觉得目录结构不错,学习

    开发简单的FTP:1. 用户登陆2. 上传/下载文件3. 不同用户家目录不同4. 查看当前目录下文件5. 充分使用面向对象知识 REDMAE 1 用户登陆 2 3 1.查看用户目录文件 4 2.上传文 ...

  9. C++模拟实现Objective-C动态类型(附源码)

    在OC(Objective-C)里面有动态类型分为以下几类: -(BOOL)isKindOfClass:classObj 是否是classObj类或其子类 -(BOOL)isMemberOfClass ...

  10. 信息安全-浏览器-CORS:CORS(跨域资源共享)

    ylbtech-信息安全-浏览器-CORS:CORS(跨域资源共享) 1.返回顶部 1. CORS,全称Cross-Origin Resource Sharing,是一种允许当前域(domain)的资 ...