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

程序员文章站 2022-07-15 23:08:58

...

标签指令

对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>

运行结果如下：
AngularJs(七)--指令（三）--标签指令及表单验证

表单验证

相关验证值：
- $v a l i d 有效的。如果表单验证通过时，$ valid这个值就为true。
- $i n v a l i d 无效的。与$ valid意思相反，表单验证通过时，$invalid这个值为false。
- $p r i s t i n e 原始值。如果需要验证的值没有被修改，是原始值，$ pristine这个值为true；如果修改了，$pristine这个值为false。
- $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> 
               <div>{{myForm.myText.$invalid}}</div> 
               <div>{{myForm.myText.$pristine}}</div> 
               <div>{{myForm.myText.$dirty}}</div>  
               <div>{{myForm.myText.$error}}</div> 
           </form>
       </div>
    </body>
    </html>
</pre>
```
(1)当用户修改了输入框的值，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. $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. $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>

相关标签：表单验证 angularjs 标签指令

上一篇：【华软C语言实验报告】实验7_数组

下一篇： angularjs 表单验证

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

标签指令

1. a标签指令

2.select

textarea

input

form

表单验证

基于angularJS的表单验证指令介绍

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

基于angularJS的表单验证指令介绍

angularjs 表单密码验证自定义指令实现代码

基于angularJS的表单验证指令介绍

基于angularJS的表单验证指令介绍