之前做的验证提示以弹框的形式出现太丑陋了，不符合标准的验证提示。如果要想进行更好的数据验证操作，那么必须进行一些模块化设计，通过表单样式的改变来提示。其实，一般的数据验证无非就是那么几种，例如：

　　大多数的语言，在实际开发中都具有封装性的特点。那么为了保证验证的完整性，应该有一个专门的工具文件—utlity.js文件，实际上是也就是建立一个表单验证模型，模型化操作。一般的验证提示规划格式如下：

　例如表单代码格式：

　　　<form action="pass.html" method="post" id="loginForm">

　　　　　　<!--在以后的开发过程之中，必须要保证id与name属性内容完全一致，否则会出现怪异问题-->

　　　　　　用&nbsp;户&nbsp;名：<input type="text" name="uid" id="uid" class="init"></input><span id="uidSpan"></span><br>

　　　　　　初始密码：<input type="text" name="password" id="password" class="init"></input><span id="passwordSpan"></span><br>

　　　　　　确认密码：<input type="text" name="conf" id="conf" class="init"></input><span id="confSpan"></span><br>

　　　　　　<button type="submit" id="subBtn">登录</button>

　　　　　　<button type="reset" id="restBtn">重置</button>

　　　</form>

好了，这些表单的id设置好了后，我们只需要在utlity.js工具文件中进行数据的验证。那么如何调用这个工具来进行验证呢？即流程大致如下：

对于验证而言，往往是发生在一个组件失去焦点后，表单样式发生改变。失去焦点为”onblur”事件，而获得焦点为“onfocus”。

完整的范例代码如下：

表单通过提示文件：pass.html

  1. <!doctype html>
  2. <html lang="zh-CN">
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta name="description" content=event.html"">
  6.         <meta name="keywords" content="event,html,js">
  7.     <body>
  8.         <h1>表单验证通过！</h1>
  9.     </body>
  10. </html>

表单文件：form.html

  1. <!doctype html>
  2. <html lang="zh-CN">
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta name="description" content=event.html"">
  6.         <meta name="keywords" content="event,html,js">
  7.         <title>javascript的程序开发之表单提交事件处理</title>
  8.  
  9.         <link rel="stylesheet" type="text/css" href="form.css">  //导入样式文件
  10.         <script type="text/javascript" src="utlity.js"></script> //导入工具文件
  11.         <script type="text/javascript" src="vform.js"></script> //导入表单操作文件
  12.  
  13.     </head>
  14.     <body>
  15.         <form action="pass.html" method="post" id="loginForm">
  16.             <!--在以后的开发过程之中，必须要保证id与name属性内容完全一致，否则会出现怪异问题-->
  17.             用&nbsp;户&nbsp;名：<input type="text" name="uid" id="uid" class="init"></input><span id="uidSpan"></span><br>
  18.             初始密码：<input type="text" name="password" id="password" class="init"></input><span id="passwordSpan"></span><br>
  19.             确认密码：<input type="text" name="conf" id="conf" class="init"></input><span id="confSpan"></span><br>
  20.             <button type="submit" id="subBtn">登录</button>
  21.             <button type="reset" id="restBtn">重置</button>
  22.         </form>
  23.     </body>
  24. </html>

表单提交初始、提交失败、提交成功时样式设置文件：form.css

  1. /*成功*/
  2. .success{
  3.     background:#f5f5f5;
  4.     font-weight:bold;
  5.     color:#000000;
  6.     border:solid 1px #009900; /*边框为绿色*/
  7. }
  8.  
  9. /*失败*/
  10. .failure{
  11.     background:#f5f5f5;
  12.     font-weight:bold;
  13.     color:#000000;
  14.     border:solid 1px #990000; /*边框为红色*/
  15. }
  16.  
  17. /*初始化*/
  18. .init{
  19.     background:#f5f5f5;
  20.     font-weight:bold;
  21.     color:#000000;
  22. }

表单提交操作文件，动态绑定事件处理：vfrom.js

  1. window.onload = function(){  //在页面加载之后动态事件绑定
  2.     document.getElementById("uid").addEventListener('blur',function(){
  3.         validateUid();
  4.     },false);
  5.  
  6.     document.getElementById("password").addEventListener('blur',function(){
  7.         validatePassword();
  8.     },false);
  9.  
  10.     document.getElementById("conf").addEventListener('blur',function(){
  11.         validateConf();
  12.     },false);
  13.  
  14.     document.getElementById('loginForm').addEventListener('submit',function(e){ //e是提交事件
  15.         if( validateUid() && validatePassword() && validateConf()){ //可以提交
  16.             this.submit();
  17.         }else{
  18.             formStop(e); //传入事件
  19.         }
  20.     },false);
  21. }
  22.  
  23. function validateUid(){  //专门验证uid数据
  24.     // return validateEmpty("uid");  //空的验证
  25.      return validateEmail("uid");  //邮箱的验证
  26.     // return validateNumber("uid");    //数字的验证
  27. }
  28.  
  29. function validatePassword(){  //专门验证password数据
  30.     return validateEmpty("password"); //传入元素名称
  31. }
  32.  
  33. function validateConf(){
  34.     return validateRepeat("password","conf");//传入原密码和确实密码的id
  35. }
  36.  
  37. /**
  38.  它负责表单在出现问题时进行提交
  39. */
  40. function formStop(e){
  41.     if (e && e.preventDefault) { //现在是在W3C标准下执行
  42.         e.preventDefault(); //阻止浏览器的动作
  43.     }else{  //专门针对于IE浏览器的处理
  44.         window.event.returnValue= false;
  45.     }
  46. }

表单提交操作的工具文件：utility.js

  1. /**
  2.     本文件是一个JS工具文件，里面提供有一系列的属性、函数、类。
  3. */
  4.  
  5. /**
  6.     本方法主要验证指定的元素的内容是否为空
  7. */
  8. function validateEmpty(eleId){
  9.     var obj = document.getElementById(eleId);//取得一个表单元素
  10.     if(obj != undefined){
  11.         if(obj.value == ""){  //数据错误
  12.             setFailureStyle(obj);
  13.             return false; //表示验证失败
  14.         }else{
  15.             setSuccessStyle(obj);
  16.             return true; //验证成功
  17.         }
  18.     }
  19.     return false;
  20. }
  21.  
  22. /**
  23.     本方法主要验证指定的元素的内容进行正则验证
  24. */
  25. function validateRegex(eleId,regex){ //从外部传入正则
  26.     if(validateEmpty(eleId)){  //进行是否为空的验证
  27.         var obj = document.getElementById(eleId);//取得一个表单元素
  28.         if(!regex.test(obj.value)){  //数据错误
  29.             setFailureStyle(obj);
  30.             return false; //表示验证失败
  31.         }else{
  32.             setSuccessStyle(obj);
  33.             return true; //验证成功
  34.         }
  35.     }
  36.     return false;
  37. }
  38.  
  39. /**
  40.     在正则的基础上验证邮箱
  41. */
  42. function validateEmail(eleId){
  43.     return validateRegex(eleId,/^\w+@\w+\.\w+$/);
  44. }
  45.  
  46. /**
  47.     验证是否全部是数字
  48. */
  49. function validateNumber(eleId){
  50.     return validateRegex(eleId,/^\d+(\.\d)?$/);
  51. }
  52.  
  53. /**
  54.     验证确认密码
  55. */
  56. function validateRepeat(srcId,distId){ //初始密码的id，确认密码的id
  57.     if(validateEmpty(srcId) && validateEmpty(distId)){
  58.         var srcObj = document.getElementById(srcId);
  59.         var distObj = document.getElementById(distId);
  60.         if(srcObj.value != distObj.value){ //失败
  61.             setFailureStyle(distObj);
  62.             return false; //表示验证失败
  63.         }else{ //成功
  64.             setSuccessStyle(distObj);
  65.             return true; //验证成功
  66.         }
  67.     }
  68.     return false;
  69. }
  70.  
  71. /**
  72.     设置错误的样式
  73. */
  74. function setFailureStyle(obj){
  75.  
  76.     obj.className = "failure"; //设置错误的样式
  77.     var spanObj = document.getElementById(obj.id+"Span"); //取得提示信息元素
  78.     if(spanObj != null){
  79.         spanObj.innerHTML = "<font color='red'>×</font>";
  80.     }
  81. }
  82.  
  83. /**
  84.     设置正确的样式
  85. */
  86. function setSuccessStyle(obj){
  87.  
  88.     obj.className = "success"; //设置正确的样式
  89.     var spanObj = document.getElementById(obj.id+"Span"); //取得提示信息元素
  90.     if(spanObj != null){
  91.         spanObj.innerHTML = "<font color='green'>√</font>";
  92.     }
  93. }

效果截图如下：

表单默认状态样式：

任意数据为空时样式 ：

用户名为邮箱格式正确时样式：

初始密码和确认密码不一致时样式：

用户名为邮箱格式正确、初始密码和确认密码一致时样式：

最后提交表单成功：

JavaScript：表单验证模型的更多相关文章

  1. JavaScript表单验证年龄

    JavaScript表单验证年龄,判断一个输入量是否符合年龄,通过正则表达式实现. //检查年龄 function isAge(str){ var mydate=new Date; var now=m ...

  2. 前端工具 - 15个最佳的 JavaScript 表单验证库

    客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...

  3. JavaScript表单验证和正则表达式

    JavaScript表单验证 分为四类: 1.非空验证 常用于用户名等 2.相等验证 常用于验证两次输入的密码 3.范围验证 常用于年龄等 4.正则验证 用于手机号,邮箱号等 以下是实例: <! ...

  4. 15个最佳的 JavaScript 表单验证库

    客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...

  5. JavaScript 表单验证入门

    JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 被 JavaScript 验证的这些典型的表单数据有: 用户是否已填写表单 ...

  6. JavaScript 表单验证 案例

    JavaScript 表单验证 案例 版权声明:未经授权,严禁转载!   编写 HTML 文件,搭建主体界面 <html> <head> <meta charset=&q ...

  7. 10个强大的Javascript表单验证插件推荐

    创建一个JavaScript表单验证插件,可以说是一个繁琐的过程,涉及到初期设计.开发与测试等等环节.实际上一个优秀的程序员不仅是技术高手,也应该是善假于外物的.本文介绍了10个不错的JavaScri ...

  8. JavaScript 表单验证正则表达式大全

    JavaScript 表单验证正则表达式大全[转载] 匹配中文字符的正则表达式: [u4e00-u9fa5] 评注:匹配中文还真是个头疼的事,有了这个表达式就好办了 匹配双字节字符(包括汉字在内):[ ...

  9. javascript表单验证

    表单HTML <form action="" method="post"> <fieldset class="login" ...

随机推荐

  1. FreeBSD Intel SYSRET Kernel Privilege Escalation Exploit

    /* * FreeBSD 9.0 Intel SYSRET Kernel Privilege Escalation exploit * Author by CurcolHekerLink * * Th ...

  2. Html - SPA页面收集（有图）

    场景,左图,又字段的布局 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  3. extjs Combobox动态加载数据问题,mode:local 还是remote

    var fabircTypeDs = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({ url: 'province.do' }), reade ...

  4. Java集合之Map接口

    Map使用键值对来存储数据,将键映射到值对象,一个映射不能包含重复的键,每一个键最多只能映射到一个值.Map接口的具体实现类:HashMap,Hashtable,TreeMap,LinkedHashM ...

  5. iOS dispatch_source_t的理解

    Dispatch Source是GCD中的一个基本类型,从字面意思可称为调度源,它的作用是当有一些特定的较底层的系统事件发生时,调度源会捕捉到这些事件,然后可以做其他的逻辑处理,调度源有多种类型,分别 ...

  6. Apache Spark源码走读之18 -- 使用Intellij idea调试Spark源码

    欢迎转载,转载请注明出处,徽沪一郎. 概要 上篇博文讲述了如何通过修改源码来查看调用堆栈,尽管也很实用,但每修改一次都需要编译,花费的时间不少,效率不高,而且属于侵入性的修改,不优雅.本篇讲述如何使用 ...

  7. p4-hlir/test源码 stateful.p4 control_flow_opt.p4

    stateful.p4 #include "includes/headers.p4" #include "includes/parser.p4" action ...

  8. SSH服务器拒绝了密码 请再试一次

    应该是sshd的设置不允许root用户用密码远程登录. 修改: vim /etc/ssh/sshd_config 找到: # Authentication:LoginGraceTime 120Perm ...

  9. ECSHOP二次开发指南

    ECSHOP二次开发指南 发布时间:2013-05-28 12:47:00   来源:   评论:0 点击: 次 [字号:大 中 小] QQ空间新浪微博腾讯微博人人网豆瓣网百度空间百度搜藏开心网复制更 ...

  10. ICON文件保存

    这两天想做一下windows系统下图标的修改,让程序有更新的时候能够更新图标的外观,达到提醒的作用,360,QQ经常采用这种方式进行更新的提示,也有采用弹框的方式来提示,用新版QVOD的同事可能见到过 ...