使用原生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 类型的包装对象(Typed Wrappers)
Oct 27 Javascript
jquery简单的拖动效果实现原理及示例
Jul 26 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
Dec 24 Javascript
简单实现限制uploadify上传个数
Nov 16 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 Javascript
利用Jquery队列实现根据输入数量显示的动画
Sep 01 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
Jun 04 Javascript
Node.js中sequelize时区的配置方法
Dec 10 Javascript
使用webpack搭建vue项目实现脚手架功能
Mar 15 Javascript
深入理解es6块级作用域的使用
Mar 28 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
Oct 18 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
Dec 28 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+ajax做仿百度搜索下拉自动提示框(有实例)
2012/08/21 PHP
PHP输出数组中重名的元素的几种处理方法
2012/09/05 PHP
thinkPHP5.0框架独立配置与动态配置方法
2017/03/17 PHP
PHP设计模式之 策略模式Strategy详解【对象行为型】
2020/05/01 PHP
javascript学习笔记--数字格式类型
2014/05/22 Javascript
Extjs根据条件设置表格某行背景色示例
2014/07/23 Javascript
jQuery老黄历完整实现方法
2015/01/16 Javascript
基于javascript实现彩票随机数生成(简单版)
2020/04/17 Javascript
JavaScript面试开发常用的知识点总结
2016/08/08 Javascript
js手动播放图片实现图片轮播效果
2016/09/17 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
2017/09/11 Javascript
微信小程序实现YDUI的ScrollNav组件
2018/02/02 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
深度了解vue.js中hooks的相关知识
2019/06/14 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
2019/07/18 Javascript
JS实现骰子3D旋转效果
2019/10/24 Javascript
在Vue项目中,防止页面被缩放和放大示例
2019/10/28 Javascript
Python Socket使用实例
2017/12/18 Python
将字典转换为DataFrame并进行频次统计的方法
2018/04/08 Python
Python Series从0开始索引的方法
2018/11/06 Python
Python 正则表达式匹配字符串中的http链接方法
2018/12/25 Python
对python中的try、except、finally 执行顺序详解
2019/02/18 Python
Python中面向对象你应该知道的一下知识
2019/07/10 Python
python爬虫神器Pyppeteer入门及使用
2019/07/13 Python
python正则-re的用法详解
2019/07/28 Python
关于Python解包知识点总结
2020/05/05 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
使用CSS3来代替JS实现交互
2017/08/10 HTML / CSS
英国婴儿及儿童产品商店:TigerParrot
2019/03/04 全球购物
资深财务管理人员自我评价
2013/09/22 职场文书
宗教学大学生职业生涯规划范文
2014/02/08 职场文书
投资意向书范本
2014/04/01 职场文书
销售岗位职责范本
2014/06/12 职场文书
学生逃课万能检讨书2000字
2015/02/17 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书
为什么node.js不适合大型项目
2021/04/28 Javascript