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

  大多数的语言,在实际开发中都具有封装性的特点。那么为了保证验证的完整性,应该有一个专门的工具文件—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

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="description" content=event.html"">
<meta name="keywords" content="event,html,js">
<body>
<h1>表单验证通过!</h1>
</body>
</html>

表单文件:form.html

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="description" content=event.html"">
<meta name="keywords" content="event,html,js">
<title>javascript的程序开发之表单提交事件处理</title> <link rel="stylesheet" type="text/css" href="form.css"> //导入样式文件
<script type="text/javascript" src="utlity.js"></script> //导入工具文件
<script type="text/javascript" src="vform.js"></script> //导入表单操作文件 </head>
<body>
<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>
</body>
</html>

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

/*成功*/
.success{
background:#f5f5f5;
font-weight:bold;
color:#000000;
border:solid 1px #009900; /*边框为绿色*/
} /*失败*/
.failure{
background:#f5f5f5;
font-weight:bold;
color:#000000;
border:solid 1px #990000; /*边框为红色*/
} /*初始化*/
.init{
background:#f5f5f5;
font-weight:bold;
color:#000000;
}

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

window.onload = function(){  //在页面加载之后动态事件绑定
document.getElementById("uid").addEventListener('blur',function(){
validateUid();
},false); document.getElementById("password").addEventListener('blur',function(){
validatePassword();
},false); document.getElementById("conf").addEventListener('blur',function(){
validateConf();
},false); document.getElementById('loginForm').addEventListener('submit',function(e){ //e是提交事件
if( validateUid() && validatePassword() && validateConf()){ //可以提交
this.submit();
}else{
formStop(e); //传入事件
}
},false);
} function validateUid(){ //专门验证uid数据
// return validateEmpty("uid"); //空的验证
return validateEmail("uid"); //邮箱的验证
// return validateNumber("uid"); //数字的验证
} function validatePassword(){ //专门验证password数据
return validateEmpty("password"); //传入元素名称
} function validateConf(){
return validateRepeat("password","conf");//传入原密码和确实密码的id
} /**
它负责表单在出现问题时进行提交
*/
function formStop(e){
if (e && e.preventDefault) { //现在是在W3C标准下执行
e.preventDefault(); //阻止浏览器的动作
}else{ //专门针对于IE浏览器的处理
window.event.returnValue= false;
}
}

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

/**
本文件是一个JS工具文件,里面提供有一系列的属性、函数、类。
*/ /**
本方法主要验证指定的元素的内容是否为空
*/
function validateEmpty(eleId){
var obj = document.getElementById(eleId);//取得一个表单元素
if(obj != undefined){
if(obj.value == ""){ //数据错误
setFailureStyle(obj);
return false; //表示验证失败
}else{
setSuccessStyle(obj);
return true; //验证成功
}
}
return false;
} /**
本方法主要验证指定的元素的内容进行正则验证
*/
function validateRegex(eleId,regex){ //从外部传入正则
if(validateEmpty(eleId)){ //进行是否为空的验证
var obj = document.getElementById(eleId);//取得一个表单元素
if(!regex.test(obj.value)){ //数据错误
setFailureStyle(obj);
return false; //表示验证失败
}else{
setSuccessStyle(obj);
return true; //验证成功
}
}
return false;
} /**
在正则的基础上验证邮箱
*/
function validateEmail(eleId){
return validateRegex(eleId,/^\w+@\w+\.\w+$/);
} /**
验证是否全部是数字
*/
function validateNumber(eleId){
return validateRegex(eleId,/^\d+(\.\d)?$/);
} /**
验证确认密码
*/
function validateRepeat(srcId,distId){ //初始密码的id,确认密码的id
if(validateEmpty(srcId) && validateEmpty(distId)){
var srcObj = document.getElementById(srcId);
var distObj = document.getElementById(distId);
if(srcObj.value != distObj.value){ //失败
setFailureStyle(distObj);
return false; //表示验证失败
}else{ //成功
setSuccessStyle(distObj);
return true; //验证成功
}
}
return false;
} /**
设置错误的样式
*/
function setFailureStyle(obj){ obj.className = "failure"; //设置错误的样式
var spanObj = document.getElementById(obj.id+"Span"); //取得提示信息元素
if(spanObj != null){
spanObj.innerHTML = "<font color='red'>×</font>";
}
} /**
设置正确的样式
*/
function setSuccessStyle(obj){ obj.className = "success"; //设置正确的样式
var spanObj = document.getElementById(obj.id+"Span"); //取得提示信息元素
if(spanObj != null){
spanObj.innerHTML = "<font color='green'>√</font>";
}
}

效果截图如下:

表单默认状态样式:

任意数据为空时样式 :

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

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

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

最后提交表单成功:

最新文章

  1. Altium Designer 的entry sheet ,offsheet和port作用(转载)
  2. LeetCode:N-Queens I II(n皇后问题)
  3. 《CODE》读后笔记——第1~13章
  4. “Ceph浅析”系列之五——Ceph的工作原理及流程
  5. iOS frame从导航栏下面开始
  6. httpclient访问网站时设置Accept-Encoding为gzip,deflate返回的结果为乱码的问题
  7. 【leetcode】Subsets II
  8. CANBus Determining Network Baud Rate, Automatic bit-rate detection
  9. 使用JS截取字符串函数详解
  10. struts2 0day漏洞
  11. Robot Framework语法学习(一)
  12. org.apache.solr.client.solrj.impl.HttpSolrServer$RemoteSolrException: Internal Server Error 错误
  13. linux权限---【600,644,700,755,711,666,777】 - - 博客频道 - CSDN.NET
  14. MySQL自增长的bug?
  15. 201521123020《Java程序设计》第2周学习总结
  16. Leetcode题解(十三)
  17. chrome浏览器使用技巧
  18. Linux中挂载Windows共享出来的目录
  19. gcc 8.2.1 / MCF thread 简介
  20. WordPress UpdraftPlus插件 Google Drive 备份

热门文章

  1. Python的单元测试(一)
  2. CSS网页布局全精通
  3. 记一次PHP“Segmentation fault”调试经历
  4. Begin using git (Part1) - Git的安装与配置
  5. javascript library
  6. aws linuxbrew GLIBC_PRIVATE not defined in file ld-linux-x86-64.so.2
  7. dll文件已经引用,但using找不到命名空间
  8. 面向对象程序设计-C++_课时18内联函数
  9. zend studio 10 实现代码自动换行
  10. Mybatis源码分析--关联表查询及延迟加载原理(二)
  11. .net第四章内容总结
  12. 使用Browser请求 和 在cli中运行程序的分析
  13. windows下如何安装pip以及如何查看pip是否已经安装成功
  14. input text 只能输入数字
  15. Java枚举的下标值
  16. error MSB6006: &quot;CL.exe&quot; exited with code -1073741819.
  17. Egret P2 入门学习资料
  18. centos7下的防火墙
  19. 最近公共祖先 lca (施工ing)
  20. #20155319 2016-2017-2 《Java程序设计》第3周学习总结