转自:经典的表单验证效果
验证功能如下:
1. 当表单输入元素在获得焦点时出现信息提示
2. 当表单输入元素在失去焦点时进行验证
3. 表单提交时进行整个表单的验证.
验证效果如下:
1. 获得焦点的状态
2. 失去焦点验证失败的样式
3. 失去焦点验证成功的样式
4. 没有输入内容直接单击提交按钮时进行验证的状态
其中包含了两个源文件,一个是checkform.js文件,一个包含了表单html文件
里面有几个重点吧.不过对高手来说是小事一桩了.
1.getElementById
var obj=document.getElementById(_obj.id);
var info=document.getElementById(_obj.id+"info");
获得验证的表单元素,传递的时候使用this,接收过来的自然就是对象了.
2.正则表达式
自已找合适的啦.择日会贴些常用的与大家分享
3.info.innerHTML = "xxxx"
向指定的结点中插入验证状态信息
4.info.style.color = 'blue';
改变指定的样式,如果指定样式的话就使用info.className = "";
5.返回值的使用
[code="javascript"]function checkform(frm){
var refalg=false;
var f1,f2,f3,f4,f5;
f1 = isEmpty(frm.UserName,1)
f2 = isEmail(frm.Email,1,1)
f3 = isEmail(frm.reEmail,0,1)
f4 = isPostCode(frm.PostCode,1)
f5 = isPhone(frm.Tell,1)
refalg = f1 && f2 && f3 && f4 && f5
alert(refalg)
return refalg;
}
js代码
[code="javascript"]/*
验证要求:在表单的失去焦点事件和表单提交时进行验证
表单说明:在表单的旁边应有一个元素存储提示信息,命名为表单元素名+info,同时为验证表单元素指定ID
函数说明:接收表单的元素名称及表单状态(0为获得焦点,1为失去焦点进行验证),将验证的结果插入到表单旁边的ID中
验证过程: 1.接收传表单元素的ID和表单状态,并获取值; 2.拟定正则表达式 3.验证处理
4.反馈处理结果到指定表单旁的区域中.*/
//验证是否为空
function isEmpty(_obj,flag){
var obj = document.getElementById(_obj.id);
var Info = document.getElementById(_obj.id+"Info");
if(flag){
if(obj.value.length == 0){
showInfo(Info,"请输入表单的内容","red")
return false;}
else{
showInfo(Info,"√","green")
return true;}
}
else{
showInfo(Info,"您的表单内容不能为空","blue")
return false;
}
}
//验证邮编,内容非必填字段,如果填写则进行验证
function isPostCode(_obj,flag){
var obj = document.getElementById(_obj.id);
var Info = document.getElementById(_obj.id+"Info");
var reg = /^\d{6}$/;
if(flag){
if(obj.value.length>0){
if(reg.test(obj.value)==false){
showInfo(Info,"请输入6位数字为合法的邮政编码格式!","red")
return false;}
else{
showInfo(Info,"√","green")
return true;}
}
else{
showInfo(Info,"邮编为可选填的内容","black")
return true;}
}
else{
showInfo(Info,"邮编的格式为6位数字","blue")
}
}
//验证电子邮件
//参数:Email表单元素ID,是否有必填,表单状态
function isEmail(_obj,isempty,flag){
var obj = document.getElementById(_obj.id);
var Info = document.getElementById(_obj.id+"Info");
var reg =/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
if (flag){
if(isempty){
if(obj.value == ""){
showInfo(Info,"电子邮件不能为空","red")
return false; }
if (reg.test(obj.value)==false){
showInfo(Info,"电子邮件格式不正确","red")
return false;}
else{
showInfo(Info,"√","green")
return true;}
}
else{
if (obj.value.length>0){
if (reg.test(obj.value)==false){
showInfo(Info,"电子邮件格式不正确","red")
return false;}
else{
showInfo(Info,"√","green")
return true; }
}
else{
showInfo(Info,"如果填写则进行格式验证","black")
return true; }
}
}
else{
showInfo(Info,"电子邮件可以取回密码","blue") }
}
//电话验证:非必填内容
function isPhone(_obj,flag){
var obj=document.getElementById(_obj.id);
var Info=document.getElementById(_obj.id+"Info");
var reg=/(^[0-9]{3,4}\-[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^\([0-9]{3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/;
if(flag){
if(obj.value.length>0){
if(reg.test(obj.value)==false){
showInfo(Info,"电话格式不正确","red")
return false; }
else{
showInfo(Info,"√","green")
return true;
}
}
else{
showInfo(Info,"如填写则进行格式验证","black")
return true;
}
}
else{
showInfo(Info,"如填写则进行格式验证","blue")
}
}
//显示信息
function showInfo(_Info,msg,color){
var Info=_Info;
Info.innerHTML = msg;
Info.style.color=color;
}
HTML代码如下:
==============================我是分割线啊==============================
注:为了保证正确显示,已原js代码中info修改为Info
效果截图
验证功能如下:
1. 当表单输入元素在获得焦点时出现信息提示
2. 当表单输入元素在失去焦点时进行验证
3. 表单提交时进行整个表单的验证.
验证效果如下:
1. 获得焦点的状态
2. 失去焦点验证失败的样式
3. 失去焦点验证成功的样式
4. 没有输入内容直接单击提交按钮时进行验证的状态
其中包含了两个源文件,一个是checkform.js文件,一个包含了表单html文件
里面有几个重点吧.不过对高手来说是小事一桩了.
1.getElementById
var obj=document.getElementById(_obj.id);
var info=document.getElementById(_obj.id+"info");
获得验证的表单元素,传递的时候使用this,接收过来的自然就是对象了.
2.正则表达式
自已找合适的啦.择日会贴些常用的与大家分享
3.info.innerHTML = "xxxx"
向指定的结点中插入验证状态信息
4.info.style.color = 'blue';
改变指定的样式,如果指定样式的话就使用info.className = "";
5.返回值的使用
[code="javascript"]function checkform(frm){
var refalg=false;
var f1,f2,f3,f4,f5;
f1 = isEmpty(frm.UserName,1)
f2 = isEmail(frm.Email,1,1)
f3 = isEmail(frm.reEmail,0,1)
f4 = isPostCode(frm.PostCode,1)
f5 = isPhone(frm.Tell,1)
refalg = f1 && f2 && f3 && f4 && f5
alert(refalg)
return refalg;
}
js代码
[code="javascript"]/*
验证要求:在表单的失去焦点事件和表单提交时进行验证
表单说明:在表单的旁边应有一个元素存储提示信息,命名为表单元素名+info,同时为验证表单元素指定ID
函数说明:接收表单的元素名称及表单状态(0为获得焦点,1为失去焦点进行验证),将验证的结果插入到表单旁边的ID中
验证过程: 1.接收传表单元素的ID和表单状态,并获取值; 2.拟定正则表达式 3.验证处理
4.反馈处理结果到指定表单旁的区域中.*/
//验证是否为空
function isEmpty(_obj,flag){
var obj = document.getElementById(_obj.id);
var Info = document.getElementById(_obj.id+"Info");
if(flag){
if(obj.value.length == 0){
showInfo(Info,"请输入表单的内容","red")
return false;}
else{
showInfo(Info,"√","green")
return true;}
}
else{
showInfo(Info,"您的表单内容不能为空","blue")
return false;
}
}
//验证邮编,内容非必填字段,如果填写则进行验证
function isPostCode(_obj,flag){
var obj = document.getElementById(_obj.id);
var Info = document.getElementById(_obj.id+"Info");
var reg = /^\d{6}$/;
if(flag){
if(obj.value.length>0){
if(reg.test(obj.value)==false){
showInfo(Info,"请输入6位数字为合法的邮政编码格式!","red")
return false;}
else{
showInfo(Info,"√","green")
return true;}
}
else{
showInfo(Info,"邮编为可选填的内容","black")
return true;}
}
else{
showInfo(Info,"邮编的格式为6位数字","blue")
}
}
//验证电子邮件
//参数:Email表单元素ID,是否有必填,表单状态
function isEmail(_obj,isempty,flag){
var obj = document.getElementById(_obj.id);
var Info = document.getElementById(_obj.id+"Info");
var reg =/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
if (flag){
if(isempty){
if(obj.value == ""){
showInfo(Info,"电子邮件不能为空","red")
return false; }
if (reg.test(obj.value)==false){
showInfo(Info,"电子邮件格式不正确","red")
return false;}
else{
showInfo(Info,"√","green")
return true;}
}
else{
if (obj.value.length>0){
if (reg.test(obj.value)==false){
showInfo(Info,"电子邮件格式不正确","red")
return false;}
else{
showInfo(Info,"√","green")
return true; }
}
else{
showInfo(Info,"如果填写则进行格式验证","black")
return true; }
}
}
else{
showInfo(Info,"电子邮件可以取回密码","blue") }
}
//电话验证:非必填内容
function isPhone(_obj,flag){
var obj=document.getElementById(_obj.id);
var Info=document.getElementById(_obj.id+"Info");
var reg=/(^[0-9]{3,4}\-[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^\([0-9]{3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/;
if(flag){
if(obj.value.length>0){
if(reg.test(obj.value)==false){
showInfo(Info,"电话格式不正确","red")
return false; }
else{
showInfo(Info,"√","green")
return true;
}
}
else{
showInfo(Info,"如填写则进行格式验证","black")
return true;
}
}
else{
showInfo(Info,"如填写则进行格式验证","blue")
}
}
//显示信息
function showInfo(_Info,msg,color){
var Info=_Info;
Info.innerHTML = msg;
Info.style.color=color;
}
HTML代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>表单验证实例</title> <script language="javascript" src="checkform.js"></script> <style> body { text-align:center; font-size:14px;} table {border:1px solid #CCCCCC;width:80%; text-align:left;} input { line-height:20px; border:1px solid #000000;} td { height:20px; padding:4px;} .right{ text-align:right;} .title{ font-size:14px; background-color:#CCCCCC; font-weight:bold; height:20px;} </style> <script language="javascript"> function checkform(frm){ var refalg=false; var f1,f2,f3,f4,f5; f1 = isEmpty(frm.UserName,1) f2 = isEmail(frm.Email,1,1) f3 = isEmail(frm.reEmail,0,1) f4 = isPostCode(frm.PostCode,1) f5 = isPhone(frm.Tell,1) refalg = f1 && f2 && f3 && f4 && f5 alert(refalg) return refalg; } </script> </head> <body> <form id="form1" name="form1" method="post" onsubmit="return checkform(this)" action="http://www.91160.com/"> <table> <tr align="center"><td colspan="3" class="title">表单验证示例</td></tr> <tr><td width="15%">用户名</td><td width="30%"> <input type="text" name="UserName" id="UserName" onfocus="isEmpty(this,0)" onblur="isEmpty(this,1)" /></td> <td id="UserNameInfo">验证用户名不能空值</td> </tr> <tr><td>电子邮件</td><td><input type="text" name="Email" id="Email" onfocus="isEmail(this,1,0)" onblur="isEmail(this,1,1)"/></td> <td id="EmailInfo">对电子邮件进行非空和格式验证</td> </tr> <tr><td>备用邮件</td><td><input type="text" name="reEmail" id="reEmail" onfocus="isEmail(this,0,0)" onblur="isEmail(this,0,1)"/></td> <td id="reEmailInfo">如果填写则进行格式验证</td> </tr> <tr><td>邮编</td><td><input type="text" name="PostCode" id="PostCode" onfocus="isPostCode(this,0)" onblur="isPostCode(this,1)" /></td> <td id="PostCodeInfo">邮编如果填写则进行验证</td> </tr> <tr><td>电话</td><td><input type="text" name="Tell" id="Tell" onfocus="isPhone(this,0)" onblur="isPhone(this,1)" /></td> <td id="TellInfo">如填写则进行格式验证</td> </tr> <tr> <td colspan="3" class="right"> <input type="submit" name="Submit" value="提交" /> <input type="reset" name="canter" value="重置" /></td></tr> </table> </form> </body></html>
==============================我是分割线啊==============================
注:为了保证正确显示,已原js代码中info修改为Info
效果截图
相关推荐
漂亮的表单验证效果
表单验证大全表单验证大全表单验证大全表单验证大全表单验证大全
js表单验证大全js表单验证大全js表单验证大全
更多相关jQuery滑动滑动效果表单表单验证 所属专题:表单验证
很美观,界面很友好的html5+css3表单验证效果。类似于留言版
js验证表单提示效果(css+jquery)
C# 可以验证表单,密码,等也可以验证姓名?
编写基于Jquery的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库,可用于在网页上进行各种操作,包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分:FrontPage.html、write....
jquery表单验证插件
jQuery表单验证jQuery表单验证jQuery表单验证jQuery表单验证jQuery表单验证jQuery表单验证jQuery表单验证
全网最全的 表单验证, js表单验证,form表单验证,前端验证,简介验证 email URL 登陆验证
1、验证插件支持正则表达式验证,函数验证,ajax异步验证,支持对比验证,并支持对表单的自定义属性或指定属性进行验证,应该足矣满足常用软件及网站开发需求。(可根据自己需求,手动添加验证方式) 2、插件支持...
网上常见的用JS编写的注册表单验证的代码,非常实用哦
jQuery-Validation-Engine-master 表单验证插件 简单好用,已经包含汉化
表单的验证一直是网页设计者头痛的问题,表单验证类 Validator就是为解决这个问题而写的,旨在使设计者从纷繁复杂的表单验证中解放出来,把精力集中于网页的设计和功能上的改进上。 Validator是基于JavaScript技术...
笨阿猪高级表单验证笨阿猪高级表单验证笨阿猪高级表单验证
jquery表单验证实例网站会员注册表单验证提交form表单代码
JavaScript表单验证 JavaScript表单验证 JavaScript表单验证
javascript很好很强大的JS表单验证 javascript很好很强大的JS表单验证
网页表单验证效果代码 效果非常好看的验证效果