DOM编程+正则表达式（劝退）

川长思鸟来 2022-12-07 15:17 56阅读 0赞

#                                      JavaScript——DOM #

--------------------

## 什么是DOM编程？ ##

JavaScript包括三大块：

ECMAScript：JS核心语法（ES规范/ECMA-262标准）

DOM：Document Object Model （文档对象模型：对网页当中的节点进行增删改的过程）HTML被当做一课DOM树来看待。

var domObj=document.getElementById("id");

BOM：Browser Object Model （浏览器对象模型）

关闭浏览器窗口、打开一个新的浏览器、后退、前进、浏览器地址栏上的地址等，都是BOM编程。

## DOM编程基本概述 ##

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。具体定义可以参考——[百度百科][Link 1]

## BOM和DOM的区别和联系？ ##

BOM的顶级对象是：window  
DOM的顶级对象是：document  
实际上BOM是包括DOM的！

### 以下是BOM和DOM的图解 ###

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Nzk2MjA4_size_16_color_FFFFFF_t_70][] ###

## DOM编程-获取文本框的value ##

执行结果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Nzk2MjA4_size_16_color_FFFFFF_t_70 1][]

## DOM编程-innerHTML和innerText操作div和span ##

首先说一下innerHTML和innerText的异同

相同点:都是设置元素内部的内容。  
不同点：  
    innerHTML会把后面的字符串当做一段HTML代码解释并执行  
    innerText即使后面是一段HTML代码，也只是将其当做普通代码执行。

<head>
    	<meta charset="utf-8">
    	<title>DOM编程-innerHTML和innerText操作div和span</title>
    	<style type="text/css">
    		#div1{
    			background-color: aquamarine;
    			width: 300px;
    			height: 300px;
    			border: 1px solid black;
    			position :absolute;
    			left: 100px;
    			top: 100px;
    		}
    	</style>
    </head>
    <body>
    	<script type="text/javascript">
    		window.onload=function(){
    			document.getElementById("btn").onclick=function(){
    				//设置div的内容
    				//第一步:获取div对象
    				divElt=document.getElementById("div1");
    				//第二步:使用innerHTML属性来修改元素内部的内容
    				//divElt.innerHTML="haaha"
    				divElt.innerHTML="<font color='red'>用户名不能为空</font>";
    				//divElt.innerText="<font color='red'>用户名不能为空</font>";//将后面的所有内容直接输出
    					
    			}
    		}
    	</script>
    	<input type="button" value="设置div中的内容" id="btn" />
    		
    	<div id="div1"></div>
    </body>

divElt.innerHTML="<font color='red'>用户名不能为空</font>";

执行结果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Nzk2MjA4_size_16_color_FFFFFF_t_70 2][]

divElt.innerText="<font color='red'>用户名不能为空</font>";

执行结果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Nzk2MjA4_size_16_color_FFFFFF_t_70 3][]

## 表单验证 ##

表单验证需要学习正则表达式，下面简简单单的来说一下正则表达式（劝退）

### 正则表达式 ###

1、什么是正则表达式？有什么用?  
    正则表达式：Regular Expression  
    正则表达式主要用在字符串格式匹配方面。  
                  
2、正则表达式实际上是一门独立的学科，在大部分语言中都支持。  
    正则表达式最初使用在医学方面，用来表示神经符号，目前使用最  
    多的是计算机编程领域，用作字符串格式匹配。包括搜索方面等。  
                  
3、正则表达式需要掌握的内容  
    第一：常见的正则表达式符号  
    第二：会写简单的正则表达式  
    第三：能看懂别人写的正则表达式  
    第四：在javascript怎么创建正则表达式对象  
    第五：在JavaScript中，正则表达式对象有哪些方法  
                  
4、常用的正则表达式符号？  
代码             说明   
.             匹配除换行符以外的任意字符   
\\w             匹配字母或数字或下划线或汉字   
\\s             匹配任意的空白符   
\\d             匹配数字   
\\b             匹配单词的开始或结束   
^             匹配字符串的开始   
$             匹配字符串的结束   
                  
代码/语法         说明   
\*             重复零次或更多次   
\+             重复一次或更多次   
?             重复零次或一次   
\{n\}         重复n次   
\{n,\}         重复n次或更多次   
\{n,m\}         重复n到m次   
                  
代码/语法             说明   
\\W                 匹配任意不是字母，数字，下划线，汉字的字符   
\\S                 匹配任意不是空白符的字符   
\\D                 匹配任意非数字的字符   
\\B                 匹配不是单词开头或结束的位置   
\[^x\]             匹配除了x以外的任意字符   
\[^aeiou\]         匹配除了aeiou这几个字母以外的任意字符   
                  
正则表达式当中的小括号()优先级较高  
\[1-9\]表示1到9的任意数字（次数是一次。）  
\[A-Za-z0-9\]表示A-Za-z0-9中的任意一个字符  
\[A-Za-z0-9-\]表示A-Za-z0-9-中的任意一个字符。  
|表示或  
                  
5、简单的正则表达式  
    QQ号的正则表达式：^\[1-9\]\[0-9\]\{4,\}$  
    北京固话的正则表达式：  
      
6、email的正则表达式：  
^\\w+(\[-+.\]\\w+)\*@\\w+(\[-.\]\\w+)\*\\.\\w+(\[-.\]\\w+)\*$  
                  
7、怎么创建正则表达式对象，怎么调用正则表达式的对象的方法？  
    第一种创建方式：      
        var regExp=/正则表达式/;  
    第二种创建方式：使用内置支持类RegExp  
        var regExp=new RegExp("正则表达式","flags");  
      
    关于flags：  
        g:全局匹配  
        i:忽略大小写  
        m:多行搜索（ES规范制定之后才支持）当前面是正则表达式的时候，m不能使用，当前面是普通字符串的时候，可以使用m  
    正则表达式的test()方法  
        true/false =正则表达式对象.test(用户填写的字符串);  
        true:表示格式匹配成功  
        false:表示格式匹配失败

下面我做了一个邮箱的表单验证

执行结果

![20200916164727376.png][]

![2020091616475898.png][]

## 去除字符串的前后空白trim ##

下面是自己写的表单验证，以下是需求和代码展示

表单验证：  
    （1）用户名不能为空      
    （2）用户名必须在6-14位之间        ^/S+\[a-zA-Z0-9\]\{6,14\}  
    （3）用户名只能有数字和字母组成，不能含有其它符号（正则表达式）  
    （4）密码和确认密码一致，邮箱地址合法。  
    （5）统一失去焦点验证  
    （6）错误提示信息统一在span标签中提示，并且要求字体12号，红色。  
    （7）文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value  
    （8）最终表单中所有项均合法方可提交

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>学生登录</title>
    		<style type="text/css">
    			#mydiv{
    				position: absolute;
    				top: 250px;
    				left: 400px;
    				background-image: url(login_pic.png);
    				width: 300px;
    			}
    		</style>
    	</head>
    	<body>
    		<script type="text/javascript">
    			window.onload=function(){
    				//获取username对象
    				var username=document.getElementById("username");
    				//获取password对象
    				var password=document.getElementById("password");
    				//获取deterPassword对象
    				var deterPassword=document.getElementById("deterPassword");
    				//获取email对象
    				var email=document.getElementById("email");
    				//username的span对象
    				var usernameSpan=document.getElementById("usernameSpan");
    				//password的span对象
    				var passwordSpan=document.getElementById("passwordSpan");
    				//deterPassword的span对象
    				var deterPasswordSpan=document.getElementById("deterPasswordSpan");
    				//email的span对象
    				var emailSpan=document.getElementById("emailSpan");	
    				
    				
    				
    				//用户名
    				username.onblur=function(){
    					//获取value属性
    					var usernameValue=username.value;
    					usernameValue=usernameValue.trim();
    					if(usernameValue===""){
    						usernameSpan.innerText="用户名不能为空";
    						username.style="border: 1px solid red";
    					}else{
    						//用户名不为空
    						if(usernameValue.length<6||usernameValue.legth>14){
    							//用户名长度非法
    							usernameSpan.innerText="用户名长度必须在[6-14]之间";
    							username.style="border: 1px solid red";
    						}else{
    							//用户名长度合法
    							//创建正则表达式
    							var regExp=/^[0-9a-zA-Z]+$/;
    							if(regExp.test(usernameValue)){
    								
    								//username.style="border: 1px solid red";
    								//username.value="";
    							}else{
    								//用户名含有特殊符号
    								usernameSpan.innerText="用户名只能由数字和字母组成";
    								username.style="border: 1px solid red";
    							}
    						}
    					}
    
    				}
    				document.getElementById("username").onfocus=function(){
    					document.getElementById("username").style="border: 1px solid black";
    					if(usernameSpan.innerText!==""){
    						username.value="";
    					}
    					usernameSpan.innerText="";
    				}
    				
    				//密码
    				password.onblur=function(){
    					//创建正则表达式
    					var regExp=/^\S+$/;
    					//获取value属性
    					var passwordValue=password.value;
    					if(!regExp.test(passwordValue)){
    						passwordSpan.innerText="密码不能为空";
    						password.style="border: 1px solid red";
    					}
    				}
    				password.onfocus=function(){
    					passwordSpan.innerText="";
    					password.style="border: 1px solid black";
    				}
    				
    				//确认密码
    				deterPassword.onblur=function(){
    					//获取密码
    					var passwordValue=password.value;
    					//获取确认密码
    					var deterPasswordValue=deterPassword.value;
    					
    					if(passwordValue!==deterPasswordValue){
    						deterPasswordSpan.innerText="两次密码输入不一致";
    						deterPassword.style="border: 1px solid red";
    					}
    				}
    				
    				deterPassword.onfocus=function(){
    					if(deterPasswordSpan.innerText!==""){
    						deterPassword.value="";
    					}
    					deterPasswordSpan.innerText="";
    					deterPassword.style="border: 1px solid black";
    				}
    				
    				//邮箱
    				email.onblur=function(){
    					//创建正则表达式
    					var regExp=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
    					//获取value属性
    					var emailValue=email.value;
    					if(!regExp.test(emailValue)){
    						emailSpan.innerText="邮箱不合法";
    						email.style="border: 1px solid red";
    					}
    				}
    				
    				email.onfocus=function(){
    					if(emailSpan.innerText!==""){
    						email.value="";
    					}
    					emailSpan.innerText="";
    					email.style="border: 1px solid black";
    				}
    				
    				document.getElementById("btn").onclick=function(){
    					//触发username password deterPassword email的onblur
    					username.focus();
    					username.blur();
    					password.focus();
    					password.blur();
    					deterPassword.focus();
    					deterPassword.blur();
    					email.focus();
    					email.blur();
    					if(usernameSpan.innerText==""&&passwordSpan.innerText==""&&deterPasswordSpan.innerText==""&&emailSpan.innerText==""){
    						//获取表单对象
    						var userFormElt=document.getElementById("userForm");
    						//可以在这里设置action
    						//userFormElt.action="";
    						//提交表单
    						userFormElt.submit();
    						alert("注册成功！");
    					}
    				}
    
    			}
    		</script>
    		<div id="mydiv">
    			<form id="userForm" action="http://localhost:8848/jd/save" method="post">
    				<input type="text" id="username" placeholder="用户名" name="username" />
    				<span id="usernameSpan" style="font-size=12px;color: red;"></span>
    				<br><br>
    				
    				<input type="password" id="password" placeholder="密码" name="password" />
    				<span id="passwordSpan" style="font-size=12px;color: red;"></span>
    				<br><br>
    				
    				<input type="password" id="deterPassword" placeholder="确认密码" />
    				<span id="deterPasswordSpan" style="font-size=12px;color: red;"></span>
    				<br><br>
    				
    				<input type="text" id="email" placeholder="电子邮箱" name="email" />
    				<span id="emailSpan" style="font-size=12px;color: red;"></span>
    				
    				<br><br>
    				<input type="button" id="btn" value="注册"/>
    				<input type="reset" value="重置"/>
    			</form>
    		</div>
    	</body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Nzk2MjA4_size_16_color_FFFFFF_t_70 4][]

具体的大家自己去验证吧

## 复选框的全选和取消全选 ##

![20200916165430328.png][]

当点击全选时，下面的都会选择上，当下面三项有一项未选中时，全选框也无法选中。

## 获取下拉列表选中项的value ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Nzk2MjA4_size_16_color_FFFFFF_t_70 5][]

## 显示网页时钟 ##

关于JS中内置的支持类：Date可以用来获取时间/日期。

![20200916165828310.png][]

## 内置支持类Array ##

[Link 1]: http://baike.baidu.com/link?url=S_Vrz07RVK1Uw0RaXGSahcatrIJdrwSsOPe1j51aLHh5O3EB_VLLOqGwulXfZXAaA558KwBJsMb51X4dLkHQech_WrbMzYM6GX78N1XFCAG
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Nzk2MjA4_size_16_color_FFFFFF_t_70]: /images/20221123/67f47e73f9df4c6f97db45298b625b6f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Nzk2MjA4_size_16_color_FFFFFF_t_70 1]: /images/20221123/29ae83895fc9478eafa0fa9943ebaaf6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Nzk2MjA4_size_16_color_FFFFFF_t_70 2]: /images/20221123/618fb345a3a5419e8c73445ef39942e6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Nzk2MjA4_size_16_color_FFFFFF_t_70 3]: /images/20221123/f1babc1c9e5844c89d062e1238bc88f7.png
[20200916164727376.png]: /images/20221123/112bf09f25084744ac363cb8eb0c157f.png
[2020091616475898.png]: /images/20221123/7820a473d3b7435bb8c48543a914d004.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Nzk2MjA4_size_16_color_FFFFFF_t_70 4]: /images/20221123/965e899771e14ac6bb51165eb05eaadb.png
[20200916165430328.png]: /images/20221123/d1362d0495ac4efe976ea580df791af4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Nzk2MjA4_size_16_color_FFFFFF_t_70 5]: /images/20221123/0d7058334bf8435fb52a46fabb8f8cba.png
[20200916165828310.png]: /images/20221123/9beff755905e4700bed595d846673e71.png