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

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. Nginx调用远程php-fpm

    在Nginx服务器的情况下,当我们输入 http://localhost:8080/index.php回车的时候 浏览器会将请求发送给Nginx,Nginx会根据我们所配置的以.php结尾的PHP的文 ...

  2. Python自动化--语言基础4--模块、文件读写、异常

    模块1.什么是模块?可以理解为一个py文件其实就是一个模块.比如xiami.py就是一个模块,想引入使用就在代码里写import xiami即可2.模块首先从当前目录查询,如果没有再按path顺序逐一 ...

  3. cookie session区别

      先理解为什么出现cookie和session: 为了使得网站可以跟踪客户端与服务器之间的交互,保存和记忆每个用户的身份和信息,我们需要一种强有力的解决方案,这样就产生了会话控制. 会话控制思想就是 ...

  4. cassandra 鉴权

    1. 修改cassandra.yaml配置文件.启用用户密码登录形式. authenticator: PasswordAuthenticator authorizer: CassandraAuthor ...

  5. Python基础——for/while循环

    Python版本:3.6.2  操作系统:Windows  作者:SmallWZQ 上学期间,常常遇到这样的情景:为了惩罚学生,老师会说:"XXX,你先去操场上跑10圈再回来继续反省.&qu ...

  6. PHP不使用array_merge函数实现一维数组合并

    function array_mer() { $arrays = func_get_args(); //获取当前函数中传递进来的所有参数,也就是所有一维数组 // echo '<pre>' ...

  7. MysqL碎片整理优化

    先来说一下什么是碎片,怎么知道碎片有多大! 简单的说,删除数据必然会在数据文件中造成不连续的空白空间,而当插入数据时,这些空白空间则会被利用起来.于是造成了数据的存储位置不连续,以及物理存储顺序与理论 ...

  8. MySQL基础学习笔记

    一.数据库基本概念 1.1 数据库 - Database 从字面意思看,数据库就是一个存储数据的仓库.从计算机的角度来讲,数据库(Datebase)是按照数据结构来组织.存储和管理数据的仓库. 简单来 ...

  9. JAVA多线程与并发学习总结

    1.      计算机系统 使用高速缓存来作为内存与处理器之间的缓冲,将运算需要用到的数据复制到缓存中,让计算能快速进行:当运算结束后再从缓存同步回内存之中,这样处理器就无需等待缓慢的内存读写了. 缓 ...

  10. jquery源码分析之一前言篇

    1.问:jquery源码分析的版本是什么? 答:v3.2.1 2.问:为什么要分析jquery源码? 答:javascript是一切js框架的基础,jquery.es6.vue.angular.rea ...