jQquery.validate自定義規則的使用案例

時間 2019-11-09

標籤 jqquery.validate jqquery validate 自定義規則使用案例简体版

原文原文鏈接

<!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=utf-8" />  
<title>jquery.validate自定義規則的使用方法</title>  
<script src="jquery.js" type="text/javascript"></script>  
<script src="jquery.validate.min.js" type="text/javascript"></script>  
<script type="text/javascript" language="javascript">  
  
//規則名：buga,value檢測對像的值  
    $.validator.addMethod("buga", function(value) {  
        return value == "buga";  
    }, 'Please enter "buga"!');  
//規則名：chinese，value檢測對像的值，element檢測的對像  
    $.validator.addMethod("chinese", function(value, element) {  
        var chinese = /^[\u4e00-\u9fa5]+$/;  
        return (chinese.test(value)) || this.optional(element);  
    }, "只能輸入中文");  
//規則名：byteRangeLength，value檢測對像的值，element檢測的對像,param參數  
    jQuery.validator.addMethod("byteRangeLength", 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[0] && length <= param[1]);  
    }, $.validator.format("請確保輸入的值在{0}-{1}個字節之間(一箇中文字算2個字節)"));  
      
$(function(){  
      
        $("#form1").validate({  
        rules: {  
            username:{  
                required:true,  
                chinese:true,  
                byteRangeLength:[1,2]  
                }  
            //username:"buga"  
            //username:"chinese"  
            //username:"byteRangeLength"          
        }  
        });  
      
});  
</script>  
</head>  
  
<body>  
  
<form id="form1" name="form1" method="post" action="">  
  <p>  
    <label for="username">用戶名：</label>  
    <input type="text" name="username" id="username"/>  
  </p>  
  <p>  
    <input type="submit" name="button" id="button" value="提交" />  
  </p>  
</form>  
  
</body>  
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。