快捷導(dǎo)航

jquery validate demo 基礎(chǔ)

更新時(shí)間：2015年10月29日 11:36:12 作者：小禾點(diǎn)點(diǎn)

本文通過一段jquery代碼給大家詳解jquery validate基礎(chǔ)，本文代碼簡(jiǎn)單，非常具有參考借鑒價(jià)值，感興趣的朋友一起參考下

jQuery Validate 插件為表單提供了強(qiáng)大的驗(yàn)證功能，讓客戶端表單驗(yàn)證變得更簡(jiǎn)單，同時(shí)提供了大量的定制選項(xiàng)，滿足應(yīng)用程序各種需求。該插件捆綁了一套有用的驗(yàn)證方法，包括 URL 和電子郵件驗(yàn)證，同時(shí)提供了一個(gè)用來編寫用戶自定義方法的 API。所有的捆綁方法默認(rèn)使用英語作為錯(cuò)誤信息，且已翻譯成其他 37 種語言。

下面通過一段代碼demo給大家講解jquery validate ，具體代碼如下所示：

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
 <script type="text/javascript" src="js/jquery.validate-1.14.0.js"></script>
 <script type="text/javascript">
 $().ready(function() {
  var validate= $("#signupForm").validate({
    rules: {
     firstname: "required",
     email: {
     required: true,
     email: true
     },
     password: {
     required: true,
     minlength: 5
     },
     confirm_password: {
     required: true,
     minlength: 5,
     equalTo: "#password"
     }
    },
    messages: {
     firstname: "請(qǐng)輸入姓名",
     email: {
     required: "請(qǐng)輸入Email地址",
     email: "請(qǐng)輸入正確的email地址"
     },
     password: {
     required: "請(qǐng)輸入密碼",
     minlength: "密碼不能小于{0}個(gè)字 符"
     },
      confirm_password: {
     required: "確認(rèn)密碼",
     minlength: "確認(rèn)密碼不能小于5個(gè)字符",
     equalTo: "兩次輸入密碼不一致不一致"
    }
   },
   //把錯(cuò)誤信息放到一處處理與 errorPlacement 函數(shù)連用
   groups:{
    login:"firstname email password confirm_password"
   },
   errorPlacement:function(error,element){
    error.insertBefore("#error_info"); 
   },
   //提交表單后焦點(diǎn)在第一個(gè)錯(cuò)誤表單內(nèi)
   focusInvalid:true,
   //指定錯(cuò)誤提示的css類名
   errorClass:"error_info",
   //指定驗(yàn)證通過的css類名
   validClass:"success_info",
   //驗(yàn)證通過提交表單
   submitHandler:function(form){
    console.info("提交表單"+$(form).serialize());
   },
   invalidHandler:function(event,validator){
    console.info("表單錯(cuò)誤"+validate.numberOfInvalids());
   },
   // 取消某個(gè)元素的校驗(yàn)
   ignore:"#firstname",
   onfocusout:function(){
    return false;
   }
  });
  $("#check").click(function(){
   var flag1=$("#signupForm").valid();//檢查表單是否有效
   var flag2=$("#firstname").rules();//查詢?cè)氐男ｒ?yàn)規(guī)則
   var flag3=$("#firstname").rules("add",{minlength:2,maxlength:10});//添加元素的校驗(yàn)規(guī)則
   var flag4=$("#firstname").rules("remove","minlength");//刪除元素的校驗(yàn)規(guī)則
   var flag5=validate.form();//驗(yàn)證表單是否有效
   var flag6=validate.element("#firstname");//驗(yàn)證表單某個(gè)元素是否有效
   validate.resetForm();//恢復(fù)表單原來的狀態(tài)
   var flag7=validate.numberOfInvalids();//獲得錯(cuò)誤元素個(gè)數(shù)
   console.info(flag7);
  });
  //針對(duì)某個(gè)元素顯示特定的提示信息
  validate.showErrors({
   firstname:"ERROR"
  });  
});
 </script>
</head>
<body>
 <form id="signupForm" method="get" action="">
  <p id="error_info">
   <label for="firstname">Firstname</label>
   <input id="firstname" name="firstname" />
  </p>
  <p>
   <label for="email">E-Mail</label>
   <input id="email" name="email" />
  </p>
  <p>
   <label for="password">Password</label>
   <input id="password" name="password" type="password" />
  </p>
  <p>
   <label for="confirm_password">確認(rèn)密碼</label>
   <input id="confirm_password" name="confirm_password" type="password" />
  </p>
  <p>
   <input class="submit" type="submit" value="Submit"/>
  </p>
  <p>
   <input class="c" type="button" value="檢查表單是否有效" id="check"/>
  </p>
</form>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，代碼簡(jiǎn)單明了，非常具有參考借鑒價(jià)值，希望大家喜歡。

您可能感興趣的文章: