应用HTML5的表单认证的简易示例

日期:2021-01-19 类型:科技新闻 

关键词:网站建设,创建网站,免费建站平台,智能建站,企业建网站

HTML5对表模块素出示了patern特性,它接纳1个正则表达式表述式。表单递交时这个正则表达式表述式会被用于认证表单内非空的值,假如控制的值不配对这个正则表达式表述就会弹出提醒框,并阻拦表述递交。提醒框内的文本可使用setCustomValidity方式来自定。
  例如下面这个表单内,文字框只接纳大陆的手机上号,键入其它物品就没法递交
运作

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <form>  
  3.   <input id="text" pattern="^1[3⑼]\d{9}$" required />  
  4.   <input id="button" type="submit" />  
  5. </form>  

  留意仅有非空的表单才会应用正则表达式认证,假如甚么都不键入的话,pattern不容易被应用,因此还必须required帮助。可是这个编码弹出的提醒是这样的:

这样的提醒文本仅有小猴子看得懂!因此大家还必须更友善的提醒文本,应用setCustomValidity方式来界定。
运作

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <form>  
  3.   <input id="text" pattern="^1[3⑼]\d{9}$" required />  
  4.   <input id="button" type="submit" />  
  5. </form>  
  6. <script>  
  7. text.oninput=function(){   
  8.   text.setCustomValidity("");   
  9. };   
  10. text.oninvalid=function(){   
  11.   text.setCustomValidity("请不必键入火花的手机上号好吗?");   
  12. };   
  13. </script>  

invalid恶性事件会在表单submit恶性事件以前开启,假如认证堵塞过的话就不容易开启表单的submit。而递交时会先认证全部表模块素是值是不是合理。除递交外还能够手动式启用checkValidity方式来实行认证。
  上面的事例中我立即对控制设定固定不动的提醒实际上不大好,有时将会必须更详尽的提醒信息内容,例如空的情况下提醒为空、过长的情况下提醒过长、非数据的情况下提醒非数据等。这些姿势能够根据程序流程认证后动态性地setCustomValidity来完成。
  实际上我感觉HTML5的这套API设计方案的很不尽人意,尽管能够考虑基础要求,但还真不太好用。

手机上网页页面中表单递交用JavaScript认证信息内容 会弹出对话框,客户体验极差,因此再得出1个手机上端用HTML5的特性来认证的示例:

XML/HTML Code拷贝內容到剪贴板
  1. <input id="name" name="name" placeholder="name" required="" tabindex="1" type="text">    
  2. <input id="email" name="email" placeholder="telephone" required="" tabindex="2" type="text" pattern="(^(\d{3,4}-)?\d{7,8})$|^(13|15|18|14)\d{9}$">    
  3. <input id="subject" name="subject" placeholder="example" required="" tabindex="2" type="text">    
  4.  // 关键用了HTML的1属下性   
  5. // 1.placeholder 出示可叙述键入字段预期值的提醒信息内容。 该提醒会在键入字段为空时显示信息,并会在字段获   
  6. //得聚焦点时消退   
  7. //2.required 特性要求必须在递交以前填写键入字段   
  8. //3.pattern  是正则表达式表述式,  里边能够立即填写正则表达式表述式  

上一篇:Html5完成2维码扫描仪并分析 返回下一篇:没有了