AngularJS表单验证功能


Posted in Javascript onOctober 19, 2017

        能够根据用户在表单中输入的内容给出实时视觉反馈是非常重要的。在人与人沟通的语境中,表单验证给出来的反馈同获得正确输入同等重要。

表单验证不仅能给用户提供有用的反馈,同时也能保护我们的Web应用不会被恶意或者错误的输入所破坏。我们要在Web前端尽力保护后端。

AngularJS能够将HTML5表单验证功能同它自己的验证指令结合起来使用,并且非常方便。AngularJS提供了很多表单验证指令。

<form name="form" novalidate>
  <label name="email">Your email</label>
  <input type="email" name="email" ng-model="email" placeholder="Email Address"/>
</form>

要使用表单验证,首先要确保表单像上面的例子一样有一个 name 属性。

所有输入字段都可以进行基本的验证,比如最大、最小长度等。这些功能是由新的HTML5表单属性提供的。

如果想要屏蔽浏览器对表单的默认验证行为,可以在表单元素上添加 novalidate 标记

1. 必填项 required

验证某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记 required 即可:

注释:required 属性适用于以下 <input> 类型:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file

<input type="text" required />

2. 最小长度 ng-minleng="{number}"

验证表单输入的文本长度是否大于某个最小值,在输入字段上使用AngularJS指令 ng-minleng="{number}"

<input type="text" ng-minlength="5" /> 

3. 最大长度 ng-maxlength="{number}"

验证表单输入的文本长度是否小于或等于某个最大值,在输入字段上使用AngularJS指令 ng-maxlength="{number}"

<input type="text" ng-maxlength="20" />

4. 模式匹配  ng-pattern="/PATTERN/"

        使用 ng-pattern="/PATTERN/" 来确保输入能够匹配指定的正则表达式:

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

5. 电子邮件

验证输入内容是否是电子邮件,只要像下面这样将 input 的类型设置为 email 即可:

<input type="email" name="email" ng-model="user.email" />

6. 数字

验证输入内容是否是数字,将 input 的类型设置为 number :

<input type="number" name="age" ng-model="user.age" />
 

7. URL

验证输入内容是否是URL,将 input 的类型设置为 url :

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

在表单中控制变量

表单的属性可以在其所属的 $scope 对象中访问到,而我们又可以访问 $scope 对象,因此JavaScript可以间接地访问DOM中的表单属性。借助这些属性,我们可以对表单做出实时(和AngularJS中其他东西一样)响应。这些属性包括下面这些。(注意,可以使用下面的格式访问这些属性。)

formName.inputFieldName.property 

■未修改的表单

这是一个布尔属性,用来判断用户是否修改了表单。如果未修改,值为 true ,如果修改过值为 false

formName.inputFieldName.$pristine 

■修改过的表单

只要用户修改过表单,无论输入是否通过验证,该值都返回 true

formName.inputFieldName.$dirty 

 ■合法的表单

这个布尔型的属性用来判断表单的内容是否合法。如果当前表单内容是合法的,下面属性的值就是 true :

formName.inputFieldName.$valid 

■ 不合法的表单

这个布尔属性用来判断表单的内容是否不合法。如果当前表单内容是不合法的,下面属性的值为 true :

formName.inputFieldName.$invalid

■ 错误

这是AngularJS提供的另外一个非常有用的属性: $error 对象。它包含当前表单的所有验证内容,以及它们是否合法的信息。用下面的语法访问这个属性:

formName.inputfieldName.$error  

$parsers

当用户同控制器进行交互,并且 ngModelController 中的 $setViewValue() 方法被调用时,$parsers 数组中的函数会以流水线的形式被逐个调用。第一个 $parse 被调用后,执行结果会传递给第二个 $parse ,以此类推

这些函数可以对输入值进行转换,或者通过 $setValidity() 函数设置表单的合法性。

使用 $parsers 数组是实现自定义验证的途径之一。

例如,假设我们想要确保输入值在某两个数值之间,可以在 $parsers 数组中入栈一个新的函数,这个函数会在验证链中被调用。

每个 $parser 返回的值都会被传入下一个 $parser 中。当不希望数据模型发生更新时返回undefined 。 

 html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>表单测试</title>
  <link rel="stylesheet" href="">
  <script type="text/javascript" src="angular.1.2.13.js"></script>
</head>
<body>
  <div ng-controller="TestController">
    <form name="testForm">
      <input type="number" name="inputs" ng-test ng-model="obj.number">
      <span ng-show="testForm.inputs.$error.test">good</span>
      <span ng-hide="testForm.inputs.$error.test">bad</span>
      <div>{{ testForm.inputs.$valid }}</div>
      <div>{{ testForm.inputs.$invalid }}</div>
      <div>{{ obj.number }}</div>
    </form>
  </div>
  <script type="text/javascript" src="test5app.js"></script>
</body>
</html>

javascript  ( test5app.js )

angular.module('myApp', []).controller('TestController', function($scope) {
  $scope.obj = {
    number: 34
  }
}).directive('ngTest', function() {
  return {
    require: '?ngModel',
    restrict: 'AE',
    link: function($scope, iElm, iAttrs, ngModel) {
      if (!ngModel) return;
      ngModel.$parsers.push(function(viewValue) {
        var num = parseInt(viewValue);
        if (num >= 0 && num < 99) {
          ngModel.$setValidity('test', true);
          return viewValue
        } else {
          ngModel.$setValidity('test', false);
          return undefined
        }
      })
    }
  }
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript初学者需要了解10个小技巧
Aug 25 Javascript
js创建对象的几种常用方式小结(推荐)
Oct 24 Javascript
JavaScript 用cloneNode方法克隆节点的代码
Oct 15 Javascript
今天是星期几的4种JS代码写法
Sep 17 Javascript
vue2 前端搜索实现示例
Feb 26 Javascript
webpack4 处理SCSS的方法示例
Sep 03 Javascript
Vue数据绑定实例写法
Aug 06 Javascript
node使用request请求的方法
Dec 20 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 Javascript
Vue 的双向绑定原理与用法揭秘
May 06 Javascript
jQuery AJAX应用实例总结
May 19 jQuery
JS实现简易图片自动轮播
Oct 16 Javascript
JS实现的按钮点击颜色切换功能示例
Oct 19 #Javascript
Vue如何从1.0迁移到2.0
Oct 19 #Javascript
bootstrap Table服务端处理分页(后台是.net)
Oct 19 #Javascript
安装vue-cli报错 -4058 的解决方法
Oct 19 #Javascript
BootStrap模态框不垂直居中的解决方法
Oct 19 #Javascript
微信小程序组件之srcoll-view的详解
Oct 19 #Javascript
JS实现点击循环切换显示内容的方法
Oct 19 #Javascript
You might like
syphon 虹吸式咖啡冲泡冲煮倒水的得与失
2021/03/03 冲泡冲煮
php设计模式 Mediator (中介者模式)
2011/06/26 PHP
PHP使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
Symfony控制层深入详解
2016/03/17 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
PHP设计模式之适配器模式定义与用法详解
2018/04/03 PHP
checkbox全选所涉及到的知识点介绍
2013/12/31 Javascript
JS中的log对象获取以及debug的写法介绍
2014/03/03 Javascript
Javascript正则控制文本框只能输入整数或浮点数
2014/09/02 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
2015/03/18 Javascript
Yii2使用Bootbox插件实现自定义弹窗
2015/04/02 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
2016/05/12 Javascript
使用vs code开发Nodejs程序的使用方法
2017/09/21 NodeJs
Vue-Router模式和钩子的用法
2018/02/28 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
Vue结合Video.js播放m3u8视频流的方法示例
2018/05/04 Javascript
JavaScript实现的九种排序算法
2019/03/04 Javascript
结合axios对项目中的api请求进行封装操作
2020/09/21 Javascript
python使用BeautifulSoup分页网页中超链接的方法
2015/04/04 Python
Python 'takes exactly 1 argument (2 given)' Python error
2016/12/13 Python
python使用matplotlib绘制柱状图教程
2017/02/08 Python
OpenCV2.3.1+Python2.7.3+Numpy等的配置解析
2018/01/05 Python
Java实现的执行python脚本工具类示例【使用jython.jar】
2018/03/29 Python
详解Python 协程的详细用法使用和例子
2018/06/15 Python
python实现在遍历列表时,直接对dict元素增加字段的方法
2019/01/15 Python
python 实现敏感词过滤的方法
2019/01/21 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
浅谈Pycharm最有必要改的几个默认设置项
2020/02/14 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
Python实现一个简单的递归下降分析器
2020/08/01 Python
scrapy处理python爬虫调度详解
2020/11/23 Python
使用简单的CSS3属性实现炫酷读者墙效果
2014/01/08 HTML / CSS
新加坡领先的时尚生活方式零售品牌:CHARLES & KEITH
2018/01/16 全球购物
父亲八十大寿答谢词
2014/01/23 职场文书
财务部绩效考核方案
2014/05/04 职场文书
毕业论文答辩开场白
2015/05/27 职场文书