<script src="jquery-1.9.1.js"></script>
<script src="jquery.validate.min.js"></script>

<form action="" id="mgForm"> //寫表單驗證比不缺少的是我們的form標簽
  <div> //關于用戶名的布局
    <label for="user">username:</label>
    <input type="text" name="username" id="user">
  </div>

  <div>//關于密碼的布局
    <label for="pass">password:</label>
    <input type="text" name="password" id="pass">
  </div>
  <div>//重置密碼
    <label for="pass1">form-password:</label>
    <input type="text" name="password1" id="pass1">
  </div>
  <div>//年齡
    <label for="age">age:</label>
    <input type="text" name="age" id="age">
  </div>
  <div>//email
    <label for="email">email:</label>
    <input type="text" name="email" id="email">
  </div>
  <input type="submit" value="提交"> //我們在提交數據時提交的按鈕應該為submit類型的
</form>

   $(function () {
      $("#mgForm").validate({
        rules:{//寫入文本框中的限制條件
          username:{ //指的是input中name的名字
            required:true,//不能為空
            minlength:6,//最短為6個
            maxlength:10//最長為10個
          },
          age:{
          //  range:[18,80] //年齡范圍為18-80
            required:true, //不能為空
          },
          password:{
            required:true,//必填
            rangelength:[2,6] //長度為2-6
          },
          password1:{
            equalTo:"#pass" //重置密碼必須與#pass中的密碼保持一致
          },
          email:{
            email:true //email保證格式正確
          }
        },
        messages:{//提示信息
          username:{ //用戶名
            required:"*此項必填",
            minlength:"*用戶名最小是6位",
            maxlength:"*用戶名最大是10位"
          },
          age:{//年齡
            range:"*年齡必須在18-80之間"
            PostCode:"錯誤"
          },
          password:{//密碼
            required:"*必填",
            rangelength:"2-6"
          },
          password1:{//重置密碼
            equalTo:"*密碼不一致"
          },
          email:{//郵箱格式
            email:"*郵箱格式不正確"
          }
        },
        submitHanfler:function () {//如果全部驗證正確就彈出彈窗
          alert("全部通過")
        },
        errorClass:"wrong",//給錯誤字段添加wrong樣式
        ignore:"#pass1",//忽略密碼不一
        errorElement:"div",//錯誤信息單獨顯示一行
        focusInvalid:true,//提交表單后,未通過驗證的表單(第一個或提交之 前獲得焦點的未通過驗證的表單)會獲得焦點 
        focusCleanup:true,// 當未通過驗證的元素獲得焦點時,并移除錯誤提示
        highlight:function (element,errorClass) {//在信息錯誤時會出現一閃的效果
          $(element).addClass(errorClass);
          $(element).fadeOut().fadeIn()
        }
      });
        $.validator.addMethod("PostCode",function () { //此外，我們還可自定義樣式
          var reg=/^[0-9]{6}$/;
          return reg.test(value)
        },"郵編輸入不正確");
      });