第七章 AngularJS表单校验

 
  一、Web前端表单校验的必要性 
 

 
  Web前端表单校验对于提高Web安全性的意义并不是很大，因为攻击者可以有多种手段绕过前端页面将请求数据发往Web服务器，比如根据HTTP协议规范来仿造一段HTTP请求报文，然后与Web应用服务器建立Socket链接，把报文发往Web服务器 
 

 
  因此，Web前端数据校验的意义在于改善用户体验 ，可实时知道哪些数据是不合法的，这样也能减轻服务器的压力 
 

 
  二、AngularJS表单校验模式 
 

 
  Angular框架会自动为<form>标签和其他表单标签如<input>标记一些CSS样式 
 

 
  -------------------------------------------------------------------------------------------------------------------- 
 

 
  <div> 
 

 
   <form name="user"> 
 

 
   <input type="text"  
  ng-model 
  ="user.uname"/> 
 

 
   </form> 
 

 
  </div> 
 

 
  -------------------------------------------------------------------------------------------------------------------- 
 

 
  以上代码，在浏览器中，使用开发者工具查看后会发现添加了CSS样式 
 

 
  -------------------------------------------------------------------------------------------------------------------- 
 

 
  <form name="user" class=" 
  ng-pristine ng-valid 
  "> 
 

 
   <input  
  ng-model 
  ="user.uname"  
 

 
   class=" 
  ng-pristine ng-untouched ng-valid ng-empty 
  " type="text"> 
 

 
  </form> 
 

 
  -------------------------------------------------------------------------------------------------------------------- 
 

 
  对于这些CSS样式，AngularJS在作用域中会维护一个状态属性与之对应，这些状态属性是AngularJS框架维护的，我们只需要关注这些状态的值即可知道表单输入数据是否合法 
 

CSS样式	状态属性	描述
ng-valid	$valid	表单输入合法
ng-invalid	$invalid	表单输入不合法
ng-pristine	$pristine	表单元素未被使用
ng-dirty	$dirty	表单元素被使用
ng-touched	$touched	元素获取焦点
ng-untouched	$untouched	元素失去焦点
ng-empty	$empty	元素内容为空

 
  AngularJS会根据填写的数据正确与否，自动的为对应状态设置为false或true，并对表单元素添加CSS样式，例如：当数据不合法时，AngularJS会将 
  $invalid 
  设置为true并在对应的表单元素上添加CSS样式 
  ng-invalid 
 

 
  可以利用校验的状态值进行应用 
 

 
  -------------------------------------------------------------------------------------------------------------------- 
 

 
  <!DOCTYPE html> 
 

 
  <html  
  ng-app 
  > 
 

 
  <head> 
 

 
   <meta charset="utf-8"> 
 

 
   <title>angularjs</title> 
 

 
   <script type="text/javascript" src="angular-1.5.5/angular.min.js"></script> 
 

 
  </head> 
 

 
  <body> 
 

 
   <div> 
 

 
   <form name="user"> 
 

 
   <input type="email" name="email" 
   ng-model 
  ="email"  
  required 
  /> 
 

 
   <span  
  ng-show 
  ="user.email. 
  $invalid 
  ">邮箱格式不正确</span> 
 

 
   </form> 
 

 
   </div> 
 

 
  </body> 
 

 
  </html> 
 

 
  -------------------------------------------------------------------------------------------------------------------- 
 

 
  常用的AngularJS表单校验相关的属性和指令： 
 

 
  1.必填项： 
  requied

 
  <input type="text"  
  required 
  /> 
 

 
  2.最小长度： 
  ng-minlength 
  ="{number}" 
 

 
  <input type="text"  
  ng-minlength 
  ="5"> 
 

 
  3.最大长度： 
  ng-maxlength 
  ="{number}" 
 

 
  <input type="text"  
  ng-maxlength 
  ="5"> 
 

 
模式匹配：ng-pattern="/PATTERN/" 
 

 
  <input type="text"  
  ng-pattern 
  ="[a-zA-Z]"/> 
 

 
电子邮箱：type="email" 
 

 
  <input  
  type 
  ="email" name="email"  
  ng-model 
  ="user.email"/> 
 

 
数字：type="number" 
 

 
  <input  
  type 
  ="number" name="age"  
  ng-model 
  ="user.age"/> 
 

 
URL：type="url" 
 

 
  <input  
  type 
  ="url" name="homepage"  
  ng-model 
  ="user.url"/> 
 

 
  在同一个表单元素中可以同时添加多项校验， 当输入不合法时，如果需要得知不满足哪个校验条件时，可以使用AngularJS框架中和表单相关的 
  $error 
  对象的属性进行判断。当表单数据不满足某个校验条件时 
  $error 
  对象与之对应的属性(requied、maxlength、minlength等)会被置为true 
 

 
  -------------------------------------------------------------------------------------------------------------------- 
 

 
  <!DOCTYPE html> 
 

 
  <html ng-app> 
 

 
  <head> 
 

 
   <meta charset="utf-8"> 
 

 
   <title>angularjs</title> 
 

 
   <script type="text/javascript" src="angular-1.5.5/angular.min.js"></script> 
 

 
   <style type="text/css"> 
 

 
   input.ng-invalid{ 
 

 
   border:#f00 1px solid; 
 

}

 
   </style> 
 

 
  </head> 
 

 
  <body> 
 

 
   <div> 
 

 
   <form name="user"> 
 

 
   <div> 
 

 
   <label>Email:</label> 
 

 
   <input type=" 
  email 
  " name="email"  
 

 
   ng-minlength 
  ="10"

 
   ng-maxlength 
  ="20"

 
  ng-model 
  ="email"

 
   required 
  />

 
   <span  
  ng-show 
  ="user.email. 
  $error 
  . 
  required 
  ">内容不能为空</span> 
 

 
   <span  
  ng-show 
  ="user.email. 
  $error 
  . 
  minlength 
  ">长度不能小于10</span> 
 

 
   <span  
  ng-show 
  ="user.email. 
  $error 
  . 
  maxlength 
  ">长度不能大于20</span> 
 

 
   <span  
  ng-show 
  ="user.email. 
  $error 
  . 
  email 
  ">不符合Email格式</span> 
 

 
   </div> 
 

 
   </form> 
 

 
   </div> 
 

 
  </body> 
 

 
  </html> 
 

 
  -------------------------------------------------------------------------------------------------------------------- 
 

 
  注意：这里的user.email. 
  $error 
  . 
  required 
  是指name属性为user的form表单中的name为email的表单元素中的校验对象$error中required的校验结果 
 

 
  三、ngMessages模块 
 

 
  1. 
  ngMessages 
  模块是AngularJS1.3版本之后增加的表单验证相关的模块，主要作用是对提示信息展示功能进行增强 
 

 
  2. 
  ngMessages 
  模块的全部内容定义在一个单独的angular-messages.js文件中，需要引入该文件 
 

 
  3. 
  ngMessages 
  作为一个单独的模块 ，在声明自定义模块时需要添加 
  ngMessges 
  模块依赖 
 

 
  4. 
  ngMessages 
  模块提供了 
  ng-messages 
  指令和 
  ng-message 
  指令 
 

 
    
   ng-messages 
  指令用于定义一组表单验证不合法的提示信息，该指令实际上也需要使用 
  $error 
  对象； 
  ng-message 
  指令用于定义具体某一条表单输入不合法输入时的提示信息 
 

 
  5.当表单数据输入不合法时， 
  ngMessages 
  模块会从组中按照从上到下的顺序显示第一条匹配的提示信息 
 

 
  -------------------------------------------------------------------------------------------------------------------- 
 

 
  <html ng-app="formModule"> 
 

 
  <head> 
 

 
  <meta charset="utf-8"> 
 

 
  <title>angularjs</title> 
 

 
  <script type="text/javascript" src="angular-1.5.5/angular.min.js"></script> 
 

 
  <script type="text/javascript" src="angular-1.5.5/angular-messages.min.js"</script> 
 

 
  </head> 
 

 
  <body> 
 

 
  <form name="user"> 
 

 
   <label>姓名：</label> 
 

 
   <input type="text" name="name"  
  ng-model 
  ="name"  
  required 
  /> 
 

 
   <div  
  ng-messages 
  ="user.name. 
  $error 
  "> 
 

 
   <div  
  ng-message 
  =" 
  required 
  ">姓名不能为空</div> 
 

 
   </div> 
 

 
   <label>Email：</label> 
 

 
   <input type=" 
  email 
  " name="email"  
  ng-model 
  ="email"  
  required 
  /> 
 

 
   <div  
  ng-messages 
  ="user.email. 
  $error 
  "> 
 

 
   <div  
  ng-message 
  =" 
  required 
  ">邮件不能为空</div> 
 

 
   <div  
  ng-message 
  =" 
  email 
  ">邮件地址不合法</div> 
 

 
   </div> 
 

 
   <label>用户留言：</label> 
 

 
   <textarea type="text" name="message"  
 

 
  ng-model 
  ="message"

 
   ng-minlength 
  ="10"

 
   ng-maxlength 
  ="20"  
  required 
  ></textarea>

 
   <div  
  ng-messages 
  ="user.message. 
  $error 
  "> 
 

 
   <div  
  ng-message 
  ="required">留言不能为空</div> 
 

 
   <div  
  ng-message 
  ="minlength">留言信息长度不能小于10</div> 
 

 
   <div  
  ng-message 
  ="maxlength">留言信息长度不能超过20</div> 
 

 
   </div> 
 

 
  </form> 
 

 
  <script type="text/javascript"> 
 

 
  angular. 
  module 
  ("formModule",[" 
  ngMessages 
  "]); 
 

 
  </script> 
 

 
  </body> 
 

 
  </html> 
 

 
  -------------------------------------------------------------------------------------------------------------------- 
 

 
  6. 
  ngMessages 
  模块支持错误信息复用，可以把公共的提示信息写在一个单独的error.html文件中，然后再使用 
  ng-messages-include 
  指令引入 
 

 
  ----------------------------------------------------error.html---------------------------------------------------- 
 

 
  <div  
  ng-message 
  =" 
  required 
  ">用户留言不能为空</div> 
 

 
  <div 
   ng-message 
  =" 
  minlength 
  ">留言信息长度不能少于10个字符</div> 
 

 
  <div  
  ng-message 
  =" 
  maxlength 
  ">留言信息长度不能多于100个字符</div> 
 

 
  -------------------------------------------------------------------------------------------------------------------- 
 

 
  <div  
  ng-messages 
  ="exampleForm.userMessages. 
  $error 
  " 
 

 
  ng-messages-include 
  ="errors.html">

 
  </div> 
 

 
  -------------------------------------------------------------------------------------------------------------------- 
 

第七章 AngularJS表单校验

猜你喜欢