关闭

jquery.validate.min.js 用法方法示例

标签: jquery.validate
359人阅读 评论(0) 收藏 举报
分类:

页面html 代码


[html] view plaincopy
  1.   
[html] view plaincopy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head runat="server">  
  4.     <title>jquery.validate.min.js 用法方法示例</title>  
  5.     <script type="text/javascript" src="/js1/jquery-1.4a2.min.js"></script>  
  6.     <script src="../js1/base.js" type="text/javascript"></script>  
  7.     <script src="../js1/validate/jquery.validate.min.js" type="text/javascript"></script>  
  8.     <script src="../js1/validate/validatecode.js" type="text/javascript"></script>  
  9.   <style type="text/css">  
  10.       
  11.       .span9{ width:245px; padding-right:10px; font-size:14px; color:#505050;line-height:33px; height:33px; display:inline-block; text-align:right;}  
  12.   .span9 b{ font-weight:normal; font-size:12px; position:relative; top:3px; color:#f00; right:5px;}  
  13.   .input1{ height:31px; width:230px; border:1px solid #DBDBDB; padding:0;}  
  14.   .input2{ width:340px;}  
  15.   .span10{line-height:33px; height:33px; color:#A7A7A7; padding-left:10px;}  
  16.   .div10 textarea{ padding:5px; width:330px; height:80px; resize:none;}  
[html] view plaincopy
  1. label.error  
  2. {  
  3.     display: inline-block;  
  4.     margin-left: 5px;  
  5.     padding: 5px 0 5px 20px;  
  6.     color: #F00;  
  7.     font-size: 12px;  
  8.     line-height: 12px;  
  9.     background: url(../images1/validate_bg.gif) 0 3px no-repeat;  
  10.     vertical-align: middle;  
  11.     color: Red;  
  12.     margin-top: 7px;  
  13. }  
  14. label.success  
  15. {  
  16.     background: url(../images1/validate_bg.gif) 0 -22px no-repeat;  
  17.     vertical-align: middle;  
  18.     margin-top: 7px;  
  19. }  
  20. .ipt_txt  
  21. {  
  22.     width: 150px;  
  23.     border: 1px solid #B1C3D9;  
  24.     background-color: #FBFBFB;  
  25. }  
  26. input.error  
  27. {  
  28.     background-color: #FBE2E2;  
  29. }  
  30.   
  31.   
  32.     </style>  
  33. </head>  
  34. <body>  
  35.     <form id="cerform" runat="server">  
  36.    <div>  
  37.                           <span class="span9"><b>*</b>用户真实姓名</span><input id="txtUserName" runat="server" class="input1 ipt_txt"  
  38.                                 type="text" />  
  39.                                 <span class="span10">请输入您的真实姓名</span></div>  
  40.                         <div class="clear height20">  
  41.                         </div>  
  42.                         <div>  
  43.                             <span class="span9"><b>*</b>身份证号码</span><input id="txtUserCardID" runat="server"  
  44.                                 class="input1 input2 ipt_txt" type="text" /><span class="span10">请输入您的身份证号码</span></div>  
  45.                         <div class="clear height20">  
  46.                         </div>  
  47.                         <div>  
  48.                             <span class="span9"><b>*</b>认证说明</span><textarea id="txtAreaContent" runat="server"></textarea><span class="span10">请完善认证说明,成功认证后,将出现在您的认证说明介绍中</span></div>  
  49.                         <div class="clear height20">  
  50.                         </div>  
  51.                         <div>  
  52.                             <span class="span9"><b>*</b>联系邮箱</span><input id="txtEmail" class="input1 ipt_txt" type="text" runat="server"/><span  
  53.                                 class="span10">请输入您的电子邮箱</span></div>  
  54.                         <div class="clear height20">  
  55.                         </div>  
  56.                         <div>  
  57.                             <span class="span9"><b>*</b>手机号码</span><input id="txtPhone" class="input1 ipt_txt" type="text" runat="server"/><span  
  58.                                 class="span10">请输入能联系上您的手机号码</span></div>  
  59.                         <div class="clear height20">  
  60.                         </div>  
  61.                         <div>  
  62.                             <span class="span9"></span>  
  63.                             <input type="submit" class="button_a" value="提交认证" /></div>  
  64.     </form>  
  65. </body>  
  66. </html>  
[html] view plaincopy
  1.   
[html] view plaincopy
  1.   


下面 是核心js代码

[javascript] view plaincopy
  1. //以下为自定义方法,validate方法中没有的  
  2.   
  3.   
  4. //判断两个值是否相等  
  5. jQuery.validator.addMethod("notEqualTo"function (value, element, param) {  
  6.     return value != $(param).val();  
  7. }, $.validator.format("两次输入不能相同!"));  
  8.   
  9.   
  10. //只能输入数字  
  11. jQuery.validator.addMethod("isNum"function (value, element) {  
  12.     var RegExp = /^\d+$/;  
  13.     return RegExp.test(value);  
  14. }, $.validator.format("只能为数字!"));  
  15.   
  16.   
  17. //规则名:buga,value检测对像的值    
  18. $.validator.addMethod("buga"function (value) {  
  19.     return value == "buga";  
  20. }, 'Please enter "buga"!');  
  21.   
  22.   
  23. //规则名:chinese,value检测对像的值,element检测的对像    
  24. $.validator.addMethod("chinese"function (value, element) {  
  25.     var chinese = /^[\u4e00-\u9fa5]+$/;  
  26.     return (chinese.test(value)) || this.optional(element);  
  27. }, "只能输入中文");  
  28.   
  29.   
  30. //规则名:byteRangeLength,value检测对像的值,element检测的对像,param参数    
  31. jQuery.validator.addMethod("byteRangeLength"function (value, element, param) {  
  32.     var length = value.length;  
  33.     for (var i = 0; i < value.length; i++) {  
  34.         if (value.charCodeAt(i) > 127) {  
  35.             length++;  
  36.         }  
  37.     }  
  38.     return this.optional(element) || (length >= param[0] && length <= param[1]);  
  39. }, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));  
  40.   
  41.   
  42. // 联系电话(手机/电话皆可)验证  
  43. jQuery.validator.addMethod("isPhone"function (value, element) {  
  44.     var length = value.length;  
  45.     var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;  
  46.     var tel = /^\d{3,4}-?\d{7,9}$/;  
  47.     return this.optional(element) || (tel.test(value) || mobile.test(value));  
  48.   
  49.   
  50. }, "请正确填写您的联系电话");  
  51.   
  52.   
  53. // 邮政编码验证  
  54. jQuery.validator.addMethod("isZipCode"function (value, element) {  
  55.     var tel = /^[0-9]{6}$/;  
  56.     return this.optional(element) || (tel.test(value));  
  57. }, "请正确填写您的邮政编码");  
  58.   
  59.   
  60.   
  61.   
  62. // 字符验证  
  63. jQuery.validator.addMethod("string"function (value, element) {  
  64.     return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);  
  65. }, "不允许包含特殊符号!");  
  66.   
  67.   
  68. // 必须以特定字符串开头验证  
  69. jQuery.validator.addMethod("begin"function (value, element, param) {  
  70.     var begin = new RegExp("^" + param);  
  71.     return this.optional(element) || (begin.test(value));  
  72. }, $.validator.format("必须以 {0} 开头!"));  
  73.   
  74.   
  75. // 验证两次输入值是否不相同  
  76. jQuery.validator.addMethod("notEqualTo"function (value, element, param) {  
  77.     return value != $(param).val();  
  78. }, $.validator.format("两次输入不能相同!"));  
  79.   
  80.   
  81. // 验证值不允许与特定值等于  
  82. jQuery.validator.addMethod("notEqual"function (value, element, param) {  
  83.     return value != param;  
  84. }, $.validator.format("输入值不允许为{0}!"));  
  85.   
  86.   
  87. // 验证值必须大于特定值(不能等于)  
  88. jQuery.validator.addMethod("gt"function (value, element, param) {  
  89.     return value > param;  
  90. }, $.validator.format("输入值必须大于{0}!"));  
  91.   
  92.   
  93. // 验证值小数位数不能超过两位  
  94. jQuery.validator.addMethod("decimal"function (value, element) {  
  95.     var decimal = /^-?\d+(\.\d{1,2})?$/;  
  96.     return this.optional(element) || (decimal.test(value));  
  97. }, $.validator.format("小数位数不能超过两位!"));  
  98.   
  99.   
  100. //字母数字  
  101. jQuery.validator.addMethod("alnum"function (value, element) {  
  102.     return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value);  
  103. }, "只能包括英文字母和数字");  
  104.   
  105.   
  106. // 汉字  
  107. jQuery.validator.addMethod("chcharacter"function (value, element) {  
  108.     var tel = /^[\u4e00-\u9fa5]+$/;  
  109.     return this.optional(element) || (tel.test(value));  
  110. }, "请输入汉字");  
  111.   
  112.   
  113. // 身份证号码验证(加强验证)  
  114. jQuery.validator.addMethod("isIdCardNo"function (value, element) {  
  115.     return this.optional(element) || /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/.test(value) || /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[A-Z])$/.test(value);  
  116. }, "请正确输入您的身份证号码");  
  117.   
  118.   
  119. // 手机号码验证  
  120. jQuery.validator.addMethod("isMobile"function (value, element) {  
  121.     var length = value.length;  
  122.     var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;  
  123.     return this.optional(element) || (length == 11 && mobile.test(value));  
  124. }, "请正确填写您的手机号码");  
  125.   
  126.   
  127. // 电话号码验证  
  128. jQuery.validator.addMethod("isTel"function (value, element) {  
  129.     var tel = /^\d{3,4}-?\d{7,9}$/;    //电话号码格式010-12345678  
  130.     return this.optional(element) || (tel.test(value));  
  131. }, "请正确填写您的电话号码");  
  132.   
  133.   
  134. //页面加载时调用  
  135. $(function () {  
  136.     $('#cerform').validate({  
  137.         rules: {  
  138.             txtUserName: {  
  139.                 required: true,  
  140.                 maxlength: 8,  
  141.                 minlength: 4  
  142.             },  
  143.             txtUserCardID: {  
  144.                 required: true,  
  145.                 maxlength: 18,  
  146.                 minlength: 18,  
  147.                 isIdCardNo: "#txtUserCardID"  
  148.             },  
  149.             txtUserPwd: {  
  150.                 required: true,  
  151.                 maxlength: 18,  
  152.                 minlength: 6,  
  153.                 notEqualTo: "#txtUserPwd"  
  154.             },  
  155.             txtRUserPwd: {  
  156.                 required: true,  
  157.                 equalTo: "#txtUserPwd"  
  158.             },  
  159.             txtAddress: {  
  160.                 required: true,  
  161.                 maxlength: 50  
  162.             },  
  163.             txtAreaContent: {  
  164.                 required: true,  
  165.                 maxlength: 300  
  166.             },  
  167.             txtUrl: {  
  168.                 required: true,  
  169.                 url: true  
  170.             },  
  171.             txtPhone: {  
  172.                 required: true,  
  173.                 minlength: 7,  
  174.                 maxlength: 13,  
  175.                 isTell: true,  
  176.                 isMobile: "#txtPhone"  
  177.             },  
  178.             txtZipCode: {  
  179.                 required: true,  
  180.                 minlength: 6,  
  181.                 maxlength: 6,  
  182.                 isNum: true  
  183.             },  
  184.             txtEmail: {  
  185.                 required: true,  
  186.                 email: true,  
  187.                 maxlength: 40  
  188.             }  
  189.         },  
  190.         messages: {  
  191.             txtUserName: {  
  192.                 required: "用户名不能为空!",  
  193.                 maxlength: "最长为18个字符!",  
  194.                 minlength: "最短为4个字符!",  
  195.                 remote: "该用户名已被占用!"  
  196.             },  
  197.             txtUserCardID: {  
  198.                 required: "身份证不能为空!",  
  199.                 maxlength: "身份证为18个字符!",  
  200.                 minlength: "身份证为18个字符!"  
  201.             },  
  202.             txtUserPwd: {  
  203.                 required: "密码不能为空!",  
  204.                 maxlength: "最长为18个字符!",  
  205.                 minlength: "最短为6个字符!",  
  206.                 notEqualTo: "用户名和密码不能相同!"  
  207.             },  
  208.             txtRUserPwd: {  
  209.                 required: "密码不能为空!",  
  210.                 equalTo: "两次输入密码不相同!"  
  211.             },  
  212.             txtAddress: {  
  213.                 required: "地址不能为空!",  
  214.                 maxlength: "最长50个字符!"  
  215.             },  
  216.             txtAreaContent: {  
  217.                 required: "不能为空!",  
  218.                 maxlength: "最长300个字符!"  
  219.             },  
  220.             txtUrl: {  
  221.                 required: "网址不能为空!",  
  222.                 url: "请填写正确的网址!"  
  223.             },  
  224.             txtPhone: {  
  225.                 required: "电话不能为空!",  
  226.                 minlength: "最少7个数字!",  
  227.                 maxlength: "最长13个数字!",  
  228.                 isTell: "电话格式不正确!"  
  229.             },  
  230.             txtZipCode: {  
  231.                 required: "邮编不能为空!",  
  232.                 minlength: "邮编为6个数字!",  
  233.                 maxlength: "邮编为6个数字!",  
  234.                 isNum: "请输入数字!"  
  235.             },  
  236.             txtEmail: {  
  237.                 required: "邮箱不能为空!",  
  238.                 email: "邮箱格式不正确!",  
  239.                 maxlength: "最长40个字符!"  
  240.             }  
  241.         },  
  242.         errorPlacement: function (error, element) {  
  243.             error.appendTo(element.parent());  
  244.         },  
  245.         submitHandler: function (form) {  
  246.             form.submit();  
  247.         },  
  248.         errorClass: "error",  
  249.         focusCleanup: true//被验证的元素获得焦点时移除错误信息  
  250.         success: function (label) {  
  251.             label.html("<span style=\"color:green\">填写正确!</span>").addClass("success");  
  252.         }  
  253.     });  
  254.   
  255.   
  256.   
  257.   
  258.     //所有使用“.ipt_txt”样式的文本框加上效果,获得焦点文本框变成淡黄色  
  259.     $(".ipt_txt").focus(function () {  
  260.         $(this).css("background-color""#FFFFCC").blur(function () {  
  261.             $(this).css("background-color""#FBFBFB");  
  262.         });  
  263.     });  
  264. });  


以上是jquery.validate.min.js 所有方法示例
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:262719次
    • 积分:3313
    • 等级:
    • 排名:第10232名
    • 原创:24篇
    • 转载:313篇
    • 译文:1篇
    • 评论:20条
    最新评论