AngularJS实现表单验证

虽然我不是前端程序员,但明白前端做好验证是多么重要。

因为这样后端就可以多喘口气了,而且相比后端什么的果然还是前端可以提高用户的幸福感。

AngularJS提供了很方便的表单验证功能,在此记录一番。

首先从下面这段代码开始

代码如下:

<form ng-app="myApp" ng-controller="validationController" name="mainForm" novalidate>
    <p>Email:
        <input type="email" name="email" ng-model="email" required>
        <span style="color:red" ng-show="mainForm.email.$dirty && mainForm.email.$invalid">
            <span ng-show="mainForm.email.$error.required">Email is required.</span>
            <span ng-show="mainForm.email.$error.email">Invalid email address.</span>
        </span>
    </p>
    <p>
        <input type="submit" ng-disabled="mainForm.$invalid">
    </p>
</form>
<script>
angular.module('myApp',[])
.controller('validationController', ['$scope',function($scope) {
    $scope.user = 'Kavlez';
    $scope.email = 'sweet_dreams@aliyun.com';
}]);
</script>

input标签的一些验证选项,通常和HTML5标记搭配使用。

必填

<input type="text" required />
长度

使用指令ng-minlength/ng-maxlength

<input type="text" ng-minlength="5" />
特定格式
例如电子邮件、URL、数字,将type设置为相应类型即可,例如:

代码如下:

<input type="email" name="email" ng-model="user.email" />
<input type="number" name="age" ng-model="user.age" />
<input type="url" name="homepage" ng-model="user.facebook_url" />

模式匹配

使用指令ng-pattern,例如:

代码如下:

<input type="text" ng-pattern="[a-z]" />

表单属性,通过这些属性可以更容易地对表单进行操作

pristine/dirty
表示是否已修改,例如

代码如下:

<form name="mainForm" ng-controller="orderController">
<input type="email" name="userEmail" ng-model="myEmail" />
    {{mainForm.userEmail.$pristine}}
    {{mainForm.userEmail.$dirty}}
</form>

以formName.fieldName.$pristine方式访问,input必须有ng-model声明。

代码如下:

valid/invalid

表示是否通过验证。

代码如下:

$error

表单验证信息,验证不通过时返回相应信息。

AngularJS为表单状态提供了相应地css class

代码如下:

.ng-pristine
.ng-dirty
.ng-valid
.ng-invalid

例如,让验证通过为绿色,失败为红色:

代码如下:

input.ng-valid {
    color: green;
}
input.ng-invalid {
    color: green;
}

给出的例子中仅仅是一个email的验证就写了这么多,如果再加几个field,再加几种不同的提示,再加上几个事件,代码会变得杂乱不堪。

事实上并不推荐这样做,我们有更好的方法。
就是使用angular-messages.js

首先,不要忘了这两步

代码如下:

<script src="angular-messages.js"></script>
angular.module('myApp', ['ngMessages'])

好,先用ng-messages和ng-message替换掉那些重复的东西,上面的例子变成:

代码如下:

<form ng-controller="validationController" name="mainForm" >
    <p>Email:
        <input
        type="email" name="email" ng-model="myEmail" ng-minlength="3" ng-maxlength="50" required />
        <div style="color:red" ng-messages="mainForm.email.$error" ng-messages-multiple>
            <p class="error" ng-message="required">Email is required.</p>
            <p class="error" ng-message="email">Invalid email address.</p>
            <p class="error" ng-message="minlength">min length 10</p>
            <p class="error" ng-message="maxlength">max length 50</p>
        </div>
    </p>
    <p>
        <input type="submit" ng-disabled="mainForm.$invalid" />
    </p>
</form>

功能上没有任何变化,只是把重复的代码全部去掉了。
注意区分ng-messasges和ng-message,有没有感觉有点像with()? 后面的ng-messages-multiple,这里用作同时让多个提示出现。

但这样仍然不够好,就算省去了ng-message中的内容,但是多个field中都存在required验证时仍然会有重复。
而且,如果不同页面中的表单都涉及到相同的内容时重复的验证提示会越来越多。
为了解决这个问题,我们可以使用ng-messages-include指令。
该指令用来引用模板,比如上面的例子变为:

代码如下:

<form ng-controller="validationController" name="mainForm" >
    <p>Email:
        <input
        type="email" name="email" ng-model="myEmail" ng-minlength="3" ng-maxlength="50" required />
        <div style="color:red" ng-messages="mainForm.email.$error" ng-messages-multiple ng-messages-include="validateTemplate/email.html">
        </div>
    </p>
    <p>
        <input type="submit" ng-disabled="mainForm.$invalid" />
    </p>
</form>

并不复杂,我们再加点东西。
为了让提示更友好(?)一些,我们试试实现光标离开后出现提示的效果。
这时候用指令(directive)会方便很多,在这里先涉及一点和指令相关的内容。

先运行起来再说:

代码如下:

var myApp = angular.module('myApp',[])
    .controller('validationController', ['$scope',function($scope) {
        $scope.user = 'Kavlez';
        $scope.email = 'sweet_dreams@aliyun.com';
    }])
    .directive('hintOnBlur', [function() {
        return {
            require: 'ngModel',
            link: function(scope, element, attrs, ctrl) {
                ctrl.focused = false;
                element.bind('focus', function(evt) {
                    scope.$apply(function() {ctrl.focused = true;});
                }).bind('blur', function(evt) {
                    scope.$apply(function() {ctrl.focused = false;});
                });
            }
        }
    }]);

此处我们用focused来判断光标是否在某个属性上,当使用了hintOnBlur指令的对象上发生focus或blur事件时focused的状态发生变化。

表单也跟着改变一下,使用方法如下:

代码如下:

<form ng-controller="validationController" name="mainForm" >
    <p>Email:
        <input type="email" name="email" ng-model="myEmail" ng-minlength="3" ng-maxlength="50" required hint-on-blur />
        <div style="color:red" ng-messages="mainForm.email.$error" ng-show="!mainForm.email.focused" ng-messages-multiple ng-messages-include="validateTemplate/email.html">
        </div>
    </p>
    <p>
        <input type="submit" ng-disabled="mainForm.$invalid" />
    </p>
</form>

在ng-show中再加入对focused的判断,false时出现提示。

现在看起来像那么回事了。
自定义验证方式与有效性(validity),这个也用到指令(directive)。
验证填写的email是否已占用,这里简单模拟一下:

代码如下:

.directive('isAlreadyTaken', function() {
    return {
        require: 'ngModel',
        link: function(scope, ele, attrs, ctrl) {
            ctrl.$parsers.push(function(val) {
                ctrl.$setValidity('emailAvailable', false);
                var emailTable = [
                    'K@gmail.com',
                    'a@gmail.com',
                    'v@gmail.com',
                    'l@gmail.com',
                    'e@gmail.com',
                    'z@gmail.com'];
                for (var i=0;i<emailTable.length;i+=1)
                    if(val==emailTable[i])
                        return;
                ctrl.$setValidity('emailAvailable', true);
                return val;
            })
        }
    }
})

Input元素中加上is-already-taken属性,并且再加一个ng-message:

代码如下:

<p class="error" ng-message="emailAvailable">Already taken! try other email addresses!</p>

(0)

相关推荐

  • angular实现表单验证及提交功能

    本例通过Angular框架来实现简单的表单验证 一.html结构 1.借助于bootstrap快速的编写了一个简单的表单 代码主要部分如下: <div class="container" style="margin-top: 30px;" ng-controller="myCtrl"> <h1 style="text-align: center">用户表单提交</h1> <form a

  • Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)

    废话不多说了,直接给大家贴代码,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .sspan{ background: #28a54c; color: #fff; margi

  • angularJs使用$watch和$filter过滤器制作搜索筛选实例

    整理文档,搜刮出一个angularJs使用$watch和$filter过滤器制作搜索筛选,稍微整理精简一下做下分享. <div ng-app="module" ng-controller="ctrl"> 搜索: <input type="text" ng-model="search"> <table border="1" width="600"> &l

  • Angular表单验证实例详解

    表单验证 我去,我感觉我这个人其实还是一个很傻逼的一个人,老是因为拼错了一个单词或者怎么样就浪费我很长时间,这样真的不行不行,要正确对待这个问题,好了,说正题吧,angular也有表单验证minlength,maxlength,required呀这些个东西,还有也支持h5的那些验证,h5的那些验证,就是type啦,type='email',number,url呀这些,然后现在要用angular来验证,可以定义样式哈,不错,然后怎么验证呢,好的上代码 <!DOCTYPE html> <ht

  • AngularJS使用angular-formly进行表单验证

    当验证表单中有很多字段时,这时候可能希望把html的生成以及验证逻辑放到controller中,在页面,也许是这样的: <some-form fiedls="vm.someFields" ...></some-form> 然后,在controller中定义各个字段以及验证.angular-formly就是为这个需求而存在. 在controller中,把各个字段定义在数组中: vm.rentalFields = [ { key:'first_name', type

  • 详解AngularJS实现表单验证

    开始学习AngularJS表单验证: 常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: 复制代码 代码如下: <<input type="text" required /> 2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": 复制代码 代码如下: <<input type="tex

  • AngularJS使用ngMessages进行表单验证

    AngularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. 名称为"ngMessages"的module,通过npm install angular-messages进行安装.在没有使用ngMessages之前,我们可能这样写验证: <form name="

  • 基于AngularJS实现表单验证功能

    本文实例为大家分享了AngularJS实现表单验证功能的具体代码,供大家参考,具体内容如下 <!--实例解析 ng-app 指令定义了 AngularJS 应用. ng-controller 指令定义了应用控制器. ng-model 指令绑定了两个 input 元素到模型的 user 对象. formCtrl 函数设置了 master 对象的初始值,并定义了 reset() 方法. reset() 方法设置了 user 对象等于 master 对象. ng-click 指令调用了 reset()

  • AngularJS手动表单验证

    所谓手动验证是通过AngularJS表单的属性来验证,而成为AngularJS表单必须满足两个条件: 1.给form元素加上novalidate="novalidate": 2.给form元素加上name="theForm", 如下: <!DOCTYPE html> <html lang="en" ng-app="myApp1"> <head> <meta charset="

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

    做开发这么久一直被表单验证这个看似简单又不简单的东西搞得非常烦躁,于是写了个表单验证的框架,再也不用担心这个心烦的验证了. 这里使用AngularJS的指令进行处理代码及其简洁明了 下面是指令JS代码 app.directive('ccForm',['$parse',function ($parse) { return { restrict:'A', link:function (scope,element,attrs) { var first=true; var errors=0; var c

  • AngularJS自定义表单验证功能实例详解

    本文实例讲述了AngularJS自定义表单验证功能.分享给大家供大家参考,具体如下: Angular实现了大部分常用的HTML5的表单控件的类型(text, number, url, email, date, radio, checkbox),也实现了很多指令做为验证(required, pattern, minlength, maxlength, min, max). 在自定义的指令中,我们可以添加我们的验证方法到ngModelController的$validators对象上.为了取得这个c

  • AngularJS实现表单验证功能

    AngularJS表单验证功能实现代码: ng-model的作用: 1.ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定 2.双向绑定,在修改输入域的值时, AngularJS 属性的值也将修改 3.数据校验 4.ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error) 5.ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类 css内容: /*angularJS会根据表单的状态进行添加或者删除

  • AngularJS实现表单验证

    虽然我不是前端程序员,但明白前端做好验证是多么重要. 因为这样后端就可以多喘口气了,而且相比后端什么的果然还是前端可以提高用户的幸福感. AngularJS提供了很方便的表单验证功能,在此记录一番. 首先从下面这段代码开始 复制代码 代码如下: <form ng-app="myApp" ng-controller="validationController" name="mainForm" novalidate>     <p&

  • AngularJS实现表单验证功能详解

    在ng中,针对表单和空间提供了属性,用于验证控件交互的状态 布尔类型: ng-valid 表单通过验证时设置 ng-invalid 表单未通过验证时设置 ng-pristine 表单没有改动时设置 ng-dirty 表单有改动时设置 对象: $error 注意事项: ①给表单以及表单组件 加上name属性 ②给需要用到的表单组件 ,加上ngModel ③属性的用法 myForm.t_age.dirty/pristine/valid/invalid/$error 案例如下 <!DOCTYPE ht

  • AngularJs实现ng1.3+表单验证

    前一篇文章详解AngularJS实现表单验证说过,ng1.3+以后对于表单验证有了优化,它不再需要一个详细的表达式状态创建元素显示或隐藏. 例如:我们在ng1.3之前的版本都需要如下写法: 复制代码 代码如下: <div class="error" ng-show="signup_form.name.$dirty && signup_form.name. $invalid && signup_form.submitted">

  • 详解AngularJS中的表单验证(推荐)

    AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则式,很方便的完成验证,理论上所有的验证都可以用正则式完成 //javascript $scope.mobileRegx = "^1(3[0-9]|4[57]|5[0-35-9]|7[01678]|8[0-9])\\d{8}$"; $scope.emailRegx = "^[a-z]([a-z0-9]*[-_]?

随机推荐