AngularJS驗證資訊架構的封裝外掛程式用法【w5cValidator擴充外掛程式】_AngularJS

本文執行個體講述了AngularJS驗證資訊架構的封裝外掛程式用法。分享給大家供大家參考，具體如下：

AngularJS 的表單驗證規則

angular.js 的表單驗證規則有 required(必填項)，type="number"(必須為數字)，type="email"(必須為郵箱地址)，ng-max（最大值），ng-min（最小值），ng-max-length（最大長度），ng-min-length（最小長度），ng-pattern（正則驗證）等等，而且angular寫自定的驗證規則也很簡單。

具體的驗證細節參考官方文檔：http://docs.angularjs.org/guide/forms

AngularJS 預設的驗證是即時的，如果輸入框輸入值驗證通過會在input上加入class ng-valid，如果驗證不通過會自動添加 class ng-invalid，輸入框輸入了值之後自動加上了 class ng-dirty，這樣系統可以很簡單的通過修改 ng-invalid ng-valid ng-dirty 三個樣式達到驗證提示的目的。但是如果驗證失敗需要提示一段文字，那麼只有通過編寫模板來達到。

Angular.js 驗證的缺點

1. 提示資訊是即時顯示的，有時候我們更想要通過表單提交觸發驗證

2. 寫驗證提示資訊需要寫大量模板：

<div>    Size (integer 0 - 10):    <input type="number" ng-model="size" name="size"       min="0" max="10" integer />{{size}}<br />    <span ng-show="form.size.$error.integer">This is not valid integer！</span>    <span ng-show="form.size.$error.min || form.size.$error.max">     The value must be in range 0 to 10!</span></div>

w5cValidator 擴充外掛程式的出現

Github上的源碼地址為：https://github.com/why520crazy/w5c-validator-angular

目前版本v1.0.0

使用步驟：

1. 在項目中引用 w5cValidator.js

2. 在表單form上添加一個指令 w5c-form-validate 和 w5c-submit 如下所示：

<form class="form-horizontal cw-form demo-form" role="form" w5c-submit="js_save_entity(form_validate)"         w5c-form-validate="" novalidate name="form_validate">　　<div class="form-group">　　　　<label class="col-sm-2 control-label">郵箱</label>　　　　<div class="col-sm-10">　　　　　　　<input type="email" name="email" ng-model="entity.email" required="" class="form-control" placeholder="輸入郵箱">  </div></div><div class="form-group">  <label class="col-sm-2 control-label">使用者名稱</label>　　　 <div class="col-sm-10">     <input required="" ng-pattern="/^[A-Za-z]{1}[0-9A-Za-z_]{1,19}$/" ng-model="entity.name" class="form-control" name="user_name" placeholder="輸入使用者名稱">  </div></div>　　...</form>

w5c-submit 函數是表單驗證成功後執行的事件，驗證失敗不會執行

3. 沒了，使用就這麼簡單

w5cValidator 使用注意事項：

1. w5cValidator 預設的錯誤提示使用了bootstrap的樣式和布局，使用到你的項目中需要修改預設的 show_error, remove_error 方法，可以是tip提示，可以是統一在某個地方顯示等等

2. w5cValidator 可以設定游標移走input時是否顯示錯誤提示，預設false

3. w5cValidator 內建了預設的提示資訊，同時支援自訂驗證規則提示資訊

4. angular.js的所有驗證資訊都是儲存在form表單中的，w5cValidator也是監控表單元素的屬性來實現的，使用必須要設定form以及每個元素的name屬性，否則錯誤資訊就找不到對應的元素

5. 看下以下的代碼你就能明白一切了：

w5cValidator.init({     //blur_trig  : false,     //show_error : function (elem, error_messages) {     //     //},     //remove_error: function (elem) {     //     //}});w5cValidator.set_rules({    user_name: {       required: "輸入的使用者名稱不可為空",       pattern : "使用者名稱必須輸入字母、數字、底線,以字母開頭"    }});

當然目前的 w5cValidator 還比較原始，NgNice的驗證提示就是使用了w5cValidator

未來規劃中的 w5cValidator 2.0

1. 現在只能設定全域的顯示類型，將來要支援單個表單的配置項，整個項目偶爾會有提示資訊不同的情況

2. 代碼重構，以AngularJS的方式編寫擴充

3. 添加一些 AngularJS沒有的驗證類型 如 repeat ，uniquecheck 等

希望本文所述對大家AngularJS程式設計有所協助。