使用原生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 相关文章推荐
JQery jstree 大数据量问题解决方法
Mar 09 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
Jan 15 Javascript
JS去除数组重复值的五种不同方法
Sep 06 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
Mar 26 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
Jan 27 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
Sep 17 Javascript
js HTML5手机刮刮乐代码
Sep 29 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
Nov 17 Javascript
Angular 项目实现国际化的方法
Jan 08 Javascript
深入理解JS的事件绑定、事件流模型
May 13 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
Mar 07 Javascript
解决Can't find variable: SockJS vue项目的问题
Sep 22 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中使用PDF文档功能
2006/10/09 PHP
过滤掉PHP数组中的重复值的实现代码
2011/07/17 PHP
基于empty函数的判断详解
2013/06/17 PHP
php 流程控制switch的简单实例
2016/06/07 PHP
基于jQueryUI和Corethink实现百度的搜索提示功能
2016/11/09 PHP
详解PHP字符串替换str_replace()函数四种用法
2017/10/13 PHP
fix-ie5.js扩展在IE5下不能使用的几个方法
2007/08/20 Javascript
jquery中文乱码的多种解决方法
2013/06/21 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
Javascript基础教程之break和continue语句
2015/01/18 Javascript
js获取当前日期前七天的方法
2015/02/28 Javascript
JS制作简单的三级联动
2015/03/18 Javascript
jquery 表单验证之通过 class验证表单不为空
2015/11/02 Javascript
酷! 不同风格页面布局幻灯片特效js实现
2021/02/19 Javascript
微信小程序 页面传参实例详解
2016/11/16 Javascript
简单实现JavaScript弹幕效果
2020/08/27 Javascript
React 组件渲染和更新的实现代码示例
2019/02/21 Javascript
jQuery表单校验插件validator使用方法详解
2020/02/18 jQuery
nuxt 路由、过渡特效、中间件的实现代码
2020/11/06 Javascript
利用ctypes提高Python的执行速度
2016/09/09 Python
Python3基于sax解析xml操作示例
2018/05/22 Python
python 在指定范围内随机生成不重复的n个数实例
2019/01/28 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
Python脚本实现监听服务器的思路代码详解
2020/05/28 Python
浅谈PyTorch中in-place operation的含义
2020/06/27 Python
Python使用Pygame绘制时钟
2020/11/29 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
通过HTML5规范搞定i、em、b、strong元素的区别
2017/03/04 HTML / CSS
德国家具在线:Fashion For Home
2017/03/11 全球购物
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
爱普生美国官网:Epson美国
2018/11/05 全球购物
车间班组长岗位职责
2013/11/13 职场文书
护士实习生自我鉴定范文
2013/12/10 职场文书
往来会计岗位职责
2013/12/19 职场文书
生育关怀行动实施方案
2014/03/26 职场文书
领导干部廉政承诺书
2014/03/27 职场文书