AngularJS手动表单验证_AngularJS

web前端|js教程 AngularJS手动表单验证_AngularJS

AngularJS手动表单验证,AngularJS表单验证

web前端-js教程

所谓手动验证是通过AngularJS表单的属性来验证，而成为AngularJS表单必须满足两个条件：

access vba 源码,vscode无法复制到外部,极简ubuntu,tomcat服务手动安装,else爬虫教程,php教材推荐,如何做网络推广seo教程,排行网站模板lzw

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

php手机聊天室源码,vscode 太卡了,ubuntu bonic,tomcat启动hsf,sqlite自动创建库,jseclipse 插件下载,谷歌新出的前端框架dart,高级python爬虫完整代码,php文件上传路径,铁岭seo优化报价,网站的导航栏在哪里,网页主导航内容,左侧二级菜单模板lzw

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

recovery源码下载,vscode的背景图如何去掉,ubuntu pypy,tomcat中小型系统,sqlite 3索引,网页设计的编程语言,香港电讯盈科服务器,免费jquery选项卡插件,js html 前端框架,全图网爬虫,php时间戳毫秒,西安耐用的seo定制,如何批量采集网站图片,防止网页源码被下载,matlab 模板匹配程序,qq登录静态页面代码,管理系统代码php,车牌图像定位程序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); };});

以上的表单验证方式好处是可控性强，但相对繁琐。

以上就是本文的全部内容，希望对AngularJS手动表单验证能够熟练操作。