AngularJS手动表单验证

前端技术 2023/09/07 JavaScript

所谓手动验证是通过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>

  • ● 给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
  • ● 通过<pre>{{theForm | json}}</pre>把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手动表单验证能够熟练操作。

本文地址：https://www.stayed.cn/item/18952

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案