【转载】经典的表单验证效果

最新推荐文章于 2024-08-11 18:40:36 发布

李慕华

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量135

点赞数

分类专栏： Web前端文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/yylzyz1990/article/details/84039962

版权

Web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

转自:[url="http://www.cnblogs.com/nyxuwen/archive/2006/12/11/589309.html"]经典的表单验证效果[/url]
验证功能如下:
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;
}[/code]
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;
}[/code]
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
效果截图
[img]http://landroid.iteye.com/upload/picture/pic/99871/b1f660a2-385f-3d9f-b358-4ab8dee34f24.png[/img]
[img]http://landroid.iteye.com/upload/picture/pic/99869/291cb4ef-d139-369d-b680-123f02cc7cd4.png[/img]

李慕华

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【转载】经典的表单验证效果

转自:[url="http://www.cnblogs.com/nyxuwen/archive/2006/12/11/589309.html"]经典的表单验证效果[/url]验证功能如下:1. 当表单输入元素在获得焦点时出现信息提示2. 当表单输入元素在失去焦点时进行验证3. 表单提交时进行整个表单的验证.验证效果如下: 1. 获得...
复制链接

扫一扫

专栏目录