所谓手动验证是通过angularjs表单的属性来验证,而成为angularjs表单必须满足两个条件:
1、给form元素加上novalidate="novalidate";
2、给form元素加上name="theform",
如下:
<!doctype html> <html lang="en" ng-app="myapp1"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"/> <link rel="stylesheet" href="../css/main.css"/> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a href="/" class="navbar-brand">form submitting</a> </div> </div> </nav> <div class="container main-content" ng-controller="myctrl1"> <!--novalidate让表单不要使用html验证--> <!--theform变成scope的一个字段--> <form ng-submit="onsubmit(theform.$valid)" novalidate="novalidate" name="theform"> <div class="form-group"> <label for="name">name</label> <input type="text" class="form-control" id="name" ng-model="formmodel.name"/> </div> <div class="form-group" ng-class="{ 'has-error': !theform.email.$valid && (!theform.$pristine || theform.$submitted), 'has-success': theform.email.$valid && (!theform.$pristine || theform.$submitted) }"> <label for="email">email</label> <input type="email" class="form-control" id="email" ng-model="formmodel.email" required="required" name="email"/> <p class="help-block" ng-show="theform.email.$error.required && (!theform.$pristine || theform.$submitted)">必填</p> <p class="help-block" ng-show="theform.email.$error.email && (!theform.$pristine || theform.$submitted)">email格式不正确</p> </div> <div class="form-group"> <label for="username">username</label> <input type="text" class="form-control" id="username" ng-model="formmodel.username"/> </div> <div class="form-group"> <label for="age">age</label> <input type="number" class="form-control" id="age" ng-model="formmodel.age"/> </div> <div class="form-group"> <label for="sex">sex</label> <select name="sex" id="sex" class="form-control" ng-model="formmodel.sex"> <option value="">please choose</option> <option value="male">mail</option> <option value="femail">femail</option> </select> </div> <div class="form-group"> <label for="password">password</label> <input type="text" class="form-control" id="password" ng-model="formmodel.password"/> </div> <div class="form-group"> <button class="btn btn-primary" type="submit">register</button> </div> <pre> {{theform | json}} </pre> </form> </div> <script src="../node_modules/angular/angular.min.js"></script> <script src="second.js"></script> </body> </html>
{ "$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手动表单验证能够熟练操作。
如对本文有疑问, 点击进行留言回复!!
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
分享Angular http interceptors 拦截器使用(推荐)
网友评论