在ionic/cordova中使用Form模型验证（w5cValidator）

在构建ionic项目过程中，当我们创建一个类似表单提交的页面时，可能会对用户的输入内容做某些规则验证，通过后再执行提交处理。

在验证的过程中，为了提供较好的用户体验，可能希望有类似于jquery Validate之类的插件来实现优美的验证以及提示。

w5cValidator基于angular原有的表单验证，在原有的基础上扩展了一些错误提示的功能，让大家不用在每个表单上写一些提示信息的模板，专心的去实现业务逻辑。

怎样在ionic项目中使用它，下面来看看：

Stpe1:创建一个项目（此处使用的是tab类型的项目，创建方式可参照我前一篇如何离线创建Ionic1项目）

Stpe2:修改项目信息

打开[config.xml]修改id，name，如下图内容：

Stpe3:引入w5cValidator

下载w5cValidator相关文件，包含w5cValidator.js与w5cValidator.css；这里没有使用w5cValidator原生的样式，因为原声样式是适用于网页版bootstrap的，所以我提供了我修改的样式，以适用于ionicUI。

文件下载地址：http://pan.baidu.com/s/1slgu7fB

下载后将以下两个文件拷贝到指定目录

将w5cValidator.css，拷贝到www\css目录

将w5cValidator.js拷贝到www\s目录

打开项目www\index.html,引入w5cvalidator的引用

<link href="css/w5cValidator.css" rel="stylesheet">
<script src="js/w5cValidator.js"></script>

 

打开www\js\app.js,将'w5c.validator'加到module引用中。

在app.config事件中添加配置全局属性和显示规则，将一下代码拷贝粘贴到app.js文件中，位置如图：

代码如下：

.config(["w5cValidatorProvider", function (w5cValidatorProvider) {

  // 全局配置
  w5cValidatorProvider.config({
    blurTrig   : true,  //光标移除元素后是否验证并显示错误提示信息
    showError  : showError,  //可以是bool和function，这里使用我们自定义的错误显示方式。
    removeError: removeError   //可以是bool和function，这里使用我们自定义的错误移除方式。
  });

  w5cValidatorProvider.setRules({
    email         : {
      required: "输入的邮箱地址不能为空",
      email   : "输入邮箱地址格式不正确"
    },
    username      : {
      required      : "输入的用户名不能为空",
      pattern       : "用户名必须输入字母、数字、下划线,以字母开头",
      w5cuniquecheck: "输入用户名已经存在，请重新输入"
    },
    password      : {
      required : "密码不能为空",
      minlength: "密码长度不能小于{minlength}",
      maxlength: "密码长度不能大于{maxlength}"
    },
    repeatPassword: {
      required: "重复密码不能为空",
      repeat  : "两次密码输入不一致"
    },
    number        : {
      required: "数字不能为空"
    },
    customizer    : {
      customizer: "自定义验证数字必须大于上面的数字"
    },
    dynamicName:{
      required: "动态Name不能为空"
    },
    dynamic       : {
      required: "动态元素不能为空"
    }
  });
}])

添加自定义验证显示方式代码：

位置如图：

代码如下：

var showError = function(elem, errorMessages){var $elem = angular.element(elem),
    $group = getParentGroup($elem);

  if (!isEmpty($group)){
    if ($group.hasClass("valid-lr")){
      $group.removeClass("valid-lr");
    }

    if (!$group.hasClass("has-error-lr")){
      $group.addClass("has-error-lr");
    }
  }

  var $next = $group.next();
  if (!$next || !$next.hasClass("form-errors")) {
    $group.after('<div class="form-errors"><div class="form-error">' + errorMessages[0] + '</div></div>');
  }
};

var removeError = function (elem){
  var $elem = angular.element(elem),
    $group = getParentGroup($elem);

  if (!isEmpty($group)){
    if ($group.hasClass("has-error-lr")){
      $group.removeClass("has-error-lr");
    }
  }

  var $next = $group.next();
  if (!$next || $next.hasClass("form-errors")) {
    $next.remove();
  }
};

var getParentGroup = function (elem) {
  if (elem[0].tagName === "FORM" || elem[0].nodeType == 11) {
    return null;
  }
  if (elem && elem.hasClass("item-input")) {
    return elem;
  } else {
    return getParentGroup(elem.parent())
  }
};

var isEmpty = function (object) {
  if (!object) {
    return true;
  }
  if (object instanceof Array && object.length === 0) {
    return true;
  }
  return false;
};

Stpe4:使用

 打开www/js/controllers.js，修改'DashCtrl'为如下代码：

.controller('DashCtrl', function($scope) {
  $scope.saveEntity = function ($event) {
    //do somethings for bz
    alert("Save Successfully!!!");
  };
})

打开www/templates/tab-dash.html为如下代码：

<ion-view view-title="w5cValidator Form验证测试">
  <ion-content class="padding">
    <form role="form" w5c-form-validate="vm.validateOptions" novalidate name="validateForm">
      <ion-list class="list-inset">
        <label class="item item-input">
          <i class="icon ion-android-person placeholder-icon"></i>
          <input type="text"
                 name="name"
                 required=""
                 ng-pattern="/^[A-Za-z]{1}[0-9A-Za-z_]{1,19}$/"
                 ng-model="data.username"
                 placeholder="请输入用户名">
        </label>
        <label class="item item-input">
          <i class="icon ion-android-mail placeholder-icon"></i>
          <input type="email"
                 name="email"
                 required=""
                 ng-model="data.email"
                 placeholder="请输入邮箱">
        </label>
        <label class="item item-input">
          <i class="icon ion-android-lock placeholder-icon"></i>
          <input type="password"
                 name="password"
                 required=""
                 ng-model="data.password"
                 placeholder="请输入密码">
        </label>
        <label class="item item-input">
          <i class="icon ion-android-lock placeholder-icon"></i>
          <input type="password"
                 name="repeatPassword"
                 w5c-repeat="password"
                 required=""
                 ng-model="data.repeatPassword"
                 placeholder="请重复输入密码">
        </label>
        <button type="submit" class="button button-full icon-right ion-chevron-right button-calm" w5c-form-submit="saveEntity($event)" >提交</button>
      </ion-list>
    </form>
  </ion-content>
</ion-view>

浏览器调试，结果如下：

 其他：

感谢why520crazy

其他关于w5cValidator资料，请参考：http://www.ngnice.com/posts/236860ed32d3e8

w5cValidator更多Sample，请参考：http://blog.ngnice.com/angular-w5c-validator/example/index.html