【實例簡介】

通過Jquery validate在不侵入代碼的情況下實現：常用的表單驗證，其中有郵箱格式驗證、必須為數字驗證、正整數、不能為空判斷以及自定義驗證方法的實現。

【實例效果】

【核心代碼】

需要添加的引用文件如下：

<link  type="text/css"  href="Scripts/validate/css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" />
    <link  type="text/css"  href="Scripts/validate/css/Validate.css" rel="stylesheet" />
    <script src="Scripts/validate/jquery-1.6.1.min.js" type="text/javascript"></script>
    <script src="Scripts/validate/jquery-ui-1.8.13.custom.min.js" type="text/javascript"></script>
    <script src="Scripts/validate/jquery.validate.min.js" type="text/javascript"></script>
    <script src="Scripts/validate/jquery.validate.wrapper.js" type="text/javascript"></script>

自定義驗證方法在這里：

//這個是自定義添加的驗證方法
jQuery.validator.addMethod("positiveinteger", function(value, element) {
   var aint=parseInt(value);	
    return aint>0&& (aint "")==value;   
  }, "請輸入正整數.");   

這是驗證邏輯：

   $(document).ready(function () {
        // 1. prepare the validation rules and messages.
        var rules = {
            UserName: {
                required: true,
                maxlength: 15
            },
            //UserName: "required",
            Email:{ required:true,email:true},
            Age:{ required:true,number:true},
	    WorkAge:{ required:true,positiveinteger:true},
        };
        var messages = {
            UserName: {
                required: "用戶名不能為空",
                maxlength: "用戶名長度最長為15"
            },
            //Email: "textbox2 is requried",
            Email: {
                required: "郵箱不能為空",
                email: "請輸入正確的郵箱"
            },
	    Age:{
                required: "年齡不能為空",
                number: "輸入的年齡必須為數字"
            },
	    WorkAge:{
                required: "工齡不能為空",
                positiveinteger: "輸入的工齡必須為正整數哦"
            }
        };
        // 2. Initiate the validator
        var validator=new jQueryValidatorWrapper("FormToValidate",//這里是你的form的Id，可自定義
                rules, messages);;
        // 3. Set the click event to do the validation
        $("#btnSave").click(function () {
            if (!validator.validate())
                return;
 
            alert("驗證通過，這里可以進行添加您自定義的邏輯!");
        });
    });

這里是無侵入的html內容：

<form id="FormToValidate" action="#">
        <ul>
            <li><span class="lname">用戶名:</span><input type="text" id="UserName"  name="UserName" />&nbsp;用戶名為必填項
            </li>
            <li><span class="lname">Email :</span><input type="text" id="Email"  name="Email"  />&nbsp;該Email必須真實有效
            </li>
	    <li><span class="lname">年 齡 :</span><input type="text" id="Age"  name="Age"  />&nbsp;年齡必須為數字(這里只是示范，實際上年齡也沒小于0的，呵呵)
            </li>
            <li><span class="lname">工 齡 :</span><input type="text" id="WorkAge"  name="WorkAge"  />&nbsp;工齡必須為大于零的數字
            </li>
                        <li><input type="button"   value="保存" id="btnSave" />
            </li>
        </ul>
</form>