jQuery.Validate表單驗(yàn)證插件的使用示例詳解

更新時(shí)間：2017年01月04日 14:04:35 作者：vcxiaohan2

jQuery Validate 插件為表單提供了強(qiáng)大的驗(yàn)證功能，讓客戶端表單驗(yàn)證變得更簡單，同時(shí)提供了大量的定制選項(xiàng)，滿足應(yīng)用程序各種需求。接下來通過本文給大家介紹jQuery.Validate表單驗(yàn)證插件的使用示例，一起看看吧

jQuery Validate 插件為表單提供了強(qiáng)大的驗(yàn)證功能，讓客戶端表單驗(yàn)證變得更簡單，同時(shí)提供了大量的定制選項(xiàng)，滿足應(yīng)用程序各種需求。

請(qǐng)?jiān)谶@里查看示例 validate示例

示例包含

驗(yàn)證錯(cuò)誤時(shí)，顯示紅色錯(cuò)誤提示
自定義驗(yàn)證規(guī)則
引入中文錯(cuò)誤提示
重置表單需要執(zhí)行2句話

源碼示例

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> 
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 
 <title>demo</title> 
 <script src="../js/jquery-1.11.3.min.js"></script>
 <script src="js/jquery.validate.min.js"></script>
 <script src="js/messages_zh.min.js"></script>
 <style> 
  * { 
   margin: 0; 
   padding: 0; 
  } 
  body, html { 
   width: 100%; 
   height: 100%;
  } 
  .red {
   color: red;
  } 
  .green {
   color: green;
  }
 </style> 
</head> 
<body>
 <form id="form">
  <div>
   <input type="text" name="a" />
  </div>
  <div>
   <input type="submit" value="提交">
   <input class="reset" type="button" value="重置">
  </div>
 </form>
</body> 
<script> 
 $(function() {
  var validator = $('#form').validate({
   submitHandler:function(form){
    $('body').append('表單驗(yàn)證成功，發(fā)送了一個(gè)請(qǐng)求');
   },
   rules: {
    a: {
     required: true,
     isEven: true,// 使用自定義的驗(yàn)證規(guī)則
    },
   },
   messages: {
    a: {
     required: '<div><span class="red">*</span><span>此項(xiàng)必填</span></div>',
     isEven: '<div><span class="red">*</span><span>不是偶數(shù)</span></div>',
    },
   },
   // 驗(yàn)證成功后的回調(diào)
   success: function(label) {
    label.html('<div><span class="green">*</span><span>通過驗(yàn)證</span></div>');
   }
  });
  // 自定義驗(yàn)證
  jQuery.validator.addMethod('isEven', function(value, element) { 
   return this.optional(element) || !(value%2);
  }, '請(qǐng)輸入一個(gè)偶數(shù)');
  // 重置表單
  $(".reset").click(function() {
   validator.resetForm();// 插件方法-刪除錯(cuò)誤提示
   $('#form')[0].reset();// 原生方法-清空輸入內(nèi)容
  });
 });
</script> 
</html>

相關(guān)閱讀：

jQuery Validate插件自定義驗(yàn)證規(guī)則的方法

基于jQuery.validate及Bootstrap的tooltip開發(fā)氣泡樣式的表單校驗(yàn)組件思路詳解

JQuery validate插件Remote用法大全

jQuery easyui的validatebox校驗(yàn)規(guī)則擴(kuò)展及easyui校驗(yàn)框validatebox用法

以上所述是小編給大家介紹的jQuery.Validate表單驗(yàn)證插件的使用示例詳解，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: