标签指令
对html原有的标签进行构建而产生新的功能的一种标签。
标签指令多用于在表单验证中。
1. a标签指令
会阻止a标签的默认行为–>刷新页面。
<pre>
<div ng-controller="Aaa">
<!--写在ng-controller作用域范围内的a标签,就是a标签指令-->
<a href="">aaa</a>
</div>
<a href="">aaa</a>
</pre>
2.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
若 type= ” radio “,
在ng中使用radio实现二选一的时候,需要注意几个地方:
- 第一:保持name的属性值要是一致的;
- 第二:保持ng-model对应同一个值;
- 第三:需要为每个radio设置ng-value,因为ng-model的对应的值就是选中的那个radio所对应的ng-value的值。
<pre>
<div class="col-xs-3">
<input type="radio" ng-value=1 ng-model="sss" name="aaa">男
</label>
<label>
<input type="radio" ng-value=0 ng-model="sss" name="aaa">女
</label>
</div>
<div>
{{sss}}
</div>
</pre>
form
novalidate:阻止表单的一些默认的行为。
<pre>
<div ng-controller="Aaa">
<form novalidate>
<!--html5中的email类型会给出邮箱格式提示,
若想不要这个表单默认行为,可在form标签上加上novalidate属性-->
<input type="email">
</form>
</div>
</pre>
运行结果如下:
表单验证
相关验证值:
- valid有效的。如果表单验证通过时, v a l i d 有 效 的 。 如 果 表 单 验 证 通 过 时 , valid这个值就为true。
- invalid无效的。与 i n v a l i d 无 效 的 。 与 valid意思相反,表单验证通过时,$invalid这个值为false。
- pristine原始值。如果需要验证的值没有被修改,是原始值, p r i s t i n e 原 始 值 。 如 果 需 要 验 证 的 值 没 有 被 修 改 , 是 原 始 值 , pristine这个值为true;如果修改了,$pristine这个值为false。
- dirty脏值。与 d i r t y 脏 值 。 与 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. p r i s t i n e 的 值 为 f a l s e , m y F o r m . m y T e x t . dirty的值为true。
(2)如果把输入框的type改成“email”,myForm.myText. valid的值为false,myForm.myText. v a l i d 的 值 为 f a l s e , m y F o r m . m y T e x t . 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. e r r o r 的 值 变 成 : “ r e q u i r e d ” : f a l s e , 代 表 不 为 空 , r e q u i r e d 验 证 通 过 ; m y F o r m . m y T e x t . 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>