本文實(shí)例講述了AngularJS驗(yàn)證信息框架的封裝插件用法。分享給大家供大家參考，具體如下：

AngularJS 的表單驗(yàn)證規(guī)則

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

具體的驗(yàn)證細(xì)節(jié)參考官方文檔：http://docs.angularjs.org/guide/forms

AngularJS 默認(rèn)的驗(yàn)證是實(shí)時(shí)的，如果輸入框輸入值驗(yàn)證通過(guò)會(huì)在input上加入class ng-valid，如果驗(yàn)證不通過(guò)會(huì)自動(dòng)添加 class ng-invalid，輸入框輸入了值之后自動(dòng)加上了 class ng-dirty，這樣系統(tǒng)可以很簡(jiǎn)單的通過(guò)修改 ng-invalid ng-valid ng-dirty 三個(gè)樣式達(dá)到驗(yàn)證提示的目的。但是如果驗(yàn)證失敗需要提示一段文字，那么只有通過(guò)編寫(xiě)模板來(lái)達(dá)到。

Angular.js 驗(yàn)證的缺點(diǎn)

1. 提示信息是實(shí)時(shí)顯示的，有時(shí)候我們更想要通過(guò)表單提交觸發(fā)驗(yàn)證

2. 寫(xiě)驗(yàn)證提示信息需要寫(xiě)大量模板：

<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 擴(kuò)展插件的出現(xiàn)

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

目前版本v1.0.0

使用步驟：

1. 在項(xiàng)目中引用 w5cValidator.js

2. 在表單form上添加一個(gè)指令 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 函數(shù)是表單驗(yàn)證成功后執(zhí)行的事件，驗(yàn)證失敗不會(huì)執(zhí)行

3. 沒(méi)了，使用就這么簡(jiǎn)單

w5cValidator 使用注意事項(xiàng)：

1. w5cValidator 默認(rèn)的錯(cuò)誤提示使用了bootstrap的樣式和布局，使用到你的項(xiàng)目中需要修改默認(rèn)的 show_error, remove_error 方法，可以是tip提示，可以是統(tǒng)一在某個(gè)地方顯示等等

2. w5cValidator 可以設(shè)置光標(biāo)移走input時(shí)是否顯示錯(cuò)誤提示，默認(rèn)false

3. w5cValidator 自帶了默認(rèn)的提示信息，同時(shí)支持自定義驗(yàn)證規(guī)則提示信息

4. angular.js的所有驗(yàn)證信息都是保存在form表單中的，w5cValidator也是監(jiān)控表單元素的屬性來(lái)實(shí)現(xiàn)的，使用必須要設(shè)置form以及每個(gè)元素的name屬性，否則錯(cuò)誤信息就找不到對(duì)應(yīng)的元素

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

w5cValidator.init({
     //blur_trig  : false,
     //show_error : function (elem, error_messages) {
     //
     //},
     //remove_error: function (elem) {
     //
     //}
});
w5cValidator.set_rules({
    user_name: {
       required: "輸入的用戶名不能為空",
       pattern : "用戶名必須輸入字母、數(shù)字、下劃線,以字母開(kāi)頭"
    }
});

當(dāng)然目前的 w5cValidator 還比較原始，NgNice的驗(yàn)證提示就是使用了w5cValidator

未來(lái)規(guī)劃中的 w5cValidator 2.0

1. 現(xiàn)在只能設(shè)置全局的顯示類型，將來(lái)要支持單個(gè)表單的配置項(xiàng)，整個(gè)項(xiàng)目偶爾會(huì)有提示信息不同的情況

2. 代碼重構(gòu)，以AngularJS的方式編寫(xiě)擴(kuò)展

3. 添加一些 AngularJS沒(méi)有的驗(yàn)證類型 如 repeat ，uniquecheck 等

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。

最新評(píng)論