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

AngularJs(七)--指令（三）--标签指令及表单验证

2017-12-21 18:01 477 查看

标签指令

对html原有的标签进行构建而产生新的功能的一种标签。

标签指令多用于在表单验证中。

- a标签指令

会阻止a标签的默认行为–>刷新页面。

<pre>
<div ng-controller="Aaa">
<!--写在ng-controller作用域范围内的a标签，就是a标签指令-->
<a href="">aaa</a>
</div>
<a href="">aaa</a>
</pre>

select

ng-options是用来配合select标签指令来生成select的下拉子项。

<pre>
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>Title</title>

<script src="js/angular.min.js"></script>
<script type="text/javascript">
var app=angular.module("app",[]);

app.controller("Aaa",["$scope",function($scope){
$scope.colors=[
{name:'red'},
{name:'yellow'},
{name:'blue'}
];
}]);

</script>
</head>
<body>
<div ng-controller="Aaa">
<!-- ng-options必须和ng-model一起用，否则没效果；对select下拉框的子项的选择，即是对ng-model绑定的值的改变-->
<select ng-options="color.name for color in colors" ng-model="myColor">

</select>
<a href="">{{myColor.name}}</a>
</div>
</body>
</html>
</pre>

textarea

input

from

novalidate：阻止表单的一些默认的行为。

<pre>
<div ng-controller="Aaa">
<form novalidate>
<!--html5中的email类型会给出邮箱格式提示，
若想不要这个表单默认行为，可在form标签上加上novalidate属性-->
<input type="email">
</form>
</div>
</pre>

表单验证

相关验证值：

valid有效的。如果表单验证通过时，valid这个值就为true。

invalid无效的。与valid意思相反，表单验证通过时，$invalid这个值为false。

pristine原始值。如果需要验证的值没有被修改，是原始值，pristine这个值为true；如果修改了，$pristine这个值为false。

dirty脏值。与pristine的意思相反。

$error

表单验证失败时产生的验证信息都在#error里面。

注意：表单验证中的查找是通过name的方式进行查找。

<pre>
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>Title</title>

<script src="js/angular.min.js"></script>
<script type="text/javascript">
var app=angular.module("app",[]);

app.controller("Aaa",["$scope",function($scope){
$scope.t1="hello";
}]);
</script>
</head>
<body>
<div ng-controller="Aaa">
<form novalidate name="myForm">
<input type="text" name="myText" ng-model="t1">
<div>{{myForm.myText.$valid}}</div> <!--輸出true-->
<div>{{myForm.myText.$invalid}}</div> <!--輸出false-->
<div>{{myForm.myText.$pristine}}</div> <!--輸出true-->
<div>{{myForm.myText.$dirty}}</div>  <!--輸出false-->
<div>{{myForm.myText.$error}}</div> <!--輸出{}-->
</form>
</div>
</body>
</html>
</pre>

(1)当用户修改了输入框的值，myForm.myText.pristine的值为false，myForm.myText.dirty的值为true。

(2)如果把输入框的type改成“email”,myForm.myText.valid的值为false,myForm.myText.invalid的值为true，表单验证没通过；

因为t1=”hello”不符合邮箱格式规则。此时的myForm.myText.$error的值变成：{“email”:true}，代表email验证未通过。

另外，type为number及url时，angularJs也能进行验证。

内置的验证属性

还有一些属性能够提供常规的验证。

required - 用来判断是否为空。

<pre>
<form novalidate name="myForm">
<input type="text"  name="myText" ng-model="t1" required>
</form>
</pre>

此时的myForm.myText.error的值变成：“required”:false，代表不为空，required验证通过；myForm.myText.valid的值为true。

ng-minlength

<input type="text"  name="myText" ng-model="t1" required ng-minlength="5">

运行结果如下图：

如果t1=”hell”, 此时的myForm.myText.$error的值变成：{“required”:false,”minlength”:true}。

ng-maxlength

ng-pattern

通过正则的方式来设置验证。

<input type="text"  name="myText" ng-model="t1" required ng-minlength="5" ng-pattern="/^[a-zA-Z]+$/">

这里同时写多个验证方式，是有验证优先级的，先写的先验证。

内置的class验证样式

.ng-valid{} –验证通过样式

.ng-invalid{}–验证未通过样式

.ng-pristine{}–是否为初始值样式

.ng-dirty{}–是否被修改样式

<pre>
<style>
input.ng-valid{
border: 1px solid green;
}
input.ng-invalid{
border: 1px solid red;
}
</style>
</pre>

4.综合实例

对于表单控件不要循环写，因为每个表单控件都是有差异的。

<pre>
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>Title</title>

<script src="js/angular.min.js"></script>
<script type="text/javascript">
var app=angular.module("app",[]);

app.controller("Aaa",["$scope",function($scope){
$scope.regText={
regVal:"default",
regList:[
{ name:"default",tip:"请输入用户名"},
{ name:"required",tip:"用户名不能为空"},
{ name:"pattern",tip:"用户名必须为字母类型"},
{ name:"pass",tip:"√"}
]
};
$scope.regPassword={
regVal:"default",
regList:[
{ name:"default",tip:"请输入密码"},
{ name:"required",tip:"密码不能为空"},
{ name:"minlength",tip:"密码至少六位"},
{ name:"pass",tip:"√"}
]
};
$scope.change=function(reg,err) {
//用户名中输入正确的值，浏览器会打印: Object{ required : false, pattern : false }
console.log(err);

for (var attr in err) {
if (err[attr]) {
$scope[reg].regVal = attr;
return;
}
}
$scope[reg].regVal = "pass";
}
}]);
</script>
</head>
<body>
<div ng-controller="Aaa">
<form novalidate name="myForm">
<div>
<label>用户名：</label>
<input type="text" name="userName" ng-model="regText.username"
required ng-pattern="/^[a-zA-Z]+$/"
ng-blur="change('regText',myForm.userName.$error)">
<span ng-repeat="re in regText.regList | filter: regText.regVal">{{re.tip}}</span>
</div>
<div>
<label>密码：</label>
<input type="password" name="userPassword" ng-model="regPassword.userpassword"
required ng-minlength="6"
ng-blur="change('regPassword',myForm.userPassword.$error)">
<span ng-repeat="re in regPassword.regList | filter: regPassword.regVal">{{re.tip}}</span>
</div>
</form>
</div>
</body>
</html>
</pre>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航