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>

 

 属性            大小     日期    时间   名称
----------- ---------  ---------- -----  ----
     目录           0  2012-12-12 12:24  scripts\
     目录           0  2012-12-12 12:24  scripts\validate\
     目录           0  2012-12-12 12:24  scripts\validate\css\
     目录           0  2012-12-12 12:24  scripts\validate\css\ui-lightness\
     目录           0  2012-12-12 12:24  scripts\validate\css\ui-lightness\images\
     文件         260  2012-12-07 12:45  scripts\validate\css\ui-lightness\images\ui-bg_diagonals-thick_18_b81900_40x40.png
     文件         251  2012-12-07 12:45  scripts\validate\css\ui-lightness\images\ui-bg_diagonals-thick_20_666666_40x40.png
     文件         178  2012-12-07 12:45  scripts\validate\css\ui-lightness\images\ui-bg_flat_10_000000_40x100.png
     文件         104  2012-12-07 12:45  scripts\validate\css\ui-lightness\images\ui-bg_glass_100_f6f6f6_1x400.png
     文件         125  2012-12-07 12:45  scripts\validate\css\ui-lightness\images\ui-bg_glass_100_fdf5ce_1x400.png
     文件         105  2012-12-07 12:45  scripts\validate\css\ui-lightness\images\ui-bg_glass_65_ffffff_1x400.png
     文件        3762  2012-12-07 12:45  scripts\validate\css\ui-lightness\images\ui-bg_gloss-wave_35_f6a828_500x100.png
     文件          90  2012-12-07 12:45  scripts\validate\css\ui-lightness\images\ui-bg_highlight-soft_100_eeeeee_1x100.png
     文件         129  2012-12-07 12:45  scripts\validate\css\ui-lightness\images\ui-bg_highlight-soft_75_ffe45c_1x100.png
     文件        4369  2012-12-07 12:45  scripts\validate\css\ui-lightness\images\ui-icons_222222_256x240.png
     文件        4369  2012-12-07 12:45  scripts\validate\css\ui-lightness\images\ui-icons_228ef1_256x240.png
     文件        4369  2012-12-07 12:45  scripts\validate\css\ui-lightness\images\ui-icons_ef8c08_256x240.png
     文件        4369  2012-12-07 12:45  scripts\validate\css\ui-lightness\images\ui-icons_ffd27a_256x240.png
     文件        4369  2012-12-07 12:45  scripts\validate\css\ui-lightness\images\ui-icons_ffffff_256x240.png
     文件       34363  2012-12-07 12:45  scripts\validate\css\ui-lightness\jquery-ui-1.8.13.custom.css
     文件          77  2012-12-07 12:45  scripts\validate\css\Validate.css
     文件      109115  2012-12-07 12:43  scripts\validate\jquery-1.6.1.min.js
     文件      208692  2012-12-07 12:43  scripts\validate\jquery-ui-1.8.13.custom.min.js
     文件       24339  2012-12-07 12:43  scripts\validate\jquery.validate.min.js
     文件        1952  2012-12-07 13:17  scripts\validate\jquery.validate.wrapper.js
     文件        3720  2012-12-12 12:56  test.html