您的位置：首页 > Web前端 > AngularJS

AngularJS表单验证

2017-09-04 13:39 411 查看
AngularJS官网

AngularJS基础指令

ng-model指令

ng-model:绑定HTML控制器的值到应用数据

ng-model指令用于绑定应用程序数据到HTML控制器(input,select,textarea)的值

ng-model指定也可以将输入域的值与AngularJS创建的变量绑定

<input ng-model="name">
{{name}}


双向绑定:在修改输入域的值时,AngularJS属性的值也将修改

应用状态:ng-model指令可以为应用数据提供状态值(invalid,dirty,touched,error)

ng-invalid:未通过验证的表单

ng-valid:布尔型属性,它指示表单是否通过验证.如果表单当前通过验证,它将为true

ng-dirty:布尔值属性,表示用户是否修改了表单.如果为true,表示有修改过;false则表示没修改过

ng-touched:布尔值属性,表示用户是否和控件进行过交互

ng-pristine:布尔值属性,表示用户是否修改了表单.如果为true表示没有修改过;false表示修改过.

ng-minlength和ng-maxlength指令

<input type="text" ng-model="name" ng-minlength="3" ng-maxlength="10">
{{name}}


如果输入框的值非法,则{{name}}没有数据绑定,不会显示;

注:当
type="number"
时,输入框的值必须为数字,否则就是非法

ng-submit和ng-class指令

ng-submit:规定onsubmit事件发生时执行的表达式

ng-submit指令用于在表单提交后执行指定函数。

<form name="signUpForm" ng-submit="submitForm()"></form>


ng-class:指定HTML元素使用的CSS类

ng-class指令用于给HTML元素动态绑定一个或多个CSS类

ng-class 指令的值可以是字符串,对象,或一个数组。

如果是字符串，多个类名使用空格分隔。

如果是对象，需要使用 key-value 对，key 为你想要添加的类名，value 是一个布尔值。只有在 value 为 true 时类才会被添加。

如果是数组，可以由字符串或对象组合组成，数组的元素可以是字符串或对象。

<input name="username" ng-model="username" ng-class="{'error':signUpForm.username.$invalid}" class="form-control" required>


ng-if指令

ng-if:如果条件为false移除HTML元素

ng-if指令用于在表达式为false时移除HTML元素。

如果if语句执行的结果为true,会添加移除元素,并显示。

ng-if指令不同于ng-hide,ng-hide隐藏元素,而ng-if是从DOM中移除元素。

<div ng-if="signUpForm.username.$invalid && signUpForm.username.$touched">您的输入有误</div>


ng-disabled指令

ng-disabled:规定一个元素是否被禁用

ng-disabled指令设置表单输入字段的disabled属性(input,select,或textarea)。

如果ng-disabled中的表达式返回true则表单字段将被禁用。

<button type="submit" ng-disabled="signUpForm.$invalid">提交</button>


表单验证实例

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="lib/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="lib/font-awesome-4.7.0/css/font-awesome.css"/>
<link rel="stylesheet" href="css/css.css" />
</head>
<body ng-app="myApp" ng-controller="SignUpController">
<div class="wrapper">
<h2>注册</h2>
<form name="signUpForm" ng-submit="submitForm()" novalidate ng-cloak>
<div class="form-group" ng-class="{'has-success':signUpForm.username.$valid}">
<label>用户名:</label>
<pre>合法:{{signUpForm.username.$valid}}</pre><!--值为:true或者false-->
<pre>username:{{userdata.username}}</pre><!--输入值合法,才会传入-->
<input name="username"
type="text"
class="form-control"
required
ng-model="userdata.username"
ng-minlength="4"
ng-maxlength="32"
>
<div class="fa fa-check input_result success"
ng-if="signUpForm.username.$valid"></div>
<p class="error"
ng-if="signUpForm.username.$error.required &&
signUpForm.username.$touched">
用户名不可为空
</p>
<p class="error"
ng-if="(signUpForm.username.$error.minlength ||
signUpForm.username.$error.maxlength) &&
signUpForm.username.$touched">
用户名长度应在4至32位之间
</p>
</div>
<div class="form-group"  ng-class="{'has-success':signUpForm.password.$valid}">
<label>密码:</label>
<pre>合法:{{signUpForm.password.$valid}}</pre>
<pre>password:{{userdata.password}}</pre>
<input name="password"
type="password"
class="form-control"
required
ng-model="userdata.password"
ng-minlength="6"
ng-maxlength="16"
>
<div class="fa fa-check input_result success"
ng-if="signUpForm.password.$valid"></div>
<p class="error"
ng-if="signUpForm.password.$error.required &&
signUpForm.password.$touched">
密码不可为空
</p>
<p class="error"
ng-if="(signUpForm.password.$error.minlength ||
signUpForm.password.$error.maxlength) &&
signUpForm.password.$touched">
密码长度应在6至16位之间
</p>
</div>
<div class="form-group"  ng-class="{'has-success':signUpForm.password2.$valid}">
<label>确认密码:</label>
<pre>合法:{{signUpForm.password2.$valid}}</pre>
<pre>password:{{userdata.password2}}</pre>
<input name="password2"
type="password"
class="form-control"
required
ng-model="userdata.password2"
compare="userdata.password"
>
<div class="fa fa-check input_result success"
ng-if="signUpForm.password2.$valid"></div>
<p class="error"
ng-if="(signUpForm.password2.$error.compare &&
signUpForm.password2.$touched)">
两次密码输入不一致
</p>
</div>
<div class="form-group">
<button class="btn btn-primary">注册</button>
</div>
</form>
</div>
<script type="text/javascript" src="lib/angular.js" ></script>
<script type="text/javascript" src="js/js.js" ></script>
</body>
</html>


js.js

angular.module('myApp',[])
.controller('SignUpController',function($scope){
$scope.userdata={};
$scope.submitForm=function(){
console.log($scope.userdata);
if($scope.signUpForm.$invalid){
alert("请检查你的信息");
}else{
alert("提交成功!");
}
}
})
.directive('compare',function(){//定义指令compare 与页面compare属性一致
var o = {};
o.strict = 'AE';//定义匹配模式为属性与元素
o.scope = {
orgText:'=compare'//= 实现orgText 与前台compare属性值的绑定
}
o.require = 'ngModel';//将该控制器注入到‘ng-Model’指令中会在该元素上查找ng-Model
o.link = function(sco,ele,att,con){
con.$validators.compare = function(v){//为验证器添加compare方法（这个地方的compare与指令compare前台属性compare无关，仅是验证器的一个方法名，与前台$error.compare有关）
return v == sco.orgText;//比较该元素传入参数（该标签ng-model绑定值）与orgText的值（compare属性值）返回true或false
}
sco.$watch('orgText',function(){//监听（orgText值有变化就运行该方法）
con.$validate();//调用该标签的验证
})
}
return o;
})


css.css

.red{
background:#a30;
}
.error{
color: #a10;
}
input.error{
border:1px solid #a10;
}
.wrapper{
width:200px;
margin:30px auto;
}
.input_result{
position: relative;
top: -28px;
left: 205px;
}
p.success{
color: #3C763D;
}
pre{
display: none;
}


源码下载
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  angularjs 表单验证
相关文章推荐
新的分享
章节导航