频道导航

AngularJS实现表单手动验证和表单自动验证

2019-01-03 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了AngularJS实现表单手动验证和表单自动验证，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

AngularJS的表单验证大致有两种，一种是手动验证，一种是自动验证。

一、手动验证

所谓手动验证是通过AngularJS表单的属性来验证。而成为AngularJS表单必须满足两个条件：

1、给form元素加上novalidate="novalidate"；

2、给form元素加上name="theForm"，如下：

<div class="form-group" ng-class="{
'has-error': !theForm.email.$valid && (!theForm.$pristine || theForm.$submitted),'has-success': theForm.email.$valid && (!theForm.$pristine || theForm.$submitted)
}">
<label for="email">Email
<input type="email" class="form-control" id="email" ng-model="formModel.email" required="required" name="email"/>
<p class="help-block" ng-show="theForm.email.$error.required && (!theForm.$pristine || theForm.$submitted)">必填

<p class="help-block" ng-show="theForm.email.$error.email && (!theForm.$pristine || theForm.$submitted)">email格式不正确

<div class="form-group">
<label for="username">Username
<input type="text" class="form-control" id="username" ng-model="formModel.username"/>

<div class="form-group">
<label for="sex">Sex
<select name="sex" id="sex" class="form-control" ng-model="formModel.sex">
<option value="">Please choose
<option value="male">Mail
<option value="femail">Femail

<div class="form-group">
<label for="password">Password
<input type="text" class="form-control" id="password" ng-model="formModel.password"/>

<div class="form-group">
<button class="btn btn-primary" type="submit">Register

    {{theForm | json}}

● 给form加上novalidate="novalidate"意味着表单将不再使用HTML5验证特性 ● 给form加上name="theForm"意味着表单的名称是theForm。如何使用theForm,比如我们验证表单是否被修改过theForm.$submitted ● 通过ng-submit提交表单 ● formModel是$scope中的一个属性 ● 对表单的Email进行了手动验证，使用了AngularJS表单的众多属性，比如theForm.email.$valid，theForm.$pristine，theForm.$submitted， theForm.email.$error.required，theForm.email.$error.email ● 通过

{{theForm | json}}

把AngularJS表单的所有属性都打印出来

以上，凡是有name属性的input都被显示在上面。在second.js文件中定义了module,controller以及提交表单的方法。

myApp1.controller('myCtrl1',function($scope,$http){
$scope.formModel = {};

$scope.onSubmit = function(){
$http.post('someurl',$scope.formModel)
.success(function(data){
console.log(':)');
})
.error(function(data){
console.log(':(');
});

console.log($scope.formModel);

};
});

以上的表单验证方式好处是可控性强，但相对繁琐。二、自动验证 AngularJS的另外一种表单验证方式是自动验证，即通过directive来实现，除了AngularJS自带的directive,还需要用到angular-auto-validate这个第三方module。有关angular-auto-validate： ● 安装：npm i angular-auto-validate ● 引用：
<script src="../bower_components/ladda/dist/ladda.min.js">
<script src="../bower_components/angular-ladda/dist/angular-ladda.min.js">

页面如下：

<div class="form-group">
<label for="email" class="control-label">Email
<input type="email" class="form-control" id="email" ng-model="formModel.email" required="required"/>

<div class="form-group">
<label for="username" class="control-label">Username
<input type="text"
class="form-control"
id="username"
ng-model="formModel.username"
required="required"
ng-pattern="/^[A-Za-z0-9_]{1,32}$/"
ng-minlength="7"
ng-pattern-err-type="badUsername"
/>

<div class="form-group">
<label for="sex" class="control-label">Sex
<select name="sex" id="sex" class="form-control" ng-model="formModel.sex" required="required">
<option value="">Please choose
<option value="male">Mail
<option value="femail">Femail

<div class="form-group">
<label for="password" class="control-label">Password
<input type="text" class="form-control" id="password" ng-model="formModel.password" required="required" ng-minlength="6"/>

<button class="btn btn-primary"
ladda = "submitting"
data-style="expand-right"
type="submit">
<span ng-show="submitting">正在注册...
<span ng-show="!submitting">注册

    {{formModel | json}}

以上，先看提交按钮：

● ladda属性值为bool值，true表示显示动态等待效果，false不显示动态等待效果，这里的submitting是scope中的一个属性 ● data-style="expand-right"表示在按钮的右侧显示动态等待效果

再拿表单中的Age字段来说：

其中,min,max为AgularJS的directive,而ng-min-err-type是angular-auto-validate的directive。这里遵循的惯例是ng-AngularJS表单验证的directive名称-err-type，而tooYoung和tooOld的作用是什么，又是在哪里用上了呢？是在module层面用上了，定义在了form_validation_auto.js文件中。

myApp1.run(function(defaultErrorMessageResolver){
defaultErrorMessageResolver.getErrorMessages().then(function(errorMessages){
errorMessages['tooYoung'] = '年龄必须小于{0}';
errorMessages['tooOld'] = '年龄不能大于{0}';
errorMessages['badUsername'] = '用户名只能包含数字、字母或下划线';
});
});

myApp1.controller('myCtrl1',$http){
$scope.formModel = {};
$scope.submitting = false;

$scope.onSubmit = function(){

$scope.submitting = true;
console.log('已提交');
console.log($scope.formModel);

$http.post('url',$scope.formModel)
  .success(function(data){
    console.log(':)');
    $scope.submitting = false;
  })
  .error(function(data){
    console.log(':(');
    $scope.submitting = false;
  });

};
});

以上，在run方法中使用angular-auto-validate的defaultErrorMessageResolver服务，对错误信息进行为了自定义。页面上的tooYoung和tooOld和这里的errorMessages['tooYoung']和errorMessages['badUsername']对应。

本文的全部内容就为大家介绍到这里，希望对大家学习AngularJS实现表单验证有所帮助。

表单验证