JavaScript正则表达式及文档对象模型(9.23)

淡忘728

已于 2022-09-25 16:22:53 修改

阅读量188

点赞数

文章标签： javascript 正则表达式开发语言

于 2022-09-25 14:23:33 首次发布

本文链接：https://blog.csdn.net/weixin_65824274/article/details/127031106

版权

正则表达式对象

正则表达式主要用于表单验证，如手机号、邮箱、身份证等

中文字符:/^[\u4e00-\u9fa5]$/

邮箱:/^[0-9a-zA-Z]+@ [0-9a-zA-Z]+[\.]{1}[0-9a-zA-Z]+$/

电话:/^(\d{3,4}-)?\d{7,8}$/

月份:/^((0?[1-9])|1[0-2])$/

天数:/^((0?[1-9])(((1|2)[0-9])|3031)$/

匹配符	说明
\b	匹配单词边界
\d	匹配单个数字字符[0-9]
\f	匹配单个换页符
\n	匹配单个换行符
\r	匹配单个回车符
\s	匹配任何空白符，包括空格、制表符、换页符等[\f\n\r\t\v]
\t	匹配单个制表符
\v	匹配单个垂直制表符
\w	匹配包含下划线的任意单个字符[0-9a-zA-Z]
^ $	四配字符串的开始和结束位置

匹配符	说明
+	匹配前面的子表达式1-多次
?	匹配前面的子表达式0-1次
{n,m}	匹配前面的子表达式n-m次
.	匹配除“\n”之外的任意字符
(xly)	匹配x或y
[]	匹配所包含的任意一个字符
[^]	匹配非包含的任意一个字符
[.]	匹配指定范围内的任意一个字符
*	匹配前面的子表达式0-多次

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	用户名:<input type="text" name="uname" id="uname" value="" /><br />
	密码:<input type="text" name="pwd" id="pwd" value="" /><br />
	Email:<input type="text" name="email" id="email" value="" /><br />
	<input type="button"  id="btn" value="验证" />
	<body>
		<script type="text/javascript">
			document.getElementById("btn").onclick=function(){
				var uname = document.getElementById("uname").value
				var pwd = document.getElementById("pwd").value
				var email = document.getElementById("email").value
				//编写一个用于匹配密码格式的正则表达式
				//用户名只能是3-5位，中文字符
				var reg_1 = /^[\u4e00-\u9fa5]{3，5}$/
				//密码只能是6位，且密码只能包含数字、字母、下划线
				var reg_2 = /^[0-9a-zA-Z_]{6}$/
				//密码长度6-10位，且只能是数字、字母、下划线
				//var reg_3 = /^[0-9a-zA-Z_]{6,10}$/
				//Email 邮箱
				var reg_4 = /^\S+@ [0-9a-zA-Z]+[\.]{1}\w+$/
				var isname = reg_1.test(uname)
				console.log(isname)
				var isPwd = reg_2.test(pwd)
				console.log(isPwd)
				var isemail = reg_4.test(email)
				console.log(isemail)
				
			}
		</script>
	</body>
</html>

文档对象模型 (DOM)
DOM-Document Obiect Model，它是W3C国际组织的一套Web标准。它以树形结构表示文档
(HTMLXML等)，定义了遍历、检查和修改各节点的属性和方法。

W3C组织将DOM分为以下几种不同版本:
Core DOM:定义任意结构文档的标准对象售合
XMLDOM:定义了针对XML文件的标准对象集合
HTML DOM:定义了针对HTML文件的标准对象集合
DOMCSS:定义了在程序中操作CSS样式的接口
DOM Events:给DOM对象添加事件处理

DOM(Document Obiect Model:文对象模型可以干什么?
(1)获取一个元素（2)移除一个元素
(3)年建一个元素
(4)向页面里面添加一个元素 (5)哈元素绑定一事件
(6)欧元素的服性
(7)哈元素源加一路css样式
DOM的核心对象就是document对象
document对象是浏览器内置对象的一个对象，里面存储着专门用来操作元素的各种方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<style type="text/css">
			.sp{
				color:blue
			}
		</style>
		<input type="button" name="btn" id="btn" value="点击" />
		<div id="div1">
			这是div1
		</div>
		<div id="div2">
			这是div2
		</div>
		<div id="div3">
			这是div3
		</div>
		<ul>
			<li>列表项1</li>
			<li>列表项2</li>
			<li>列表项3</li>
			<li>列表项4</li>
		</ul>
		<span class="sp">
			这是一个span标签
		</span>
		<p class="sp"></p>
		性别:<input type="radio" name="sex" value="男" />男
		     <input type="radio" name="sex" value="" />女<br />
		<input type="text" name="uname"  value="" />
		<script type="text/javascript">
			/**
			 * 使用document获取标签的几种方式
			 */
//			var div1 = document.getElementById("div1")
//			console.log(div1)
			//如果这个标签有id属性，那么可以直接使用id的值就可以获取到该标签
			console.log(btn)
			console.log(div1)
			btn.onclick=function(){
				//alert("aa")
				//通过标签名来获取标签
			var div_1 = document.getElementById("div")	
				//console.log(div_1)
				for(var i=0;i<div_1.length;i++){
					console.log(div_1[i])
				}
				//要获取到页面中所有应用.sp标签
				var sp_1 = document.getElementById("sp")
				console.log(sp_1)
				sp_1[0].innerHTML = "更改后的span"
				var sex_1 = document.getElementById("sex")
				console.log(sex_1[0].value)
				console.log(document.querySelector("#div1"))
				console.log(document.querySelector("div"))
				console.log(document.querySelectorAll("div"))
			}
		</script>
	</body>
</html>

淡忘728

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript正则表达式及文档对象模型(9.23)

邮箱:/^[0-9a-zA-Z]+@ [0-9a-zA-Z]+[\.]{1}[0-9a-zA-Z]+$/document对象是浏览器内置对象的一个对象，里面存储着专门用来操作元素的各种方法。[1-9])(((1|2)[0-9])|3031)$/[1-9])|1[0-2])$/HTML DOM:定义了针对HTML文件的标准对象集合。DOM的核心对象就是document对象。电话:/^(\d{3,4}-)?中文字符:/^[\u4e00-\u9fa5]$/Core DOM:定义任意结构文档的标准对象售合。
复制链接

扫一扫