使用原生javascript创建通用表单验证——更锋利的使用dom对象


Posted in Javascript onSeptember 13, 2011

首先看下效果,没什么特别,呵呵!

使用原生javascript创建通用表单验证——更锋利的使用dom对象
调用的代码呢,则是相当简单,不需要创建其他的Label或者span标签,脚本将自动生成:

<input type="text" id="txt1" onkeyup="checkResult(this.value == '', 'txt1', ' *这里不能为空喔!')" />

接下来我们看下这个checkResult这个函数,checkCondition参数表示判断条件,当条件为true时显示提示信息;showAfterId参数为创建的显示提示信息的标签之前的元素ID,在这里我们在input后面创建一个span来显示提示信息,因而 传入的参数值为当前input的ID“txt1”;最后一个参数为显示的文字,这个就不用??铝恕
//验证不能为空展示提示信息 
function checkResult(checkCondition, showAfterId, showMsg) { 
var showLabelId = showAfterId + "showMsg"; 
if (checkCondition) { 
if (document.getElementById(showLabelId)) { 
document.getElementById(showLabelId).innerHTML = showMsg; 
} else { 
createShowElement(showAfterId, showLabelId, "color:red", showMsg, 'span'); 
} 
} else if (!checkCondition) { 
if (document.getElementById(showLabelId)) 
document.getElementById(showLabelId).innerHTML = ''; 
} 
}

好,最后我们来看这个“createShowElement(currentId, elementId, style, showMsg, tagName)”函数:currentId即当前标签的ID;elementId为创建的标签的ID;style为创建的标签的样式,按照样式的写法即可;showMsg不讲了;tagName为创建的标签名,如label或者span等。
//创建展示提示信息的dom 
function createShowElement(currentId, elementId, style, showMsg, tagName) { 
if (!tagName) tagName = 'label'; 
var currentDom = document.getElementById(currentId); 
var showMsgDom = document.createElement(tagName); 
//showMsgDom.setAttribute("style", "color:" + textColor + ";"); 
if (style) 
showMsgDom.setAttribute("style", style); 
showMsgDom.setAttribute("id", elementId); 
showMsgDom.innerHTML = showMsg; 
currentDom.parentNode.insertBefore(showMsgDom, currentDom.nextSibling); 
}

仅供交流,欢迎大家提出指点,渴望宝贵的意见。个人觉得,即使是写简单的脚本验证程序,也应该尽量遵循面向对象的思想,并且在可扩展与效率上追寻一个协调的点,既不影响效率,同时让我们写的任何程序具有更高的可扩展性,这点思路其实不难,但是经常被很多初级程序员忽略。
Javascript 相关文章推荐
用函数式编程技术编写优美的 JavaScript
Nov 25 Javascript
javascript数组的扩展实现代码集合
Jun 01 Javascript
iframe 自适应高度[在IE6 IE7 FF下测试通过]
Apr 13 Javascript
Jquery AJAX POST与GET之间的区别
Nov 14 Javascript
深入理解JSON数据源格式
Jan 10 Javascript
jQuery实现tab标签自动切换的方法
Feb 28 Javascript
JavaScript判断数组是否包含指定元素的方法
Jul 01 Javascript
基于JavaScript代码实现随机漂浮图片广告
Jan 05 Javascript
vue修改vue项目运行端口号的方法
Aug 04 Javascript
详解vue如何使用rules对表单字段进行校验
Oct 17 Javascript
vue项目刷新当前页面的三种方法
Dec 04 Javascript
Vue 进阶之路(三)
Apr 18 Javascript
ie下动态加态js文件的方法
Sep 13 #Javascript
使用Json比用string返回数据更友好,也更面向对象一些
Sep 13 #Javascript
TextArea不支持maxlength的解决办法(jquery)
Sep 13 #Javascript
JQuery与JSon实现的无刷新分页代码
Sep 13 #Javascript
js Event对象的5种坐标
Sep 12 #Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
Sep 12 #Javascript
腾讯UED 漂亮的提示信息效果代码
Sep 12 #Javascript
You might like
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
jQuery使用手册之一
2007/03/24 Javascript
javascript制作网页图片上实现下雨效果
2015/02/26 Javascript
jQuery点击输入框显示验证码图片
2016/05/19 Javascript
Vue.js教程之计算属性
2016/11/11 Javascript
js实现字符全排列算法的简单方法
2017/05/01 Javascript
AngularJS  ng-repeat遍历输出的用法
2017/06/19 Javascript
详解Node.js access_token的获取、存储及更新
2017/06/20 Javascript
Javacript中自定义的map.js  的方法
2017/11/26 Javascript
vue的diff算法知识点总结
2018/03/29 Javascript
JS中数据结构之栈
2019/01/01 Javascript
在Vue mounted方法中使用data变量详解
2019/11/05 Javascript
Python列表(list)常用操作方法小结
2015/02/02 Python
python分析apache访问日志脚本分享
2015/02/26 Python
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
python中的set实现不重复的排序原理
2018/01/24 Python
将字典转换为DataFrame并进行频次统计的方法
2018/04/08 Python
Python调用服务接口的实例
2019/01/03 Python
Python的条件表达式和lambda表达式实例
2019/01/31 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
python绕过图片滑动验证码实现爬取PTA所有题目功能 附源码
2021/01/06 Python
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
利用Node实现HTML5离线存储的方法
2020/10/16 HTML / CSS
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
试用期员工工作自我评价
2014/09/10 职场文书
竞聘报告优秀范文
2014/11/06 职场文书
2015年社区科普工作总结
2015/05/13 职场文书
故意杀人案辩护词
2015/05/21 职场文书
成人成长感言如何写?
2019/08/16 职场文书
四年级作文之植物
2019/09/20 职场文书
Mysql 一主多从的部署
2022/05/20 MySQL
MySQL聚簇索引和非聚簇索引的区别详情
2022/06/14 MySQL
MySQL提升大量数据查询效率的优化神器
2022/07/07 MySQL