jqueryValidator

       通过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" /> 用户名为必填项
            </li>
            <li><span class="lname">Email :</span><input type="text" id="Email"  name="Email"  /> 该Email必须真实有效
            </li>
        <li><span class="lname">年 龄 :</span><input type="text" id="Age"  name="Age"  /> 年龄必须为数字(这里只是示范，实际上年龄也没小于0的，呵呵)
            </li>
            <li><span class="lname">工 龄 :</span><input type="text" id="WorkAge"  name="WorkAge"  /> 工龄必须为大于零的数字
            </li>
                        <li><input type="button"   value="保存" id="btnSave" />
            </li>
        </ul>
</form>