一、对提交表单进行空值验证

html代码:

   <form action="#"onsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="emails" size="30"><br>
Phone: <input type="text" name="phone" size="30"><br>
<input type="submit" value="Submit">
</form>

js:

 function validate_required(field,alerttxt){
with (field){
/*如果输入框值为空则返回false*/
if (value==null||value==""){
alert(name+alerttxt);
return false
}else {
return true
}
}
} /*表单验证*/
function validate_form(thisform){
with(thisform){
for(i=0; i< elements.length-1; i++){
/*遍历表单内容*/
if (validate_required(elements[i]," must be filled out!")==false){
elements[i].focus();//高亮空白输入框
return false
}
}
}
return true;
}

二、childNodes 和children 的区别

  1、childNodes:它是标准属性,它返回指定元素的子节点集合,包括HTML节点,所有属性和文本节点(包括换行和空格也算一个节点)。

    • nodeType == 1时,表示该节点为元素节点,
    • nodeType == 2时,表示该节点为属性节点,
    • nodeType == 3时,表示该节点为文本节点,

  例如下面一段html代码的head标签节点:

 <head>
<meta charset="utf-8">
<script type="text/javascript" src="G:/DevelopSoftware/Sublime/workspace/js/js/jquery.js"/></script>
<title>js测试</title>
</head>

  我想通过获取子节点的方式来获得页面的title内容并修改它,使用如下js方法

 var h = document.getElementsByTagName("head")[0].childNodes;//获取head标签的子节点集合
for(i=0 ; i<h.length; i++){
/* 分别打印节点标签名、节点类型代码、节点html代码*/
console.log(h[i].tagName+" | "+h[i].nodeType+" | "+h[i].outerHTML)
if(h[i].tagName == "TITLE"){ //tagNmae匹配的内容都是大写的
h[i].innerHTML = "改名了"
}
}

  运行结果如下:

  

  左边是html源码结构,右边是运行结果,第一个节点现实的 节点类型代码为3,表示他是一个文本节点(其实就是一个换行),第二个节点的类型代码为1,表示他是一个html标签节点,(图中红色箭头表示文本节点,黄色箭头表示html标签节点)

  当我们将html代码变成如下样子(把所有节点写在一行,html节点间不存在空格和换行),之后,再看运行结果:

  

  运行结果:

  

  发现节点只剩下三个了,刚好是三个HTML标签节点,所以可以看出childnodes查找节点是比较严格的,把空格和换行都算在节点中,它把整个源码结构都遍历了。

  2. children:它时非标准属性,它只返回指定元素的子节点的HTML节点集合。

    还是上面的例子的第一种情况,我们将获取节点集合的方式改成chrildren,其他不变,看运行结果:

  

     可以发现结果它只保存了HTML节点,而没有其余的文本节点干扰。

==========

js表单验证处理和childNodes 和children 的区别的更多相关文章

  1. jquery.validation.js 表单验证

    jquery.validation.js 表单验证   官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...

  2. Jquery.validate.js表单验证插件的使用

    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...

  3. js表单验证工具包

    常用的js表单验证方法大全 /* 非空校验 : isNull() 是否是数字: isNumber(field) trim函数: trim() lTrim() rTrim() 校验字符串是否为空: ch ...

  4. JS表单验证-12个常用的JS表单验证

    JS表单验证-12个常用的JS表单验证 最近有个项目用到了表单验证,小编在项目完结后的这段时间把常用的JS表单验证demo整理了一下,和大家一起分享~~~ 1. 长度限制 <p>1. 长度 ...

  5. js 表单验证控制代码大全

    js表单验证控制代码大全 关键字:js验证表单大全,用JS控制表单提交 ,javascript提交表单:目录:1:js 字符串长度限制.判断字符长度 .js限制输入.限制不能输入.textarea 长 ...

  6. angular js 表单验证

    <!doctype html> <html ng-app="myapp"> <head> <meta charset="UTF- ...

  7. JS表单验证类HTML代码实例

    以前用的比较多的一个JS表单验证类,对于个人来说已经够用了,有兴趣的可以在此基础上扩展成ajax版本.本表单验证类囊括了密码验证.英文4~10个 字符验证. 中文非空验证.大于10小于100的数字.浮 ...

  8. Js表单验证控件-02 Ajax验证

    在<Js表单验证控件(使用方便,无需编码)-01使用说明>中,写了Verify.js验证控件的基本用法,基本可以满足大多数验证需求,如果涉及服务端的验证,则可以通过Ajax. Ajax验证 ...

  9. jQuery.validate.js表单验证插件

    jQuery.validate.js表单验证插件的使用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...

随机推荐

  1. maxscale读写分离

    今天,写写mysql兄弟公司maridb开发的一个读写分离,既然是兄弟,那也适用于mysql. 1.安装依赖包 yum -y install gcc gcc-c++ ncurses ncurses-d ...

  2. 【数据结构】——搜索二叉树的插入,查找和删除(递归&非递归)

    一.搜索二叉树的插入,查找,删除 简单说说搜索二叉树概念: 二叉搜索树又称二叉排序树,它或者是一棵空树,或者是具有以下性质的二叉树 若它的左子树不为空,则左子树上所有节点的值都小于根节点的值 若它的右 ...

  3. 怎么添加用户到sudo用户组

    跨平台系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#linux 前段时间用Ubuntu的sudo用惯了,回到kali发现自己的用户太low了, ...

  4. ireport报表学习

    常用组件介绍: 制作一个报表一般四个组件比较常用,下面分别介绍 Rectangle:用于画表格的样式,整个表格的样式使用次组件做出来的,本控件表现为一个黑色矩形框,多个黑色矩形框排在一起可以组合出来任 ...

  5. QWebSocketServer

    QWebSocketServer 服务端 Public Types Public Function QWebSocketServer(const QString &serverName, Ss ...

  6. Qt ActiveX web dome 详细例子

    http://doc.qt.io/qt-5.9/activeqt-server.html hierarchy 例子 #ifndef OBJECTS_H #define OBJECTS_H #inclu ...

  7. spring cloud熔断监控Hystrix Dashboard和Turbine

    参考: http://blog.csdn.net/ityouknow/article/details/72625646 完整pom <?xml version="1.0" e ...

  8. 坑人的toLocaleDateString和简单地跳坑方式

    最近在做一个一个医学大数据的项目的时候,独立设计.构思.制作了完成了一个生命历程图的功能.既然设计到时间,那就免不了对Date对象进行一系列的操作,也就免不了对日期对象进行一系列的格式化.走的路多了, ...

  9. node实现jsonp跨域

    1. 搭建node server //引入模块 var http=require("http"); var fs=require("fs");var url = ...

  10. java编程思想第四版第五章习题

    创建一个类, 它包含一个未初始化的String引用.验证该引用被Java初始化成了null package net.mindview.initialization; public class Test ...