JavaScript：表单验证模型
之前做的验证提示以弹框的形式出现太丑陋了，不符合标准的验证提示。如果要想进行更好的数据验证操作，那么必须进行一些模块化设计，通过表单样式的改变来提示。其实，一般的数据验证无非就是那么几种，例如：
大多数的语言，在实际开发中都具有封装性的特点。那么为了保证验证的完整性，应该有一个专门的工具文件—utlity.js文件，实际上是也就是建立一个表单验证模型，模型化操作。一般的验证提示规划格式如下：
例如表单代码格式：
<form action="pass.html" method="post" id="loginForm">
<!--在以后的开发过程之中，必须要保证id与name属性内容完全一致，否则会出现怪异问题-->
用 户 名：<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属性内容完全一致，否则会出现怪异问题-->
用 户 名：<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>";
}
}
效果截图如下：
表单默认状态样式：
任意数据为空时样式 ：
用户名为邮箱格式正确时样式：
初始密码和确认密码不一致时样式：
用户名为邮箱格式正确、初始密码和确认密码一致时样式：
最后提交表单成功：
JavaScript：表单验证模型的更多相关文章
- JavaScript表单验证年龄
JavaScript表单验证年龄,判断一个输入量是否符合年龄,通过正则表达式实现. //检查年龄 function isAge(str){ var mydate=new Date; var now=m ...
- 前端工具 - 15个最佳的 JavaScript 表单验证库
客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...
- JavaScript表单验证和正则表达式
JavaScript表单验证 分为四类: 1.非空验证 常用于用户名等 2.相等验证 常用于验证两次输入的密码 3.范围验证 常用于年龄等 4.正则验证 用于手机号,邮箱号等 以下是实例: <! ...
- 15个最佳的 JavaScript 表单验证库
客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...
- JavaScript 表单验证入门
JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 被 JavaScript 验证的这些典型的表单数据有: 用户是否已填写表单 ...
- JavaScript 表单验证 案例
JavaScript 表单验证 案例 版权声明:未经授权,严禁转载! 编写 HTML 文件,搭建主体界面 <html> <head> <meta charset=&q ...
- 10个强大的Javascript表单验证插件推荐
创建一个JavaScript表单验证插件,可以说是一个繁琐的过程,涉及到初期设计.开发与测试等等环节.实际上一个优秀的程序员不仅是技术高手,也应该是善假于外物的.本文介绍了10个不错的JavaScri ...
- JavaScript 表单验证正则表达式大全
JavaScript 表单验证正则表达式大全[转载] 匹配中文字符的正则表达式: [u4e00-u9fa5] 评注:匹配中文还真是个头疼的事,有了这个表达式就好办了 匹配双字节字符(包括汉字在内):[ ...
- javascript表单验证
表单HTML <form action="" method="post"> <fieldset class="login" ...
随机推荐
- 点击repeater的一个修改事件触发全部repeater每一行的修改事件
<td align="center"> <asp:LinkButton ID ="btnvip&q ...
- easyui datagrid分页要点总结
easyui的datagird插件比较好用,也很方便.网上也有很多热的网友贴出了使用代码,但是很少有网友指出在使用过程应该注意的地方,让我实在搞不清分页应该怎么使用.我就说下使用分页功能中要注意的一个 ...
- C++ and Java template class and function 模板类和模板函数
在C++和Java的泛式编程中,模板template的使用是必不可少的,但是Java中没有template关键字,所以两者的写法还是有些许区别的,请参见如下代码: Java的模板 // Java pu ...
- 记一本关于thinkphp&&MVC的好书
看过好多书,写thinkphp就蜻蜓点水般,而且语言比较书面.看到了李开涌写的php mvc开发实战.他本人是技术方面的专家,写的书结合了对技术的理解.我读起来感觉收获颇多.比如model这块,我一直 ...
- Html - Bootstrap Panel面板
http://v3.bootcss.com/components/#panels Bootstrap Panel面板 <div class="panel panel-default&q ...
- SQLHelper 简介
什么是SQLHelper SqlHelper是一个基于.NETFramework的数据库操作组件.组件中包含数据库操作方法,目前SqlHelper有很多版本,主要以微软一开始发布的SqlHelper类 ...
- 获取文本文件的第N行内容
在PowerShell中,可以通过Get-Content这个cmdlet来获取文本文件的内容.Get-Content将一个文本文件读取到一个数组中,每一个数组元素就是文件的一行内容.比如一个文本文件内 ...
- Maven 私有库 Nexus的安装
1.下载 Nexus下载地址:http://www.sonatype.org/nexus/go/ # wget https://sonatype-download.global.ssl.fastly. ...
- poj 2186 tarjan求强连通分量
蕾姐讲过的例题..玩了两天后才想起来做 貌似省赛之后确实变得好懒了...再努力两天就可以去北京玩了! 顺便借这个题记录一下求强连通分量的算法 1 只需要一次dfs 依靠stack来实现的tarjan算 ...
- NV Maxwell architecture
按照NVIDIA的路线图来看,GTX 600以及GTX 700系列所采用的Kepler架构已经垂垂老矣,最早在明年第一季度,其继任者Maxwell架构可能就会和我们正式见面了.目前外媒已经放出了关于M ...