jQuery Validation 表单验证常用实例以及自定义方法的实现

【实例简介】

通过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>