angular编写表单验证

时间:2021-12-22 14:35:14

angular编写表单验证#

一、整体概述

表单内容如下图,包括常用的用户名、密码、确认密码、手机、邮箱等

angular编写表单验证

  1. 整体js代码很少,就一个指令用于写确认密码和密码是否相等。其他 验证都是使用angular自带的指令进行校验和显示。
  2. 本demo还使用了bootstrap的栅栏功能进行布局,因为想写的是demo所以很多样式以及其他限制就不写了,我认为越是简单越好让别人改写使用

二、重点说明

1、表单属性:

$dirty:已经修改过

$invalid:不合法

$valid:合法

$error:错误

$pristine:未修改过

novalidate 阻止表单默认操作



<span class="col-4" ng-show="myForm.password.$dirty && myForm.password.$invalid">
<small class="text-danger" ng-show="myForm.password.$error.required">
密码是必填的
</small>
<small class="text-danger" ng-show="myForm.password.$error.minlength">
长度不能小于8位
</small>
<small class="text-danger" ng-show="myForm.password.$error.maxlength">
长度不能大于64位
</small>
</span>




**2、相关指令:**

ng-minlength:最小长度

ng-maxlength:最大长度

required:必填

ng-pattern:正则表达式验证

ng-disabled:按钮禁用



<input type="text" class="col-6" name="phone" ng-model="phone" ng-pattern="/(^0\d{2,3}\-\d{7,8}$)|(^1[3|4|5|6|7|8][0-9]{9}$)/" required/>




<button ng-disabled="myForm.$invalid" ng-click="submit()">submit</button>




**3、form表单一定要有name属性,每个input值也需要有name属性,比如已经输入过的表单表示是:myForm.name.$dirty 即 表单name.输入name.表单属性**

4、确认密码自定义指令

确认密码这个暂时无法通过原有的指令实现,所以使用了directive,主要是通过观察两个输入框的值,如果不相等则在确认密码栏后显示错误信息,如下



var app = angular.module('app',[]);
app.directive('compare',function(){
return {
require: 'ngModel',
link: function(scope,ele,attrs,ctrl){
var flag = false;
scope.$watch("password",function(scope,ele,attrs,ctrl){
var password2 = attrs.myForm.password2.$viewValue;
if(scope != password2) {
flag = true;
}else{
flag = false;
}
attrs.myForm.password2.$invalid = flag;
})
scope.$watch("password2",function(scope,ele,attrs,ctrl){
var password = attrs.myForm.password.$viewValue;
if(scope != password) {
flag = true;
}else{
flag = false;
}
attrs.myForm.password2.$invalid = flag;
})
}
}
})


源代码见github:`https://github.com/liaoanran/angular-formValidation`