js表单验证处理和childNodes 和children 的区别
一、对提交表单进行空值验证
html代码:
1 <form action="#"onsubmit="return validate_form(this);" method="post"> 2 Email: <input type="text" name="emails" size="30"><br> 3 Phone: <input type="text" name="phone" size="30"><br> 4 <input type="submit" value="Submit"> 5 </form>
js:
1 function validate_required(field,alerttxt){ 2 with (field){ 3 /*如果输入框值为空则返回false*/ 4 if (value==null||value==""){ 5 alert(name+alerttxt); 6 return false 7 }else { 8 return true 9 } 10 } 11 } 12 13 /*表单验证*/ 14 function validate_form(thisform){ 15 with(thisform){ 16 for(i=0; i< elements.length-1; i++){ 17 /*遍历表单内容*/ 18 if (validate_required(elements[i]," must be filled out!")==false){ 19 elements[i].focus();//高亮空白输入框 20 return false 21 } 22 } 23 } 24 return true; 25 }
二、childNodes 和children 的区别
1、childNodes:它是标准属性,它返回指定元素的子节点集合,包括HTML节点,所有属性和文本节点(包括换行和空格也算一个节点)。
- nodeType == 1时,表示该节点为元素节点,
- nodeType == 2时,表示该节点为属性节点,
- nodeType == 3时,表示该节点为文本节点,
例如下面一段html代码的head标签节点:
1 <head> 2 <meta charset="utf-8"> 3 <script type="text/javascript" src="G:/DevelopSoftware/Sublime/workspace/js/js/jquery.js"/></script> 4 <title>js测试</title> 5 </head>
我想通过获取子节点的方式来获得页面的title内容并修改它,使用如下js方法
1 var h = document.getElementsByTagName("head")[0].childNodes;//获取head标签的子节点集合 2 for(i=0 ; i<h.length; i++){ 3 /* 分别打印节点标签名、节点类型代码、节点html代码*/ 4 console.log(h[i].tagName+" | "+h[i].nodeType+" | "+h[i].outerHTML) 5 if(h[i].tagName == "TITLE"){ //tagNmae匹配的内容都是大写的 6 h[i].innerHTML = "改名了" 7 } 8 }
运行结果如下:
左边是html源码结构,右边是运行结果,第一个节点现实的 节点类型代码为3,表示他是一个文本节点(其实就是一个换行),第二个节点的类型代码为1,表示他是一个html标签节点,(图中红色箭头表示文本节点,黄色箭头表示html标签节点)
当我们将html代码变成如下样子(把所有节点写在一行,html节点间不存在空格和换行),之后,再看运行结果:
运行结果:
发现节点只剩下三个了,刚好是三个HTML标签节点,所以可以看出childnodes查找节点是比较严格的,把空格和换行都算在节点中,它把整个源码结构都遍历了。
2. children:它时非标准属性,它只返回指定元素的子节点的HTML节点集合。
还是上面的例子的第一种情况,我们将获取节点集合的方式改成chrildren,其他不变,看运行结果:
可以发现结果它只保存了HTML节点,而没有其余的文本节点干扰。
==========
转载于:https://www.cnblogs.com/caijh/p/7784530.html
js表单验证处理和childNodes 和children 的区别相关推荐
- anjular.js表单验证实例
应用声明,控制器 <form action="" method="post" id="myForm" name="logFo ...
- 通用的JS表单验证插件代码
一个通用的JS表单验证插件代码.使用方法:第一步:需设定表单项数据类型,第二步:实例表单验证,验证错误提示说明(程序有自带相关错误提示,可自定义每项验证错误提示时文本,只需添加msg). [task] ...
- 掌财社:html5中AmazeUI框架中JS表单验证实战案例展示!
今天和大家分享个有关于"html5中AmazeUI框架中JS表单验证实战案例展示!"这方面的相关内容知识,让大家对于html5中AmazeUI框架也可以有所了解! 1.需求 做一个 ...
- JS表单验证(HTML+CSS+JS)详细教程
大家好,今天分享一个HTML+CSS+JS表单验证,这是我前两天学习的一个小demo,在这记录一下. 目录 一.效果图 二.介绍 三.代码 (1)HTML (2)CSS (3)JavaScript J ...
- JS表单验证-12个常用的JS表单验证
JS表单验证-12个常用的JS表单验证 表单验证,小编在项目完结后的这段时间把常用的JS表单验证demo整理了一下,和大家一起分享~~~ 1.长度限制 <p>1. 长度限制</p&g ...
- js表单验证(常用的正则表达式)
js表单验证的正则表达式,test() 方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false. 语法:let reg=/正则表达式主体/修饰符(可 ...
- js表单验证密码(确认密码),密码长度至少8位,并且英文与数字组合
js表单验证密码(确认密码) 案例需求:在注册时,输入密码对其进行密码强度验证,并判断两次输入的密码是否一致.例如,密码长度至少8位,并且英文与数字组合. 代码实现 <p>输入密码:< ...
- 分享21个JS抽奖转盘特效,36个JS表单验证,31个JS进度条,总有一款适合您
分享21个JS抽奖转盘特效,36个JS表单验证,31个JS进度条,总有一款适合您 下载链接:https://pan.baidu.com/s/1TWOGqes5J2baelO9qdItXg?pwd=ma ...
- JS表单验证(HTML+CSS+JS)小实例【详细教程】
前言 大家好,分享一个HTML+CSS+JS表单校验,包括页面的简单布局,样式渲染,还有基础的JS校验方法.希望大家喜欢!哈哈 一.效果图 二.介绍 图标库使用Element-UI <!-- 引 ...
最新文章
- VB中DateDiff 函数解释
- 收货地址 - 设置默认收货地址
- anki模板_梁宝川:如何导入,导出anki笔记?
- html内容点击按钮自动复制,HTML页面---复制按钮的使用(包含弹层)
- 倒计时1天,BDTC2016最新完整版日程公布
- 4020-基于链地址法的散列表的插入(C++,附思路以及头插法,尾插法两种代码)
- 图解分析:基于setnx的分布式锁有什么缺陷
- 《印度合伙人》观影有感
- 项目ITP(一) 二维码
- 皮尔逊相关系数(Pearson Correlation)
- 《清华梦的粉碎》by王垠
- 周爱民对提升程序员自身技术能力的建议
- Codeforces Gym 101173 K. Key Knocking (构造)
- 如何在数字前加上0,如将1变成01
- JS splice的用法
- 什么是ISO体系认证?企业申请三体系认证的好处
- GBase 8s 客户端工具之dbaccess
- Shell- 获取ESXI主机虚拟交换机中MAC表
- keil 生成三角波dac0832_弹性波,时域显式接口简介
- python数据收集整理教案_《数据收集整理》精品教案
热门文章
- Apache(1)——安装
- Spark(1)——spark基本原理与启动
- Linux Kernel 0.01 的编译和运行
- 8086汇编 贪吃蛇 源代码
- C/C++堆、栈及静态数据区详解
- 简单递归题目分析与解答
- ios::app与ios::ate打开方式有什么不同??
- [BUUCTF-pwn]——jarvisoj_level1
- linux ubuntu fadora,两大主流Linux版本Ubuntu 18.04和Fedora 28的对比
- Oracle数据库的数据统计(Analyze)