夏日博客

A-A+

jQuery Validation表单验证范例

2016年01月07日 前端设计 暂无评论 阅读 7 views 次

jQuery Validato表单验证插件，它是基于jQuery类库，实现了js脚本于页面html代码的分离。你可以划分多个校验组，每个组的校验都是互不影响。对一个表单对象，你只需要写一行代码就可以轻松实现无数种（理论上）脚本控制。

jq代码如下:

  1. /** 
  2.  * @author ming 
  3.  */  
  4. $(document).ready(function(){  
  5.   
  6. /* 设置默认属性 */  
  7. $.validator.setDefaults({  
  8. submitHandler: function(form) {  
  9. form.submit();  
  10. }  
  11. });  
  12.   
  13. // 字符验证   
  14. jQuery.validator.addMethod("stringCheck", function(value, element) {  
  15. return this.optional(element) || /^[u0391-uFFE5w]+$/.test(value);         
  16. }, "只能包括中文字、英文字母、数字和下划线");  
  17.   
  18. // 中文字两个字节   
  19. jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {  
  20.  var length = value.length;  
  21.  for(var i = 0; i < value.length; i++){  
  22.  if(value.charCodeAt(i) > 127){  
  23.  length++;  
  24.  }  
  25.  }  
  26.  return this.optional(element) || ( length >= param[0] && length <= param[1] );  
  27. }, "请确保输入的值在3-15个字节之间(一个中文字算2个字节)");  
  28.   
  29. // 身份证号码验证   
  30. jQuery.validator.addMethod("isIdCardNo", function(value, element) {  
  31.  return this.optional(element) || isIdCardNo(value);  
  32. }, "请正确输入您的身份证号码");  
  33.   
  34. // 手机号码验证   
  35. jQuery.validator.addMethod("isMobile", function(value, element) {  
  36.  var length = value.length;  
  37.  var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+d{8})$/;  
  38.  return this.optional(element) || (length == 11 && mobile.test(value));  
  39. }, "请正确填写您的手机号码");  
  40.   
  41. // 电话号码验证   
  42. jQuery.validator.addMethod("isTel", function(value, element) {  
  43.  var tel = /^d{3,4}-?d{7,9}$/; //电话号码格式010-12345678   
  44.  return this.optional(element) || (tel.test(value));  
  45. }, "请正确填写您的电话号码");  
  46.   
  47. // 联系电话(手机/电话皆可)验证   
  48. jQuery.validator.addMethod("isPhone", function(value,element) {  
  49.  var length = value.length;  
  50.  var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+d{8})$/;  
  51.  var tel = /^d{3,4}-?d{7,9}$/;  
  52.  return this.optional(element) || (tel.test(value) || mobile.test(value));  
  53.   
  54. }, "请正确填写您的联系电话");  
  55.   
  56. // 邮政编码验证   
  57. jQuery.validator.addMethod("isZipCode", function(value, element) {  
  58.  var tel = /^[0-9]{6}$/;  
  59.  return this.optional(element) || (tel.test(value));  
  60. }, "请正确填写您的邮政编码");  
  61.   
  62. //开始验证   
  63. $('#submitForm').validate({  
  64.  /* 设置验证规则 */  
  65.  rules: {  
  66.  username: {  
  67.  required:true,  
  68.  stringCheck:true,  
  69.  byteRangeLength:[3,15]  
  70.  },  
  71.  email:{  
  72.  required:true,  
  73.  email:true  
  74.  },  
  75.  phone:{  
  76.  required:true,  
  77.  isPhone:true  
  78.  },  
  79.  address:{  
  80.  required:true,  
  81.  stringCheck:true,  
  82.  byteRangeLength:[3,100]  
  83.  }  
  84.  },  
  85.   
  86.  /* 设置错误信息 */  
  87.  messages: {  
  88.  username: {  
  89.  required: "请填写用户名",  
  90.  stringCheck: "用户名只能包括中文字、英文字母、数字和下划线",  
  91.  byteRangeLength: "用户名必须在3-15个字符之间(一个中文字算2个字符)"  
  92.  },  
  93.  email:{  
  94.  required: "请输入一个Email地址",  
  95.  email: "请输入一个有效的Email地址"  
  96.  },  
  97.  phone:{  
  98.  required: "请输入您的联系电话",  
  99.  isPhone: "请输入一个有效的联系电话"  
  100.  },  
  101.  address:{  
  102.  required: "请输入您的联系地址",  
  103.  stringCheck: "请正确输入您的联系地址",  
  104.  byteRangeLength: "请详实您的联系地址以便于我们联系您"  
  105.  }  
  106.  },  
  107.   
  108.  /* 设置验证触发事件 */  
  109.  focusInvalid: false,  
  110.  onkeyup: false,  
  111.   
  112.  /* 设置错误信息提示DOM */  
  113.  errorPlacement: function(error, element) {  
  114.  error.appendTo( element.parent());  
  115.  },  
  116.   
  117. });  
  118.   
  119. });  

测试页index.html代码如下:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
  2. "http://www.w3.org/TR/html4/loose.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4.  <head>  
  5.  <meta http-equiv="Content-Type" content="text/html; charset=gbk" />  
  6.  <title>jQuery验证</title>  
  7.  <script src="lib/jquery/jquery-1.3.2.min.js" ></script>  
  8.  <script type="text/javascript" src="lib/jquery/jquery.validate.js" mce_src="lib/jquery/jquery.validate.js"></script>  
  9.  <script type="text/javascript" src="lib/jquery/messages_cn.js"></script>  
  10.  <script type="text/javascript" src="lib/jquery/formValidatorClass.js"></script>  
  11.  <style type="text/css">  
  12.   
  13.  * {  
  14.  font-family: Verdana;  
  15.  font-size: 96%;  
  16.  }  
  17.  label {  
  18.  width: 10em;  
  19.  float: left;  
  20.  }  
  21.  label.error {  
  22.  float: none;  
  23.  color: red;  
  24.  padding-left: .5em;  
  25.  vertical-align: top;  
  26.  }  
  27.  p {  
  28.  clear: both;  
  29.  }  
  30.  .submit {  
  31.  margin-left: 12em;  
  32.  }  
  33.  em {  
  34.  font-weight: bold;  
  35.  padding-right: 1em;  
  36.  vertical-align: top;  
  37.  }  
  38. </style>  
  39. </head>  
  40. <body>  
  41. <form class="submitForm" id="submitForm" method="get" action="">  
  42. <fieldset>  
  43. <legend>表单验证</legend>  
  44. <p>  
  45. <label for="username">用户名</label>  
  46. <em>*</em><input id="userName" name="username" size="25" />  
  47. </p>  
  48. <p>  
  49. <label for="email">E-Mail</label>  
  50. <em>*</em><input id="email" name="email" size="25" />  
  51. </p>  
  52. <p>  
  53. <label for="phone">联系电话</label>  
  54. <em>*</em><input id="phone" name="phone" size="25" value="" />  
  55. </p>  
  56. <p>  
  57. <label for="address">地址</label>  
  58. <em>*</em><input id="address" name="address" size="22">  
  59. </p>  
  60. <input class="submit" type="submit" value="提交"/>  
  61. </p>  
  62. </fieldset>  
  63. </form>  
  64. </body>  
  65. </html>  
标签：

给我留言