jquery validate添加自定義驗證規則(驗證郵箱郵政編碼)

2019-11-20 21:31:34

字體：大中小

來源：轉載

供稿：網友

jQuery：validate添加自定義驗證

jQuery.validator.addMethod添加自定義的驗證規則

addMethod：name, method, message

簡單實例：單個驗證的添加

復制代碼代碼如下:

<!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>validate.js拓展驗證</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" src="validate.expand.js"></script>
</head>
<body>
<form action=""  method="get" id="tinyphp">
<input type="text" value="" name="isZipCode" />
<input type="submit" value="提交" />
</form>
<script type="text/javascript">
$("#tinyphp").validate({
    // 添加驗證規則
    rules: {
        isZipCode: {    //驗證郵箱
            isZipCode: true
        }
    }
});  
    </script>
</body>
</html>

validate.expand.js

復制代碼代碼如下:

jQuery.validator.addMethod("isZipCode", function(value, element) {   
    var tel = /^[0-9]{6}$/;
    return this.optional(element) || (tel.test(value));
}, "請正確填寫您的郵政編碼");

添加多個驗證方法

復制代碼代碼如下:

<!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>validate.js拓展驗證</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" src="validate.expand.js"></script>
</head>
<body>
<form action="" method="get" id="tinyphp">
郵編：<input type="text" value="" name="isZipCode" /><br /><br />

名字：<input type="text" value="" name="userName" />
<input type="submit" value="提交" />
</form>
<script type="text/javascript">
$("#tinyphp").validate({
    // 添加驗證規則
    rules: {
        isZipCode: {    //驗證郵箱
            isZipCode: true
        },
        userName:{
            required: true,
            userName: true,
            rangelength: [5,10]
        }
    },

    //重設提示信息,可省略
    messages:{
        userName: {
            required: "請填寫用戶名",
            rangelength: "用戶名必須在5-10個字符之間"
        }

    }
});
    </script>
</body>
</html>

validate.expand.js

復制代碼代碼如下:

jQuery.validator.addMethod("userName", function(value, element) {
return this.optional(element) || /^[/u0391-/uFFE5/w]+$/.test(value);
}, "用戶名必須在5-10個字符之間");

jQuery.validator.addMethod("isZipCode", function(value, element) {
    var tel = /^[0-9]{6}$/;
    return this.optional(element) || (tel.test(value));
}, "請正確填寫您的郵政編碼");

上一篇：JavaScript執行順序詳細介紹

下一篇：瀏覽器圖片選擇預覽、旋轉、批量上傳的JS代碼實現