jquery validate添加自定義驗(yàn)證規(guī)則(驗(yàn)證郵箱郵政編碼)

更新時(shí)間：2013年12月04日 16:53:58 作者：

這篇文章主要介紹了query validate添加自定義驗(yàn)證規(guī)則,可以驗(yàn)證郵箱、郵政編碼等，看代碼參考使用

jQuery：validate添加自定義驗(yàn)證

jQuery.validator.addMethod添加自定義的驗(yàn)證規(guī)則

addMethod：name, method, message

簡單實(shí)例：單個(gè)驗(yàn)證的添加

復(fù)制代碼代碼如下:

<!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拓展驗(yàn)證</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({
    // 添加驗(yàn)證規(guī)則
    rules: {
        isZipCode: {    //驗(yàn)證郵箱
            isZipCode: true
        }
    }
});  
    </script>
</body>
</html>

validate.expand.js

復(fù)制代碼代碼如下:

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

添加多個(gè)驗(yàn)證方法

復(fù)制代碼代碼如下:

<!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拓展驗(yàn)證</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({
    // 添加驗(yàn)證規(guī)則
    rules: {
        isZipCode: {    //驗(yàn)證郵箱
            isZipCode: true
        },
        userName:{
            required: true,
            userName: true,
            rangelength: [5,10]
        }
    },

    //重設(shè)提示信息,可省略
    messages:{
        userName: {
            required: "請(qǐng)?zhí)顚懹脩裘?,
            rangelength: "用戶名必須在5-10個(gè)字符之間"
        }

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

validate.expand.js

復(fù)制代碼代碼如下:

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

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

您可能感興趣的文章: