AngularJS实现表单手动验证和表单自动验证_AngularJS

web前端|js教程 AngularJS实现表单手动验证和表单自动验证_AngularJS

AngularJS,表单验证

web前端-js教程

AngularJS的表单验证大致有两种，一种是手动验证，一种是自动验证。
A、手动验证
所谓手动验证是通过AngularJS表单的属性来验证。而成为AngularJS表单必须满足两个条件：

asp校园平台源码,vscode登陆git,ubuntu电源优化,vue打包tomcat,sqlite删除表若存在,爬虫资料百度云盘,php命令行模式,青海seo优化营销,备忘录网站源码,网页自适应手机,响应式论坛模板lzw

1、给form元素加上novalidate=”novalidate”；

游戏发布站源码程序通用版,vscode怎样读取txt,Ubuntu激活gpu,tomcat 页面跳转慢,爬虫 301,php页面生成图片,杭州seo推荐推广引流,手机算命网站源码,在线考试模板下载地址lzw

2、给form元素加上name=”theForm”，如下：

idc服务器网站源码,vscode搭建php项目,mac 卸载ubuntu,tomcat转发flask,sqlite3作字典用,公众号里的付费视频怎么爬虫,音乐网站源码php,谷歌seo推广价格多少,怎么查找网站的源代码,博客项目html模板中文lzw

          Form Submitting  
 
         Name     
      Email      必填
   email格式不正确
  
      Username     
      Age     
      Sex       Please choose    Mail    Femail     
      Password     
        
        {{theForm | json}}

● 给form加上novalidate=”novalidate”意味着表单将不再使用HTML5验证特性
● 给form加上name=”theForm”意味着表单的名称是theForm。如何使用theForm,比如我们验证表单是否被修改过theForm.$submitted
● 通过ng-submit提交表单
● formModel是$scope中的一个属性
● 对表单的Email进行了手动验证，使用了AngularJS表单的众多属性，比如theForm.email.$valid，theForm.$pristine，theForm.$submitted， theForm.email.$error.required，theForm.email.$error.email
● 通过

{{theForm | json}}

把AngularJS表单的所有属性都打印出来

{ "$error": {  "required": [   {    "$validators": {},    "$asyncValidators": {},    "$parsers": [],    "$formatters": [     null    ],    "$viewChangeListeners": [],    "$untouched": true,    "$touched": false,    "$pristine": true,    "$dirty": false,    "$valid": false,    "$invalid": true,    "$error": {     "required": true    },    "$name": "email",    "$options": null   }  ] }, "$name": "theForm", "$dirty": false, "$pristine": true, "$valid": false, "$invalid": true, "$submitted": false, "email": {  "$validators": {},  "$asyncValidators": {},  "$parsers": [],  "$formatters": [   null  ],  "$viewChangeListeners": [],  "$untouched": true,  "$touched": false,  "$pristine": true,  "$dirty": false,  "$valid": false,  "$invalid": true,  "$error": {   "required": true  },  "$name": "email",  "$options": null }, "sex": {  "$validators": {},  "$asyncValidators": {},  "$parsers": [],  "$formatters": [],  "$viewChangeListeners": [],  "$untouched": true,  "$touched": false,  "$pristine": true,  "$dirty": false,  "$valid": true,  "$invalid": false,  "$error": {},  "$name": "sex",  "$options": null }}

以上，凡是有name属性的input都被显示在上面。
在second.js文件中定义了module,controller以及提交表单的方法。

var myApp1 = angular.module('myApp1',[]); myApp1.controller('myCtrl1', function($scope, $http){  $scope.formModel = {};   $scope.onSubmit = function(){    $http.post('someurl',$scope.formModel)      .success(function(data){        console.log(':)');      })      .error(function(data){        console.log(':(');      });     console.log($scope.formModel);  };});

以上的表单验证方式好处是可控性强，但相对繁琐。
B、自动验证
AngularJS的另外一种表单验证方式是自动验证，即通过directive来实现，除了AngularJS自带的directive,还需要用到angular-auto-validate这个第三方module。
有关angular-auto-validate：
● 安装：npm i angular-auto-validate
● 引用：
● module依赖：var myApp = angular.module(“app”, [“jcs-autoValidate”]);
为了实现错误信息本地化，还需要angular-localize这个第三方module：
● 安装：npm install angular-localize –save
● module依赖：var myApp = angular.module(“app”, [“localize”]);
● 引用：

此外，当点击提交表单按钮，需要禁用按钮并显示一种等待效果，需要用到angular-ladda这个第三方module:

● 安装：bower install angular-ladda –save
● module依赖：var myApp = angular.module(“app”, [“angular-ladda”]);
● 引用：

页面如下：

           Form Validating Auto  
 
         Name     
      Email      
      Username     
      Age     
      Sex       Please choose    Mail    Femail     
      Password     
      <!---->     
        {{formModel | json}}

以上，先看提交按钮：

 <!---->

● ladda属性值为bool值，true表示显示动态等待效果，false不显示动态等待效果，这里的submitting是scope中的一个属性
● data-style=”expand-right”表示在按钮的右侧显示动态等待效果

再拿表单中的Age字段来说：

Age

其中,min, max为AgularJS的directive,而ng-min-err-type是angular-auto-validate的directive。这里遵循的惯例是ng-AngularJS表单验证的directive名称-err-type，而tooYoung和tooOld的作用是什么，又是在哪里用上了呢？
是在module层面用上了，定义在了form_validation_auto.js文件中。

var myApp1 = angular.module('myApp1',['jcs-autoValidate','localize','angular-ladda']); myApp1.run(function(defaultErrorMessageResolver){  defaultErrorMessageResolver.getErrorMessages().then(function(errorMessages){    errorMessages['tooYoung'] = '年龄必须小于{0}';    errorMessages['tooOld'] = '年龄不能大于{0}';    errorMessages['badUsername'] = '用户名只能包含数字、字母或下划线';  });}); myApp1.controller('myCtrl1', function($scope, $http){  $scope.formModel = {};  $scope.submitting = false;   $scope.onSubmit = function(){     $scope.submitting = true;    console.log('已提交');    console.log($scope.formModel);     $http.post('url',$scope.formModel)      .success(function(data){        console.log(':)');        $scope.submitting = false;      })      .error(function(data){        console.log(':(');        $scope.submitting = false;      });  };});

以上，在run方法中使用angular-auto-validate的defaultErrorMessageResolver服务，对错误信息进行为了自定义。页面上的tooYoung和tooOld和这里的errorMessages[‘tooYoung’]和errorMessages[‘badUsername’]对应。

本文的全部内容就为大家介绍到这里，希望对大家学习AngularJS实现表单验证有所帮助。