Nice validator領先的表單驗證解決方案 轉


Nice validator是一個簡單智能的Web表單驗證插件,可以驗證現有的所有格式,比如郵箱地址、電話號碼等,您還可以自定義規則驗證,插件基於jQuery庫,支持多種語言配置。

安裝

1、您可以訪問Nice validator的Github地址,下載Nice validator的源代碼解壓到你的項目中,然后通過下面的代碼引入Nice validator文件。

local 參數用來加載對應的配置文件。如果不傳 local 參數,配置以及樣式就需要自行引入

<script src="nice-validator/jquery.validator.js?local=zh-CN"></script>

2、也通過 RequireJS 或者 Sea.js 模塊系統安裝

nice-validator 在 bower 和 npm 注冊了 package,你可以通過以下命令安裝 nice-validator 的最新版本。

通過 bower

$ bower install nice-validator

通過 npm

$ npm install nice-validator

注意:只能配置 nice-validator 為 local 下對應配置文件路徑。

// requirejs 配置 requirejs.config({ paths: { validator: 'path/to/nice-validator/local/en' } }); // seajs 配置 seajs.config({ alias: { validator: 'path/to/nice-validator/local/zh-CN' } });

初始化驗證

nice-validator 支持 JS 和 DOM 兩種方式初始化驗證,你可以根據自己的場景選擇

(1)、DOM 綁定規則,無需 JS 代碼

<form id="form1" action="register.php"> <label>Email</label> <input type="email" name="email" data-rule="required;email"> <label>Password</label> <input type="password" name="pwd" data-rule="required;length(6~16)"> </form> 

(2)、JS 配置規則,無侵入 DOM

調用插件方法 .validator(),並使用 fileds 參數

<form id="form1" action="register.php"> <label>Email</label> <input type="email" name="email"> <label>Password</label> <input type="password" name="pwd"> </form> 
// 初始化驗證 $('#form1').validator({ fields: { 'email': 'required;email', 'pwd': 'required;length(6~16)' } }); 

當然,DOM 和 JS 兩種方式也支持同時使用,你也可以通過 DOM 綁定規則,然后使用 js 初始化。

提交表單

nice-validator 一旦初始化就會阻止表單被提交,直到表單規則全部驗證通過。

如果傳遞了valid參數回調或者valid.form事件,表單即使驗證通過也不會被提交,而是由valid參數和valid.form事件接管。然后你需要自己決定如何提交表單。

可以通過以下三種方式提交表單:

示例:點擊提交按鈕,表單驗證通過后自動原生方式提交

<form id="form1" action="register.php"> <label>Email</label> <input type="email" name="email" data-rule="required;email"> <label>Password</label> <input type="password" name="pwd" data-rule="required;length(6~16)"> <button type="submit">提交</button> </form> 

示例:使用 valid 參數,並且使用原生 form 提交

$('#form1').validator({ fields: { 'email': 'required;email', 'pwd': 'required;length(6~16)' }, valid: function(form) { // do something // use native submit. form.submit(); } }); 

示例:綁定表單驗證通過的事件,使用 ajaxSUbmit 提交表單

$('#form1').on('valid.form', function(e){ $(this).ajaxSubmit(); });

瀏覽器兼容

  • IE6+
  • Chrome
  • Safari 4+
  • Firefox 3.5+
  • Opera

相關鏈接


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM