  <script src="jQuery.1.8.3.js" type="text/javascript"></script>
  <script src="jquery.validate.js" type="text/javascript"></script>
  <script src="messages_zh.js" type="text/javascript"></script>

　　然后只要定義驗(yàn)證規(guī)則和指定錯(cuò)誤提示位置就可以了。

　　在$(document).ready()里加入驗(yàn)證規(guī)則與錯(cuò)誤提示位置，代碼如下：

JS代碼：

　　<script type="text/javascript">
    $(function () {
      $("#form1").validate({
        /*自定義驗(yàn)證規(guī)則*/
        rules:{
          username:{ required:true,minlength:6 },
          userpass:{ required:true,minlength:10 }
        },
        /*錯(cuò)誤提示位置*/
        errorPlacement:function(error,element){
          error.appendTo(element.siblings("span"));
        }
      });
    })
  </script>

HTML代碼：

　　<form id="form1" action="#" method="post">
　　　　<p>用戶登錄</p>
　　　　<p>名稱:<input id="txtName" name="username" type="text" class="txt" /><span style="color:Red;font-size:10px;"></span></p>
　　　　<p>密碼:<input id="txtPass" name="userpass" type="password" class="txt" /><span style="color:Red;font-size:10px;"></span></p>
　　　　<div>
　　　　　　<input id="btnLogin" type="button" value="登錄" class="btn" />&nbsp;&nbsp;
　　　　　　<input id="btnReset" type="button" value="取消" class="btn" />&nbsp;&nbsp;
　　　　</div>
　　</form>

　　這樣就完成了非常簡(jiǎn)單的表單驗(yàn)證功能，當(dāng)表單填寫(xiě)不正確時(shí)Validate在<input>的兄弟<span>元素里顯示錯(cuò)誤提示。

2、name屬性

　　說(shuō)明：jQuery.validate.js插件與<input>的關(guān)聯(lián)使用的是表單的name屬性。只有存在name屬性的<input>才能驗(yàn)證！

二、自定義錯(cuò)誤提示位置

　　當(dāng)我們想設(shè)置錯(cuò)誤提示的顯示位置怎么設(shè)置呢？

　　答案就是在errorPlacement參數(shù)里，你可以按照自己的需要自定義書(shū)寫(xiě)，用的是jQuery

     /*錯(cuò)誤提示位置*/
     errorPlacement:function(error,element){　　//第一個(gè)參數(shù)是錯(cuò)誤的提示文字，第二個(gè)參數(shù)是當(dāng)前輸入框
        error.appendTo(element.siblings("span"));　　//用的是jQuery，這里設(shè)置的是，錯(cuò)誤提示文本顯示在當(dāng)前文本框的兄弟span中
     }

三、自定義錯(cuò)誤提示信息

　　例如當(dāng)我們有多個(gè)require:true選項(xiàng)，我想根據(jù)不同的選項(xiàng)設(shè)置不同的提示怎么辦呢？

　　答案就是在messages參數(shù)里。用層層嵌套的方式設(shè)置自己需要的提示信息。如果某個(gè)字段沒(méi)有message信息，這時(shí)才調(diào)用默認(rèn)的提示信息。

 messages: { 
        UserName: { 
          required: "請(qǐng)輸入用戶名！"　　//注意，同樣是必填項(xiàng)，但是優(yōu)先顯示在messages里的提示信息
        },
        Email:{
          required:"請(qǐng)輸入郵箱地址!"　　//不會(huì)統(tǒng)一輸出 必填字段 了哦
        }
      }

實(shí)際上，jQuery.Validate默認(rèn)的錯(cuò)誤提示是生成一個(gè)class=error的label，所以，如果想設(shè)置樣式，最簡(jiǎn)單的方法就是針對(duì)這個(gè)label設(shè)置就OK了，當(dāng)然默認(rèn)的label是可以手動(dòng)更改的。

四、ajax異步驗(yàn)證
　　只需要用到remote即可，注意后臺(tái)返回的JSON只能夠是true或false。

　　以下給出一個(gè)綜合示例，前臺(tái)HTML代碼

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>表單驗(yàn)證插件</title>
  <script src="/Scripts/jquery-1.7.1.js" type="text/javascript"></script>
  <script src="/Scripts/messages_zh.js" type="text/javascript"></script>
  <script src="/Scripts/validates.js" type="text/javascript"></script>
  <script src="/Scripts/jquery.validate.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $("#form1").validate({
        rules: {
          UserName: { required: true, minlength: 3, maxlength: 18, remote: "/Home/CheckUserName" },
          Email: { required: true,email:true },
          UserPassword: { required: true ,minlength: 6 },
          Mobile: { required: true, number:true },
          IdCard: { required: true,isIdCardNo: true },
          Age: { required: true ,number:true,min:1,max:100 }
        },
        messages:{
          UserName: { 
            required: "請(qǐng)輸入用戶名！",
            minlength: "用戶名長(zhǎng)度最少需要3位！",
            maxlength: "用戶名長(zhǎng)度最大不能超過(guò)18位！",
            remote: "此用戶名已存在！"
           },
          Email: {
            required: "請(qǐng)?zhí)顚?xiě)郵箱",
            email: "請(qǐng)輸入正確的郵箱格式"
          },
          UserPassword: {
            required: "請(qǐng)?zhí)顚?xiě)你的密碼!",
            minlength: "密碼長(zhǎng)度不能小于6位"
          },
          Mobile: {
            required: "請(qǐng)?zhí)顚?xiě)你的手機(jī)號(hào)碼",
            number:"手機(jī)號(hào)碼只能為數(shù)字"
           },
          IdCard: {
            required: "請(qǐng)輸入身份證號(hào)碼！",
            isIdCardNo:"請(qǐng)輸入正確的身份證號(hào)碼！"
          },
          Age: {
            required: "請(qǐng)輸入年齡!",
            number: "請(qǐng)輸入數(shù)字",
            min: "年齡不能小于1", 
            max: "年齡不能大于100" 
          }
        },
        /*錯(cuò)誤提示位置*/
        errorPlacement: function (error, element) {
          error.appendTo(element.parent());
        }
      })
    })
  </script>
</head>
<body>
  <form id="form1" method="post" action="">
    <div>
    <p> 用戶名:<input type="text" value="" name="UserName" /> </p>
    <p> 密碼:<input type="password" value="" name="UserPassword" /> </p>
    <p> 郵箱:<input type="text" value="" name="Email" /> </p>
    <p> 手機(jī)號(hào)碼:<input type="text" value="" name="Mobile" /> </p>
    <p> 身份證號(hào)碼:<input type="text" value="" name="IdCard" /> </p>
    <p> 年齡:<input type="text" value="" name="Age" /> </p>
    <p> <input type="submit" id="btn1" value="提交"></p>
    </div>
  </form>
</body>
</html>

后臺(tái)控制器代碼:

  public class HomeController : Controller
  {
    public ActionResult Index()
    {
      return View();
    }

    [HttpGet]
    public ActionResult CheckUserName()
    {
      string username = HttpContext.Request.QueryString["username"];
      bool succeed = true;
      if (username == "admin")
      {
        succeed = false;
      }
      return Json(succeed, JsonRequestBehavior.AllowGet);
    }
  }

最終效果如下圖所示：