使用原生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);
}

仅供交流，欢迎大家提出指点，渴望宝贵的意见。个人觉得，即使是写简单的脚本验证程序，也应该尽量遵循面向对象的思想，并且在可扩展与效率上追寻一个协调的点，既不影响效率，同时让我们写的任何程序具有更高的可扩展性，这点思路其实不难，但是经常被很多初级程序员忽略。

赞 (0)

相关推荐

  • javascript转换字符串为dom对象（字符串动态创建dom）

    前言: 在javascript里面动态创建标准dom对象一般使用: var obj = document.createElement('div'); 然后再给obj设置一些属性. 但是,在实际使用过程中,有些人可能会想,要是能这样创建标准的dom对象就好了 伪代码:var obj=strToDom('<div id="div_1" class="div1">Hello World!</div>'); 那么今天的目的就是教大家怎么去实现一个这样

  • JavaScript 学习笔记（十三）Dom创建表格

    Dom基础-创建表格 利用js来动态创建表格有两种格式,appendChild()和insertRow.insertCell().但第一种有可能在IE上有问题,所以推荐使用第二种. 1.insertRow(index):index从0开始 这个函数将新行添加到index的那一行前,比如insertRow(0),是将新行添加到第一行之前.默认的insertRow()函数相当于 insertRow(-1),将新行添加到表的最后.一般我们在使用的时候都是: objTable.insertRow (ob

  • js和jquery对dom节点的操作(创建/追加)

    复制代码 代码如下: <script src="jquery-1.9.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('#Button1').click(function () { // var ha = '<p>a</p>'; // $('div').app

  • 基于JavaScript创建动态Dom

    基于JavaScript创建动态Dom

    动态脚本 我们在页面中使用<script>元素就可以向页面中插入javascript代码.有两种方式:一种是通过src属性引用外部的JS文件,一种是用这个元素来包含一段js代码.所谓的动态脚本,就是指这个脚本在页面加载时不存在,在将来的某一个时刻通过修改DOM来动态的添加脚本.与操作html元素一样,创建动态脚本也有两种方式:插入外部文件和直接插入JavaScript代码. 动态加载的外部JavaScript代码可以立刻被执行,例如下面的代码: var script = document.cr

  • JavaScript与DOM组合动态创建表格实例

    JavaScript与DOM组合动态创建表格实例

    这篇文章简单介绍了DOM 1.0一些基本而强大的方法以及如何在JavaScript中使用它们.你可以学到如何动态地创建.获取.控制和删除HTML元素.这些DOM方法同样适用于XML.所有全面支持DOM 1.0的浏览器都能很好地运行本篇的实例,比如IE5,Firefox等. 这篇文章通过实例代码介绍DOM.请从尝试下面的HTML例子开始.它使用DOM 1的方法由JavaScript动态创建一个HTML表格.它创建一个由四个包含文本内容的单元格组成的小表格.单元格的文字内容是:"单元格是第y行第x列

  • 通过JS动态创建一个html DOM元素并显示

    近日,因工作需要,需要通过点击某个元素后, 动态创建一个DOM元素并显示,因此写了一些相关的JS函数,在此记录,以作备忘: /**//* 动态创建DOM元素的相关函数支持 www.jcodecraeer.com */ /**//* 获取以某个元素的DOM对象 @obj 该元素的ID字符串 */ function getElement(obj) { return typeof obj=='string'?document.getElementById(obj):obj; } /**//* 获取某个

  • javascript实现dom动态创建省市纵向列表菜单的方法

    本文实例讲述了javascript实现dom动态创建省市纵向列表菜单的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

  • JS动态创建DOM元素的方法

    本文实例讲述了JS动态创建DOM元素的方法.分享给大家供大家参考.具体如下: 近日,因工作需要,需要通过点击某个元素后, 动态创建一个DOM元素并显示,因此写了一些相关的JS函数,在此记录,以作备忘: /* 动态创建DOM元素的相关函数支持 */ /* 获取以某个元素的DOM对象 @obj 该元素的ID字符串 */ function getElement(obj) { return typeof obj=='string'?document.getElementById(obj):obj; }

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

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

    首先看下效果,没什么特别,呵呵! 调用的代码呢,则是相当简单,不需要创建其他的Label或者span标签,脚本将自动生成: 复制代码 代码如下: <input type="text" id="txt1" onkeyup="checkResult(this.value == '', 'txt1', ' *这里不能为空喔!')" /> 接下来我们看下这个checkResult这个函数,checkCondition参数表示判断条件,当条件为

  • JS实现的通用表单验证插件完整实例

    JS实现的通用表单验证插件完整实例

    本文实例讲述了JS实现的通用表单验证插件.分享给大家供大家参考.具体如下: 这里演示一个通用的JS表单验证插件代码.使用方法:第一步:需设定表单项数据类型,第二步:实例表单验证,验证错误提示说明(程序有自带相关错误提示,可自定义每项验证错误提示时文本,只需添加msg). 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-normal-table-check-plug-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &qu

  • Vue快速实现通用表单验证功能

    本文开篇第一句话,想引用鲁迅先生<祝福>里的一句话,那便是:"我真傻,真的,我单单知道后端整天都是CRUD,我没想到前端整天都是Form表单".这句话要从哪里说起呢?大概要从最近半个月的"全栈工程师"说起.项目上需要做一个城市配载的功能,顾名思义,就是通过框选和拖拽的方式在地图上完成配载.博主选择了前后端分离的方式,在这个过程中发现:首先,只要有依赖jQuery的组件,譬如Kendoui,即使使用了Vue,依然需要通过jQuery去操作DOM.其次,只有

  • javascript创建动态表单的方法

    本文实例讲述了javascript创建动态表单的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

  • Vue快速实现通用表单验证的示例代码

    本文开篇第一句话,想引用鲁迅先生<祝福>里的一句话,那便是:"我真傻,真的,我单单知道后端整天都是CRUD,我没想到前端整天都是Form表单".这句话要从哪里说起呢?大概要从最近半个月的"全栈工程师"说起.项目上需要做一个城市配载的功能,顾名思义,就是通过框选和拖拽的方式在地图上完成配载.博主选择了前后端分离的方式,在这个过程中发现:首先,只要有依赖jQuery的组件,譬如Kendoui,即使使用了Vue,依然需要通过jQuery去操作DOM.其次,只有

  • Vue快速实现通用表单验证的方法

    本文开篇第一句话,想引用鲁迅先生<祝福>里的一句话,那便是:"我真傻,真的,我单单知道后端整天都是CRUD,我没想到前端整天都是Form表单".这句话要从哪里说起呢?大概要从最近半个月的"全栈工程师"说起.项目上需要做一个城市配载的功能,顾名思义,就是通过框选和拖拽的方式在地图上完成配载.博主选择了前后端分离的方式,在这个过程中发现:首先,只要有依赖jQuery的组件,譬如Kendoui,即使使用了Vue,依然需要通过jQuery去操作DOM.其次,只有

  • 详解JavaScript中的表单验证

    表单验证用于发生在服务器,客户端已经输入所有必要的数据,然后按下提交按钮之后.如果一些已被输入的客户端的数据的已在错误形式或者被简单地丢失,则服务器将必须的所有数据发送回客户端,并请求的形式以正确的信息重新提交.这是一个漫长的过程,会增加服务器负担. JavaScript中,提供了一种方法将其发送到web服务器之前验证客户端的计算机上的形式的数据.表单验证通常执行两种方式. 基本验证 - 首先,该表必须进行检查,以确保数据输入的需要将其每一个表单字段.这将通过表格的每个字段只需要循环,并检查数据

  • javascript html5实现表单验证

    表单验证为终端用户检测无效的数据并标记这些错误,是一种用户体验的优化. 下面展现浏览器自带的验证功能也可在移动端中查看: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc

  • 基于javascript的Form表单验证

    基于javascript的Form表单验证

    Form表单验证: js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等.完整代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>form-lpb</title> <style> body { back

  • Validform表单验证总结篇

    Validform表单验证总结篇

    近期项目里用到了表单的验证,选择了Validform_v5.3.2. 先来了解一下一些基本的参数: 通用表单验证方法: Demo: $(".demoform").Validform({//$(".demoform")指明是哪一表单需要验证,名称需加在form表单上; btnSubmit:"#btn_sub", //#btn_sub是该表单下要绑定点击提交表单事件的按钮;如果form内含有submit按钮该参数可省略; btnReset:"

随机推荐