AngularJS表单验证

最新推荐文章于 2019-02-25 14:33:00 发布

原创最新推荐文章于 2019-02-25 14:33:00 发布 · 449 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs #表单验证

AngularJS 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍AngularJS中表单验证的实现方法，包括如何使用ng-model指令进行数据绑定，如何利用ng-minlength/ng-maxlength/ng-required等指令完成基本验证，并结合ng-if/ng-class等指令动态展示验证结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
}

源码下载