AngularJS入门基础——表单验证

<form name="form" novalidata>

<label name="email">your email</label>

<input type="email" name="email" ng-model="email" placeholder="Email Address">

</form>

/*如下是朋友空间的内容*/

angular 高级校验特性

在一些情况下,单独的表单验证并不能满足需要,可能有一些特殊的校验,比如关联两个数据等等.通常这类校验都是可复用的,也就是需要一个directive.编写的自定义校验的 directive 并不复杂,首先需要了解几个 Angular 提供的属性和接口.

1. $setValidity()

这个方法可以人为的设置一个表单控件的$valid 以及$ invalid, 也就是说改变表单控件是否通过校验的状态.类似的还有$setDirty()和$setPristine().

?


1

ngModel.$setValidity(‘max-custom‘, true);    // 类似这样的设置就将一个表单控件的状态改变了, ngModel 是 directive 的 link 的第四个参数,$setValidity 的第一个参数可以定义一个标志,第二个参数true 表示通过验证, false 表示未通过

2. $parsers

这个属性解释起来稍微有点抽象,当 ngModel 的值发生变化的时候,Angular 会自己调用 $setViewValue(value),然后 ngModel 的 $parsers 数组中得函数会被逐个调用,当 $parsers[0] 中的方法被调用后执行结果会传递给 $parsers[1],以此类推,这些函数可以对 ngModel 的值进行转换或者通过 $setValidity() 设置表单的合法性.

所以如果我们想实现点什么特殊的校验,可以在 $parsers 中插入一个 function, 然后它会在验证链中被调用,如果不希望数据模型发生更新,让 $parsers 的函数返回值返回 undefined 即可.

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

.directive(‘maxMax‘, function(){

  return {

    require: ‘ngModel‘,

    restrict: ‘A‘,

    link: function($scope, iElm, iAttrs, ngModel) {

      if(!ngModel) return;

      ngModel.$parsers.unshift(function(viewValue){

        var num = parseInt(viewValue);

        if(num>=0 && num<99){

          ngModel.$setValidity(‘maxMax‘,true);

          return viewValue;

        }else{

          ngModel.$setValidity(‘maxMax‘,false);

          return undefined;

        }

      });

    }

  };

})

红色字体部分经过我的实践及探索，发现有误，正确的应该如下：

所以如果我们想实现点什么特殊的校验,可以在 $parsers 中插入一个 function, 然后它会在验证链中被调用,如果不希望数据模型发生更新,让 $parsers 的函数返回值返回 原值 即可.


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

.directive(‘maxMax‘, function(){

  return {

    require: ‘ngModel‘,

    restrict: ‘A‘,

    link: function($scope, iElm, iAttrs, ngModel) {

      if(!ngModel) return;

      ngModel.$parsers.unshift(function(viewValue){

        var num = parseInt(viewValue);

        if(num>=0 && num<99){

          ngModel.$setValidity(‘maxMax‘,true);

          return viewValue;

        }else{

          ngModel.$setValidity(‘maxMax‘,false);

          return viewValue; // 这里如果返回 undefined 则会导致部分ng自带验证器失效，因为获取不到ngModel.$viewValue的值了。

        }

      });

    }

  };

})
时间： 2024-10-05 05:06:00

AngularJS入门基础——表单验证的相关文章

JavaScript：基础表单验证

在用户填写表单的过程之中,往往需要编写一堆的验证操作,这样就可以保证提交的数据时正确的.那么下面就模拟表单验证的处理操作完成. 如果要想进行验证,首先针对于输入的数据来进行一个验证处理. 1.定义一个基础的表单(从标准来讲每一个元素都一定要存在有一个ID属性) <form action="pass.html" method="post" id="loginForm"> <!--在以后的开发过程之中,必须要保证id与name属性内

angularjs中的表单验证

angular对html原生的form做了封装,增加了很多验证功能 1.代码结构 <form name="signup_form" novalidate ng-submit="signupForm()"> <div> <label>用户名</label> <input type="text" placeholder="Name" name="name"

AngularJs入门之表单开发

本文和大家分享的主要是前端开发中必备的AngularJs框架表单开发相关基础知识,希望对大家使用和学习AngularJs有所帮助. 1.简单的表单提交: 2.更多的表单元素: 3.初始化表单: 代码 <!doctype html> <html ng-app="lesson" ng-controller="FormCtrl" > <head> <meta http-equiv="Content-Type" 

Javascript基础表单验证

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <script type="text/javascript"> function checkForm(form) { if ($("#receivemobile").val() == "") { alert("收货人手机号

AngularJS表单验证实现方法详解

本文主要是通过源码实例和大家分享AngularJS中的表单验证相关知识,希望通过本文的分享,对大家学习AngularJS有所帮助. 1.常规表单验证: 2.AngularJs中提供的表单验证实例. 实例代码 <!doctype html> <html ng-app="lesson" ng-controller="FormCtrl" > <head> <meta http-equiv="Content-Type&qu

AngularJS中使用的表单验证

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

AngularJs 入门系列-2 表单验证

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

AngularJs 表单验证

看到一些博客说这个框架要过时了,但是还是学习了下,觉的很方便的一个框架,有空的同学可以看看,适合我们入门看,比较基础. 对于日常的开发来说,最常见的开发场景就是通过表单编辑数据,这里涉及的问题就是验证问题. angularjs 内置已经支持了常见的验证方式,可以轻松实现表单验证. 1. 绑定 为了方便,我们在 $scope 上下文对象上创建一个 model 来表示我们编辑的内容. $scope.model = { id : 8, name: "alice", email: "

表单验证&amp;lt;AngularJs&amp;gt;

经常使用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,仅仅要在输入字段元素上加入HTML5标记required就可以: <input type="text" required />   2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": <input type="text" ng-minlength="5" /> 3.