验证功能如下:<o:p></o:p>
1. 当表单输入元素在获得焦点时出现信息提示
2. 当表单输入元素在失去焦点时进行验证
3. 表单提交时进行整个表单的验证.
<o:p></o:p>
验证效果如下:
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.返回值的使用
代码感觉太长了,又不知道如何插入附件,只能是这样子了,供大家参考和改进
1function checkform(frm){ 2 var refalg=false;
3 var f1,f2,f3,f4,f5;
4 f1 = isEmpty(frm.UserName,1)
5 f2 = isEmail(frm.Email,1,1)
6 f3 = isEmail(frm.reEmail,0,1)
7 f4 = isPostCode(frm.PostCode,1)
8 f5 = isPhone(frm.Tell,1)
9 refalg = f1 && f2 && f3 && f4 && f5
10 alert(refalg)
11 return refalg;
12}
3 var f1,f2,f3,f4,f5;
4 f1 = isEmpty(frm.UserName,1)
5 f2 = isEmail(frm.Email,1,1)
6 f3 = isEmail(frm.reEmail,0,1)
7 f4 = isPostCode(frm.PostCode,1)
8 f5 = isPhone(frm.Tell,1)
9 refalg = f1 && f2 && f3 && f4 && f5
10 alert(refalg)
11 return refalg;
12}
js文件代码如下:
/*
验证要求:在表单的失去焦点事件和表单提交时进行验证
表单说明:在表单的旁边应有一个元素存储提示信息,命名为表单元素名+info,同时为验证表单元素指定ID
函数说明:接收表单的元素名称及表单状态(0为获得焦点,1为失去焦点进行验证),将验证的结果插入到表单旁边的ID中
验证过程: 1.接收传表单元素的ID和表单状态,并获取值; 2.拟定正则表达式 3.验证处理
4.反馈处理结果到指定表单旁的区域中.*/
//验证是否为空
function isEmpty(_obj,flag)
验证要求:在表单的失去焦点事件和表单提交时进行验证
表单说明:在表单的旁边应有一个元素存储提示信息,命名为表单元素名+info,同时为验证表单元素指定ID
函数说明:接收表单的元素名称及表单状态(0为获得焦点,1为失去焦点进行验证),将验证的结果插入到表单旁边的ID中
验证过程: 1.接收传表单元素的ID和表单状态,并获取值; 2.拟定正则表达式 3.验证处理
4.反馈处理结果到指定表单旁的区域中.*/
//验证是否为空
function isEmpty(_obj,flag)
相关推荐
2<br><br>0003 设置程序代码行序号 3<br><br>0004 开发环境全屏显示 3<br><br>0005 设置窗口的自动隐藏功能 3<br><br>0006 根据需要创建所需解决方案 4<br><br>0007 如何使用“验证的目标架构”功能 4<br>...
<tr><td><a href="5.3/thickbox.html">5.3灯箱效果</a></td></tr> <tr><td><a href="5.4/chatroom.html">5.4聊天室</a></td></tr> <tr><td class="item">第六章 自动及定时业务</td></tr> <tr><td><a href="6.1/auto...
1.EXE 注册表单验证实例演示<br>3-2.EXE 购物车实例演示<br>3-3.EXE 产品快速检索实例演示<br>3-4.EXE 系列产品特性速查实例演示<br>3-5.EXE 邮件订阅实例演示<br>3-6.EXE 产品评级实例演示<br>4-1.EXE 简单计算器...
<br>注册,登陆,添加联系人,按类别查找联系人,删除联系人,登出<br>表单输入使用validate框架验证,权限管理使用 Filter+action拦截器,页面自动刷新跳转效果,声明式事务管理,include方式的模板管理,视图显示...
漂亮的表单验证效果
先给大家展示下表单效果图,具体效果如下所示: 1.前台一开始用JQuery实现,先来上HTML标记: <body> <form id=form1 runat=server> <table class=tble> <tr><td class=td1>用户名 <input type=...
在实际使用中经常会遇到需要在Form表单中使用table表格进行表单提交,同时又需要对table的字段进行校验,效果如图所示: 这个校验中,最关键的问题在于如何给el-form-item 动态绑定prop。 :prop=”‘tableData.’ +...
今天继续学习Web表单相关的内容,不过今天重点落实到实战中,利用HTML5表单与CSS3-UI实现一款不错的表单效果。 效果可看下面动图: ... <label for=tel>Tel:</label> <input type=tel required na
更多相关jQuery滑动滑动效果表单表单验证 所属专题:表单验证
js验证表单提示效果(css+jquery)
文章分布、趣味游戏使用<script>进行表单验证和动态内容修改。整个网页均使用了css,来完成本网页页面效果。 三、作业总结 此次的网页制作是对我们学习内容的一次检验。我对开发环境并不是很熟悉,在以前的学习中也...
很美观,界面很友好的html5+css3表单验证效果。类似于留言版
标记在使用时,用尖括号 "<>",标记的分类 1、封闭类型的标记 也称为 "双标记" , 必须成对出现 语法:<标记>内容</标记> Demo : 1、创建 p 标记 --<p>...</p> 2、创建 div 标记 -- <div></div> 3、创建 ...
<h2 class="exp-title">使用 :CSS3中的验证选择器</h2> <div class="exp"> <input type="text" class="exp__input" id="example" name="test" placeholder="Full Name" required> <label class=...
一款简洁、实用且漂亮的Javascript表单验证效果,实现Ajax的功能,验证项目包括Email验证、日期验证、字符长度验证、常规验证等,程序基本思路:通过扩展对象来实现,将String扩展 将默认的表单元素扩展 定义两个...
s表单验证制作会员注册信息,用户名验证,电子邮箱验证,密码验证,手机号码验证等表单验证提交表单效果。内含js代码下载。
先给大家展示下表单效果图,具体效果如下所示: 1.前台一开始用JQuery实现,先来上HTML标记: <body> <form id=form1 runat=server> <table class=tble> <tr><td class=td1>用户名 <input type=text...
网页表单验证效果代码 效果非常好看的验证效果
jquery表单验证插件制作多张提交表单验证效果源码.zip