zoukankan      html  css  js  c++  java

  • jQuery.Validate自定义规程的使用案例

    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>    
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
    5. <title>jquery.validate自定义规则的使用方法</title>    
    6. <script src="jquery.js" type="text/javascript"></script>    
    7. <script src="jquery.validate.min.js" type="text/javascript"></script>    
    8. <script type="text/javascript" language="javascript">    
    9.     
    10. //规则名：buga,value检测对像的值    
    11.     $.validator.addMethod("buga", function(value) {    
    12.         return value == "buga";    
    13.     }, 'Please enter "buga"!');    
    14. //规则名：chinese，value检测对像的值，element检测的对像    
    15.     $.validator.addMethod("chinese", function(value, element) {    
    16.         var chinese = /^[u4e00-u9fa5]+$/;    
    17.         return (chinese.test(value)) || this.optional(element);    
    18.     }, "只能输入中文");    
    19. //规则名：byteRangeLength，value检测对像的值，element检测的对像,param参数    
    20.     jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {    
    21.         var length = value.length;    
    22.         for (var i = 0; i < value.length; i++) {    
    23.             if (value.charCodeAt(i) > 127) {    
    24.                 length++;    
    25.             }    
    26.         }    
    27.         return this.optional(element) || (length >= param[0] && length <= param[1]);    
    28.     }, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));    
    29.         
    30. $(function(){    
    31.         
    32.         $("#form1").validate({    
    33.         rules: {    
    34.             username:{    
    35.                 required:true,    
    36.                 chinese:true,    
    37.                 byteRangeLength:[1,2]    
    38.                 }    
    39.             //username:"buga"    
    40.             //username:"chinese"    
    41.             //username:"byteRangeLength"            
    42.         }    
    43.         });    
    44.         
    45. });    
    46. </script>    
    47. </head>    
    48.     
    49. <body>    
    50.     
    51. <form id="form1" name="form1" method="post" action="">    
    52.   <p>    
    53.     <label for="username">用户名：</label>    
    54.     <input type="text" name="username" id="username"/>    
    55.   </p>    
    56.   <p>    
    57.     <input type="submit" name="button" id="button" value="提交" />    
    58.   </p>    
    59. </form>    
    60.     
    61. </body>    
    62. </html>  
  • 相关阅读:
    （转）如何搭建一个vue项目
    vue项目设置自动打开浏览器
    vue项目关闭代码校验
    前端面试知识点
    图片瀑布流，so easy！
    详细梳理ajax跨域4种解决方案
    css实现内容不相同的左右两个div等高
    简单了解css3轮廓outline
    vue事件监听机制
    table-layout:fixed
  • 原文地址：https://www.cnblogs.com/BluceLee/p/4092241.html
Copyright © 2011-2022 走看看