AngularJS表单验证

来源：互联网发布：java身份证号判断性别编辑：程序博客网时间：2024/06/02 05:11

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

源码下载

阅读全文

0 0