频道导航

AngularJS自动表单验证

2019-01-04 JavaScript 前端之家

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

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文件中。

<div class="jb51code">
<pre class="brush:js;">
var myApp1 = angular.module('myApp1',['jcs-autoValidate','localize','angular-ladda']);

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

myApp1.controller('myCtrl1',function($scope,$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;
});
};
});

以上就是本文的全部内容，希望对AngularJS手动表单验证能够熟练操作。

AngularJS自动表单验证