京品吉橡胶强人线缆有限公司

jquery表单验证插件(jquery.validate.js)的3种使用方式(三)

2015-03-29  来源:junjie  我有话说  收藏本文  阅读  次

第三种方式:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> 
<script type="text/javascript" src="js/jquery.validate.js"></script> 
<script type="text/javascript" src="js/jquery.metadata.js"></script> 
<script type="text/javascript" src="js/messages_zh.js"></script> 
<style type="text/css">
    #frm label.error { 
        color: Red; 
    } 
</style> 
</head> 
<script type="text/javascript"> 
  
$(document).ready(function(){ 
  $("#clickme").click(function(){ 
     alert("Hello World"); 
 }); 
    
  jQuery.validator.addMethod("byteMaxLength", function(value, 
                    element, param) { 
                var length = value.length; 
                for ( var i = 0; i < value.length; i++) { 
                    if (value.charCodeAt(i) > 127) { 
                        length++; 
                    } 
                } 
                return this.optional(element) || (length <= param); 
            }, $.validator.format("不能超过{0}个字节(一个中文字算2个字节)")); 
   
  jQuery.validator.addMethod("numFormat",function(value,element,param){ 
             return this.optional(element) || /^\d*$/.test(value); 
            },$.validator.format("请输入数字{0}位以内") 
            ); 
              
              
               
            //number(9,3) 
            jQuery.validator.addMethod("numFormat63",function(value,element){ 
             return this.optional(element) || /^[0-9]{1,6}(\.\d{1,3})$/.test(value); 
            },$.validator.format("请输入合法数字,精度格式123456.0") 
            ); 
              
              
            jQuery.validator.addMethod("postcodeVal",function(value,element){ 
             return this.optional(element) || /^[0-9]\d{5}(?!\d)$/.test(value); 
            },$.validator.format("请输入合法的邮编") 
            ); 
              
            jQuery.validator.addMethod("numberAndLettersVal",function(value,element){ 
             return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value); 
            },$.validator.format("请输入字母或数字") 
            ); 
              
              
              
            jQuery.validator.addMethod("sfzhValidate",function(value,element){ 
             return this.optional(element) || /^(\d{14}|\d{17})(\d|[xX])$/.test(value); 
            },$.validator.format("请输入合法身份证号") 
            ); 
              
              
              
            jQuery.validator.addMethod("valiEnglish",function(value,element){ 
             return this.optional(element) || /^[a-zA-Z ]*$/.test(value); 
            },$.validator.format("请输入字母或者空格") 
            ); 
              
        $("#frm").validate(); 
        $('#username').rules('add', { required: true, byteMaxLength:20,valiEnglish:true}); 
        $('#postcode').rules('add', { postcodeVal:true}); 
        $('#number').rules('add', { byteMaxLength:5,numFormat:5}); 
        $('#identifier').rules('add', { sfzhValidate:true}); 
   
          
}); 
  
  
  
  
</script> 
<body> 
<form id="frm" name="frm" method="post" action=""><label>用 户 名: 
  <input type="text" name="username" id="username" /> 
</label> 
 <p> 
  <label>邮    编 :<label></label></label> 
  <label> 
  <input type="text" name="postcode" id="postcode" /> 
  <br /> 
  </label> 
 </p> 
 <p><label>数   字 :  
  <input type="text" name="number" id="number" /> 
 </label> 
  <br /><label>身份证号: 
  <input type="text" name="identifier" id="identifier" /> 
  </label> 
     
 <label> 
 <input type="button" name="clickme" id="clickme" value="click me" /> 
 </label> 
 </p> 
</form> 
</body> 
</html>

第三种方式与其他两种方式不同的地方就是:

$('#username').rules('add', { required: true,  
byteMaxLength:20,valiEnglish:true});
                $('#postcode').rules('add', { postcodeVal:true});
                $('#number').rules('add', { byteMaxLength:5,numFormat:5});
                $('#identifier').rules('add', { sfzhValidate:true});

为每一个单独的元素添加验证规则。其中调用了rules( "add", rules )方法,增加验证规则为匹配的元素。

注意:$("form").validate()方法必须首先被调用。

这个规则也能包含一个messages-object,定义常用的messages。

(责编:tianji)
关键词: 表单验证

声明:原文出自//article.nxpop.com/js/2015-03-29/285.html ,文章观点仅代表原作者,转载请注明出处。

新网巢是非商业性和非盈利性的个人运营网站,文章仅供个人站长及爱好者学习交流使用,如涉及侵权,烦请告知,以便及时删除。

已有条评论
匿名评论

用微信扫一扫

新网巢