在AngularJS中实现自定义表单验证

除了一些已经定义好了的验证(例如 必填项、最小长度、最大长度)之外,更常用的,还是需要我们自己定义表单验证,这样才能对于项目中遇到的很多非常规问题给出自己的合适的解决方案。

  1. 在表单中控制变量

    表单的属性可以在其所属的$scope对象中访问到,而我们又可以访问$scope对象,因此JavaScript可以间接地访问DOM中的表单属性。借助这些属性,我们可以对表单做出实时响应。可以使用下面这样的格式来访问这些属性:

    formName.inputFileldName.property

    未修改的表单 formName.inputFieldName.$pristine

    修改过的表单 formName.inputFiledName.$dirty

    合法表单 formName.inputFieldName.$valid

    不合法表单 formName.inputFieldName.$invalid

    错误 formName.inputfieldName.$error????如果验证失败,该值为true,如果验证通过,该值为false

    一些有用的CSS样式

    AngularJS处理表单时,会根据表单当前的状态添加一些CSS类,这些CSS类名称比较类似与相应的属性:

    .ng-pristine{}

    .ng-dirty{}

    .ng-valid{}

    .ng-invalid{}

    它们对应着表单输入字段的特定状态,当某个字段输入非法时,ng-invalid类会被添加到这个字段上。

2、尽管实时验证有时候非常必要,但是如果在用户还没有结束输入就提醒出错,是非常糟糕的用户体验,解决的办法有两个,第一,在提交表单的时候验证;第二,在input失去焦点时进行验证。

时间: 2024-08-07 23:33:02

在AngularJS中实现自定义表单验证的相关文章

AngularJS中使用的表单验证

Reference: http://www.tuicool.com/articles/2Qbiqi 客户端表单验证是AngularJS里面最酷的功能之一. AngularJS表单验证可以让你从一开始就写出一个具有交互性和可相应的现代HTML5表单. 在AngularJS中,有许多表单验证指令.在这里,我们将谈谈几个最流行指令,然后我们将讨论如何编写自定义的验证. <form name="form"> <label name="email">Y

(译) 在AngularJS中使用的表单验证功能【转】

验证功能是AngularJS里面最酷炫的功能之一,它可以让你写出一个具有良好用户体验的Web应用. 在AngularJS中,有许多用于验证的指令.我们将先学习几个最流行的内置指令,然后再创建一个自定义验证规则的指令. <form name="form"> <label name="email">Your email</label> <input type="email" name="email&

jquery.validate.js使用之自定义表单验证规则

jquery.validate.js使用之自定义表单验证规则,下面列出了一些常用的验证法规则 jquery.validate.js演示查看 jquery validate强大的jquery表单验证插件 http://www.51xuediannao.com/js/jquery/jquery_validate/ ======================================================== //扩展验证规则 //邮箱 表单验证规则jQuery.validator.

Angular5+ 自定义表单验证器

Angular5+ 自定义表单验证器 Custom Validators 标签(空格分隔): Angular 首先阐述一下遇到的问题: 怎样实现"再次输入密码"的验证(两个controller值相等)(equalTo) 怎样反向监听(先输入"再次输入密码",后输入设置密码) 解决思路: 第一个问题,可以通过[AbstractControl].root.get([targetName])来取得指定的controller,然后比较他们的值. 第二个,可以通过[targe

自定义表单验证

1.引入必要的文件 <link href="~/Content/easyui/themes/default/easyui.css" rel="stylesheet" /><link href="~/Content/easyui/themes/icon.css" rel="stylesheet" /> <script src="~/Content/easyui/js/jquery.min.

AngularJs 入门系列-2 表单验证

对于日常的开发来说,最常见的开发场景就是通过表单编辑数据,这里涉及的问题就是验证问题. angularjs 内置已经支持了常见的验证方式,可以轻松实现表单验证. 1. 绑定 为了方便,我们在 $scope 上下文对象上创建一个 model 来表示我们编辑的内容. $scope.model = { id : 8, name: "alice", email: "[email protected]" }; angularjs 的验证需要表单的配合,为了能够访问表单,我们需

Django中的Form表单验证

回忆一下Form表单验证的逻辑: 前端有若干个input输入框,将用户输入内容,以字典传递给后端. 后端预先存在一个Form表单验证的基类,封装了一个检测用户输入是否全部通过的方法.该方法会先定义好错误信息的字典,并会遍历类的所有属性(对应前端待验证的输入域),调用各自的验证方法,将错误信息(两类,必要与否以及格式正确与否)存入字典,并得出最终的验证结果.在使用时,需要定义继承自Form基类不同的Form类,以对应有着不同输入域的Form表单.在拿到前端给的字典前,要先初始化自定义From类,直

AngularJS学习笔记(二) 表单验证案例(ng-repeat/filter)

这一节相对来说需要理解的东西不是太多,记住了那些api就行了. 还是一个案例(同样来自miaov),一个表单验证,先上代码,然后再对对应的内容进行解释. <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Title</title> </head>

AngularJs轻松搞定表单验证

表单验证在很多地方都会用到,在学习angular之前,我觉得表单验证是一个很麻烦的事情,需要在js中写大量的代码,但是在angular中,只需要写很少的代码就能完成以前需要很多代码才能完成的东西. 在angular中,当我们在input标签中加入ng-model之后,angular会为这个标签自动生成一系列的class.例如: <!DOCTYPE html> <html ng-app="myApp"> <head lang="en"&g