AngularJS表单验证

最新推荐文章于 2020-12-23 03:03:18 发布

面条请不要欺负汉堡

最新推荐文章于 2020-12-23 03:03:18 发布

阅读量435

点赞数

分类专栏： AngularJs 文章标签： AngularJS表单验证

本文链接：https://blog.csdn.net/gao_xu_520/article/details/78221985

版权

AngularJs 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

AngularJS提供丰富填写表单和验证。我们可以用ng-click来处理AngularJS点击按钮事件，然后使用 $dirty 和 $invalid标志做验证的方式。使用novalidate表单声明禁止任何浏览器特定的验证。表单控件使用了大量的角活动。让我们快速浏览一下有关事件先。

一.事件

1.ng-click鼠标单击事件

2.ng-dblclick鼠标双击

3.ng-mousedown

4.ng-mouseup
5.ng-mouseenter
6.ng-mouseleave
7.ng-mousemove
8.ng-mouseover
9.ng-keydown
10.ng-keyup

11.ng-keypress
12.ng-change

13.ng-checked

事件查看

二.表单验证

(1).常用的表单验证指令

1. 必填项验证
某个表单输入是否已填写，只要在输入字段元素上添加HTML5标记required即可：
<input type="text" required />

2. 最小长度/最大长度
验证表单输入的文本长度是否大于某个最小值/小于最大值，在输入字段上使用指令ng-minleng= "{number}"：
<input type="text" ng-minlength="5" ng-maxlength="10" ng-model="name" />
<div>最小值：{{name}}</div>

注意：只有输入name值满足5<=输入的文本长度<=10.这个区间，才是正确的，否则不会显示<div>最小值：{{name}}</div>

3. 模式匹配
使用ng-pattern="/PATTERN/"来确保输入能够匹配指定的正则表达式：
<input type="text" ng-pattern="/[a-zA-Z]/" />

4. 电子邮件
验证输入内容是否是电子邮件，只要像下面这样将input的类型设置为email即可：
<input type="email" name="email" ng-model="user.email" />

5. 数字
验证输入内容是否是数字，将input的类型设置为number：
<input type="number" name="age" ng-model="user.age" />

6. URL
验证输入内容是否是URL，将input的类型设置为 url：
<input type="url" name="homepage" ng-model="user.facebook_url" />

(2).表单的验证状态

①$pristine(表单没有填写记录)。

②$dirty - 规定值已被改变(表单有填写记录)。

③$valid(通过验证)。

④$invalid- 该值的状态是无效的(未通过验证)

⑤$error- 指出确切的错误(验证错误信息)
⑥$touched---触摸过的状态
除$error，$touched外，前四个的值为true或false表示相应的状态。$error的值为一个js对象

注意：1.表单元素必须有ng-model，否则无法触发验证(它通过 ng-model 指令来绑定到你的应用。firstname 属性可以在 controller 中使用)

<input type="text" ng-model="firstname">
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.firstname = "John";
});

2.结合ng-class和ng-if指令，非常好用

①ng-class

<divng-class="{'has-error':myForm.username.$error}" > 当信息是错误时，这在这个div上加has-error 类

当鼠标触摸过这个input时，出现错误时，这在这个div上加has-error 类

②ng-if

<div class="row">
<label>用户名：</label>
<input type="text" name="username" ng-model="userdata.username" required/>
<span class="error" ng-if="myForm.username.$error.required && myForm.username.$touched">用户名不能为空！</span>
</div>

如果触摸过这个input，出现错误（required 为空），这现在这个标签<span class="error"></span>

③ng-disabled

如果表单的信息填写出现错误，则这个提交按钮不能点击。

下面来看简单列子1：ng-submit与ng-classd的结合

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>AngularJS入门学习</title> 
    <style type="text/css">
    .error{border:1px solid #f00;}
    </style>
    
</head>
<body>
<form ng-app="myApp" ng-controller="validateCtrl" name="myForm"  ng-submit="submitForm()">
	<div class="row">
		<label>用户名：</label>
		<input ng-class="{'error':myForm.username.$invalid && myForm.username.$touched}"
	name="username"  type="text"  
	ng-minlength="5"  
	ng-model="name" required/>
	<span ng-if="myForm.username.$invalid && myForm.username.$touched">您输入格式有错！</span>
	<span ng-if="myForm.username.$valid">太棒了，正确！</span>
	</div>
<!-- 	<button class="" ng-disabled="myForm.$invalid">提交</button> -->
</form>
<script type="text/javascript"  src="js/angular.min.js"></script>
<script type="text/javascript">
	var myApp = angular.module('myApp', []);
	myApp.controller('validateCtrl', ['$scope', function($scope) {
		$scope.submitForm=function(){
			console.log('表单提交！')
		}
	}]);
</script>  
</body>  
</html>

当输入4个字就报错了。

当输入5个字时就正确，同时回车，就可以看到打印出来“表单提交！”

注册表单验证

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>AngularJS入门学习</title> 
    <style type="text/css">
    .error{color:#f00;}
    .row{margin-bottom: 20px;font-size: 18px;}
    .sub_btn{
        background: #009688;
        border-radius: 5px;
        color: #fff;
        font-size: 18px;
        border: none;
        padding: 8px 21px;
        cursor: pointer;
    }
    #sub_state{
        background: #ccc;
        color: #fff;
        padding: 8px;
        margin: 25px 0;
    }
    .has-error input{
        border:1px solid #f00;
    }
    </style>
    
</head>
<body>
<div ng-app="myApp" ng-controller="validateCtrl">
<h1>表单验证</h1>
<form  name="myForm" ng-submit="submitForm()">
<div class="row" 
    ng-class="{'has-error':myForm.username.$invalid && myForm.username.$touched}">
    <label>用户名：</label>
    <input type="text" name="username"  ng-model="userdata.username" required/>
    <span class="error" 
        ng-if="myForm.username.$error.required  && myForm.username.$touched">用户名不能为空！</span>
</div>
<div class="row" 
    ng-class="{'has-error':myForm.nickname.$invalid && myForm.nickname.$touched}">
    <label>昵称：</label>
    <input type="text" name="nickname" ng-minlength="3" ng-maxlength="32" ng-model="userdata.nickname" required/>
    <span class="error" 
    ng-if="myForm.nickname.$error.minlength || myForm.nickname.$error.maxlength && myForm.username.$touched">昵称长度应在3至32位之间</span>
</div>
<div class="row" 
    ng-class="{'has-error':myForm.password.$invalid && myForm.password.$touched}">
    <label>密码：</label>
    <input type="password" name="password" ng-minlength="6" ng-maxlength="32" ng-model="userdata.password" required/>
    <span class="error" 
    ng-if=" myForm.password.$error.required && myForm.password.$touched">密码不能为空！</span>
    <span class="error" 
    ng-if=" myForm.password.$error.minlength || myForm.password.$error.maxlength && myForm.password.$touched">密码长度应在6至32位之间！</span>
</div>
<div class="row" 
    ng-class="{'has-error':myForm.password2.$invalid && myForm.password2.$touched}">
    <label>确认密码：</label>
    <input  type="password" name="password2" 
    compare="userdata.password"
    ng-model="userdata.password2" required/>
    <span class="error" 
    ng-if="myForm.password2.$error.compare && myForm.password2.$touched">俩次输入密码不一致！</span>
</div>
<button class="sub_btn">提交</button>
<div id="sub_state"></div>
</form> 
</div>
<script type="text/javascript"  src="js/angular.min.js"></script>
<script type="text/javascript">
    var myApp = angular.module('myApp', []);
    myApp.controller('validateCtrl', ['$scope', function($scope) {
        $scope.userdata={};//创建一个空的数组对象
        $scope.submitForm=function(){
            var sub_state= document.getElementById('sub_state');
            console.log($scope.userdata)
            if($scope.submitForm.$invalid){
                sub_state.innerHTML="系统提示：您输入信息有误，请检查下！";
            }else{
                sub_state.innerHTML="系统提示：提交成功！";
            }
        }
        
        

    }]);
    //自定义指令(创建新旧密码是否一致的指令)
    myApp.directive('compare',function(){
        var o={};
        o.strict='AE';
        o.scope={
            orgText:"=compare"
        }
        o.require='ngModel';
        o.link=function(sco,ele,attr,con){
            con.$validators.compare=function(v){
                return v==sco.orgText;
            }
            sco.$watch('orgText',function(){
                con.$validate();
            })
        }
        return o;
    });
</script>  
</body>  
</html>

面条请不要欺负汉堡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS表单验证

AngularJS提供丰富填写表单和验证。我们可以用ng-click来处理AngularJS点击按钮事件，然后使用 $dirty 和 $invalid标志做验证的方式。使用novalidate表单声明禁止任何浏览器特定的验证。表单控件使用了大量的角活动。让我们快速浏览一下有关事件先。一.事件1.ng-click鼠标单击事件2.ng-dblclick鼠标双击3.ng-mousedow
复制链接

扫一扫