AngularJS表单验证中级篇（3）

<form name="form" novalidate ng-app>
  <span>{{form.$invalid}}</span>
  <span>{{form.$valid}}</span>
  <span>{{form.$dirty}}</span>
  <span>{{form.$pristine}}</span>
  <input type="text" ng-model="user" required />
  <input type="text" ng-model="pwd" required minlength="4" ng-maxlength="5" />
  <input type="text" ng-model="phone" required ng-pattern="/1[3|5|7|8|][0-9]{9}/" />
  <input type="email" ng-model="email" required />
  <input type="url" ng-model="url" required />
  <input type="number" ng-model="number" required />
  <div>
    <button type="reset" ng-disabled="form.$pristine">重置</button>
    <button type="submit" ng-disabled="form.$invalid">提交</button>
  </div>
</form>

<form name="form" ng-app novalidate>
  <span>{{form.user.$error.required"text" ng-model="user" name="user" required />
  <span>{{form.pwd.$error.required"text" ng-model="pwd" name="pwd" required />
  <span>{{form.info.$error.required"text" ng-model="info" name="info" required />
  <span>{{form.age.$error.required"text" ng-model="age" name="age" required />
  <div>
    <button type="submit" ng-disabled="form.$invalid">提交</button>
  </div>
</form>

<form name="form" ng-app="myApp" novalidate>
  <input type="email" ng-model="user" name="username" required minlength="4" />
  <div ng-messages="form.username.$error" ng-messages-multiple>
    <div ng-message="required">该项必填</div>
    <div ng-message="minlength">低于最低长度</div>
    <div ng-message="email">应为email</div>
  </div>
</form>
<script src="/UploadFiles/2021-04-02/angular.min.js">

Nuget:Install-Package AngularJS.Messages
自定义验证
通过基本的验证方式,我们已经能够解决大部分的验证问题.但项目中永远充满着各种各样的需求.
在ng中的自定义验证,一般通过指令的形式创建.


<form name="form" ng-app="myApp" novalidate>
  <input type="email" ng-model="user" name="username" required ensure-unique minlength="4" />
  <div ng-messages="form.username.$error" ng-messages-multiple>
    <div ng-message="required">该项必填</div>
    <div ng-message="minlength">低于最低长度</div>
    <div ng-message="email">应为email</div>
    <div ng-message="unique">用户名已存在</div>
  </div>
</form>



在上面的messages插件Demo中,新建一行验证用户名已存在 以及 在input上添加了ensure-unique指令
同时,我们需要在js中定义ensure-unique指令:


angular.module('myApp', ['ngMessages']).directive('ensureUnique', ['$http', '$timeout', '$window', function ($http, $timeout, $window) {
      return {
        restrict: "A",
        require: 'ngModel',
        link: function (scope, ele, attrs, ngModelController) {
          scope.$watch(attrs.ngModel, function (n) {
            if (!n) return;
            $timeout.cancel($window.timer);
            $window.timer = $timeout(function () {
              $http({
                method: 'get',
                url: '/api/checkusername/', //根据换成自己的url
                params: {
                  "username": n
                }
              }).success(function (data) {
                ngModelController.$setValidity('unique', data.isUnique); //这个取决于你返回的，其实就是返回一个是否正确的字段，具体的这块可以自己修改根据自己的项目
              }).error(function (data) {
                ngModelController.$setValidity('unique', false);
              });
            }, 500);
          });
        }
      };
    }]);



指令不是本节重点内容,这里简单说下
ngModelController.$setValidity('unique', bool);
通过该API可以设置$error.unique.
setValidity为true,则$error.unique为false
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。