使用原生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编程起步(第二课)
Feb 27 Javascript
javascript 常用功能总结
Mar 18 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
Apr 12 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
May 04 Javascript
php结合imgareaselect实现图片裁剪
Jul 05 Javascript
jQuery事件绑定on()与弹窗实现代码
Apr 28 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
Nov 16 Javascript
javascript中活灵活现的Array对象详解
Nov 30 Javascript
原生JS下拉加载插件分享
Dec 26 Javascript
js设置随机切换背景图片的简单实例
Nov 12 Javascript
24行JavaScript代码实现Redux的方法实例
Nov 17 Javascript
JavaScript 装逼指南(js另类写法)
May 10 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 zip文件解压类代码
2009/12/02 PHP
PHP自动生成表单代码分享
2015/06/19 PHP
PHP常用排序算法实例小结【基本排序,冒泡排序,快速排序,插入排序】
2017/02/07 PHP
ZendFramework2连接数据库操作实例
2017/04/18 PHP
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
如何在PHP中使用数组
2020/06/09 PHP
Js与下拉列表处理问题解决
2014/02/13 Javascript
一个CSS+jQuery实现的放大缩小动画效果
2014/02/19 Javascript
页面装载js及性能分析方法介绍
2014/03/21 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
2016/04/03 Javascript
Javascript的比较汇总
2016/07/25 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
2016/09/17 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
2017/07/10 Javascript
vue resource post请求时遇到的坑
2017/10/19 Javascript
vue.js通过路由实现经典的三栏布局实例代码
2018/07/08 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
移动端吸顶fixbar的解决方案详解
2019/07/17 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
Python中字典与恒等运算符的用法分析
2019/08/22 Python
django model object序列化实例
2020/03/13 Python
解决keras使用cov1D函数的输入问题
2020/06/29 Python
CSS3 translate导致字体模糊的实例代码
2019/08/30 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
面向游戏玩家和书呆子的极客订阅盒:Loot Crate
2020/11/25 全球购物
Ajax实现页面无刷新留言效果
2021/03/24 Javascript
最新会计专业求职信范文
2014/01/28 职场文书
cf收人广告词
2014/03/14 职场文书
学校就业推荐信范文
2014/05/19 职场文书
后备干部培训方案
2014/05/22 职场文书
出资证明书范本(标准版)
2014/09/24 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
生活小常识广播稿
2015/08/19 职场文书
初中数学教学反思范文
2016/02/17 职场文书
python - timeit 时间模块
2021/04/06 Python
详解Java分布式事务的 6 种解决方案
2021/06/26 Java/Android