使用原生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使用prototype定义对象类型(转)[
Dec 22 Javascript
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
Mar 06 Javascript
onsubmit阻止form表单提交与onclick的相关操作
Sep 03 Javascript
JS 获取浏览器和屏幕宽高等信息代码
Mar 31 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
Apr 24 Javascript
用ES6写全屏滚动插件的示例代码
May 02 Javascript
node中间层实现文件上传功能
Jun 11 Javascript
Fetch超时设置与终止请求详解
May 18 Javascript
JavaScript如何借用构造函数继承
Nov 06 Javascript
javascript-hashchange事件和历史状态管理实例分析
Apr 18 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
May 09 Javascript
用React Native制作一个简单的游戏引擎
May 27 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
session在PHP大型web应用中的使用
2011/06/25 PHP
深入解析php之apc
2013/05/15 PHP
PHP解码unicode编码的中文字符代码分享
2014/08/13 PHP
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
举例详解PHP脚本的测试方法
2015/08/05 PHP
PHP7创建COOKIE和销毁COOKIE的实例方法
2020/02/03 PHP
小米公司JavaScript面试题
2014/12/29 Javascript
jQuery中:lt选择器用法实例
2014/12/29 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
2015/10/22 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
jquery实现手机端单店铺购物车结算删除功能
2017/02/22 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
vue根据进入的路由进行原路返回的方法
2018/09/26 Javascript
redux.js详解及基本使用
2019/05/24 Javascript
layui 地区三级联动 form select 渲染的实例
2019/09/27 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
[34:08]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS EG
2018/03/30 DOTA
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
Python3.7 新特性之dataclass装饰器
2019/05/27 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
纯CSS3实现的阴影效果
2014/12/24 HTML / CSS
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
阿玛尼美妆俄罗斯官网:Giorgio Armani Beauty RU
2020/07/19 全球购物
市场营销专业推荐信
2013/11/03 职场文书
计算机科学与技术应届生求职信
2013/11/07 职场文书
军训鉴定表自我鉴定
2014/02/13 职场文书
竞选学习委员演讲稿
2014/04/28 职场文书
会计人员演讲稿
2014/09/11 职场文书
2014年电工工作总结
2014/11/20 职场文书
解除租赁合同协议书
2016/03/21 职场文书
诉讼和解协议书
2016/03/23 职场文书
python中print格式化输出的问题
2021/04/16 Python
Java实现学生管理系统(IO版)
2022/02/24 Java/Android