w5cValidator【AngularJS】 2.0 版本發佈

w5cValidator 插件基於angular原有的表單驗證，在原有的基礎上擴展了一些錯誤提示的功能，讓你們不用在每一個表單上寫一些提示信息的模板，專心的去實現業務邏輯。

代碼地址：https://github.com/why520crazy/w5c-validator-angular

關於v1.x版本的介紹參見：http://www.ngnice.com/posts/69f774dc4d3190

v1.0版本雖然簡單的實現了想要的功能，可是沒有按照模塊獨立出來，並且有不少代碼不是很規範，此次正好抽時間重構了代碼，直接升級到了 v2.0.0版本，同時也完善了一些展現案例功能。

若是你已經足夠了解了angular或者以前使用過 w5cValidator，能夠直接看展現程序：

展現地址：http://why520crazy.github.io/w5c-validator-angular

使用步驟：

1. HTML 中引用 dest/w5cValidator.js；
2. 啓動module引用 "w5c.validator"，如:

   var app = angular.module("app", ["w5c.validator"]);

3. 在app.config事件中配置全局屬性和顯示規則：

   app.config(["w5cValidatorProvider", function (w5cValidatorProvider) {
   
        // 全局配置
        w5cValidatorProvider.config({
            blurTrig   : false,
            showError  : true,
            removeError: true
   
        });
        w5cValidatorProvider.setRules({
            email   : {
                required: "輸入的郵箱地址不能爲空",
                email   : "輸入郵箱地址格式不正確"
            },
            username: {
                required: "輸入的用戶名不能爲空",
                pattern : "用戶名必須輸入字母、數字、下劃線,以字母開頭"
            },
            password: {
                required : "密碼不能爲空",
                minlength: "密碼長度不能小於{minlength}",
                maxlength: "密碼長度不能大於{maxlength}"
            },
            number  : {
                required: "數字不能爲空"
            }
        });
    }]);
   

   　　

4. 在HTML模板中form上使用指令 w5c-form-validate 和 w5c-submit
   w5c-form-validate指令表示該表單採用 w5cValidator的驗證規則；
   w5c-submit 表示驗證成功後調用的事件，固然w5c-submit能夠不填寫；

   <form class="form-horizontal w5c-form demo-form" role="form" w5c-submit="vm.saveEntity()"
      w5c-form-validate="vm.validateOptions" novalidate name="validateForm">
    <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="username" placeholder="輸入用戶名">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">密碼</label>
   
        <div class="col-sm-10">
            <input type="password" required="" ng-model="entity.password" name="password"
                   class="form-control" ng-minlength="5" ng-maxlength="15"
                   placeholder="輸入密碼">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">數字</label>
   
        <div class="col-sm-10">
            <input type="number" required="" ng-model="entity.number" name="number" class="form-control"
                   placeholder="輸入數字">
        </div>
    </div>
    <div class="form-group" ng-show="validateForm.$errors.length > 0 && vm.showErrorType == 2">
        <label class="col-sm-2 control-label"></label>
   
        <div class="col-sm-10">
            <div class="alert alert-danger"></div>
        </div>
    </div>
   
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-success"> 驗證</button>
        </div>
    </div>
   </form>

    

注意事項：

1. 因爲驗證使用的是 angular的form驗證，因此必需要保證form和驗證的元素都要有name屬性；
2. w5cValidatorProvider.setRules方法設置的rules名稱是和表單驗證元素的name相對應的；
3. 若是你不想把驗證成功事件w5c-submit寫在 form上，能夠直接在form裏面的其餘元素上使用w5cFormSubmit指令，如：

   <button type="buttom" w5c-form-submit="vm.saveEntity()" class="btn btn-success"> 驗證</button>

4. 若是你clone了代碼。本地直接打開example/index.html是不能夠運行，由於我使用了 $http服務去獲取 js css html，因此必需要在本地搭建服務端程序，若是你有nodejs環境，運行npm install 安裝module後再運行 grunt server ,若是沒有grunt，用命令npm install grunt-cli -g安裝, mac下須要 sudo npm install grunt-cli -g

參數

名稱	默認值	做用
blurTrig	false	光標移除元素後是否驗證並顯示錯誤提示信息
showError	true	能夠是bool和function，每一個元素驗證不經過後調用該方法顯示錯誤信息，默認true，顯示錯誤信息在元素的後面。
removeError	true	能夠是bool和function，每一個元素驗證經過後調用該方法移除錯誤信息，默認true，驗證經過後在元素的後面移除錯誤信息。