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中处理字符串之link()方法的使用
Jun 08 Javascript
Bootstrap每天必学之导航
Nov 26 Javascript
javascript判断图片是否加载完成的方法推荐
May 13 Javascript
Vue.JS入门教程之列表渲染
Dec 01 Javascript
原生JS发送异步数据请求
Jun 08 Javascript
JS实现微信摇一摇原理解析
Jul 22 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
May 29 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
Oct 28 Javascript
JS Web Flex弹性盒子模型代码实例
Mar 10 Javascript
js对象属性名驼峰式转下划线的实例代码
Sep 17 Javascript
jQuery实现查看图片功能
Dec 01 jQuery
JavaScript 中for/of,for/in 的详细介绍
Nov 17 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
phpfans留言版用到的install.php
2007/01/04 PHP
PHP下用rmdir实现删除目录的三种方法小结
2008/04/20 PHP
linux命令之调试工具strace的深入分析
2013/06/03 PHP
magento后台无法登录解决办法的两种方法
2016/12/09 PHP
使用PHP下载CSS文件中的所有图片【几行代码即可实现】
2016/12/14 PHP
什么是PHP7中的孤儿进程与僵尸进程
2019/04/14 PHP
input、button的不同type值在ajax提交表单时导致的陷阱
2009/02/24 Javascript
jQuery 联动日历实现代码
2012/05/31 Javascript
BootStrapValidator初使用教程详解
2017/02/10 Javascript
JS中的作用域链
2017/03/01 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
easyui-datagrid特殊字符不能显示的处理方法
2017/04/12 Javascript
Vue.use源码分析
2017/04/22 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
Vue+element-ui 实现表格的分页功能示例
2018/08/18 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
2018/09/07 Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
2020/03/26 Javascript
浅析python协程相关概念
2018/01/20 Python
Pycharm设置utf-8自动显示方法
2019/01/17 Python
在Python中通过getattr获取对象引用的方法
2019/01/21 Python
Python 使用PyQt5 完成选择文件或目录的对话框方法
2019/06/27 Python
django用户登录验证的完整示例代码
2019/07/21 Python
Python : turtle色彩控制实例详解
2020/01/19 Python
python unichr函数知识点总结
2020/12/16 Python
如何在vscode中安装python库的方法步骤
2021/01/06 Python
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
博朗(Braun)俄罗斯官方商店:德国小家电品牌
2019/09/24 全球购物
Hammitt官网:设计师手袋
2020/05/23 全球购物
"引用"与指针的区别是什么
2016/09/07 面试题
现在输入n个数字,以逗号,分开;然后可选择升或者降序排序;按提交键就在另一页面显示按什么排序,结果为,提供reset
2012/11/09 面试题
会计工作心得体会
2014/01/13 职场文书
文员求职信
2014/07/15 职场文书
老兵退伍感言
2015/08/03 职场文书
使用RedisTemplat实现简单的分布式锁
2021/11/20 Redis
Apache Pulsar结合Hudi构建Lakehouse方案分析
2022/03/31 Servers
Android中的Launch Mode详情
2022/06/05 Java/Android