正则表达式与DOM操作在前端验证与网页交互中的应用-优快云博客

本文链接：https://blog.youkuaiyun.com/Emperorn/article/details/127009113

正则表达式对象

1.compile()方法。把正则表达式编译为内部格式，从而执行更快使用新正则去替换旧正则，主要用于提升比较复杂和耗时的处理过程的性能，一般情况下很少使用。

2.exec()方法。用正则表达式在字符串中查找，并返回包含结果的一个数组。不仅用于判断给定的字符串是否匹配，而且会返回结果的详细信息。

3.test()方法。返回一个bool值，它指出被查找的字符串是否匹配给定的模式。使用频繁，主要用于匹配测试。匹配成功返回true，否则返回false。

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

       <script>
                //中文字符
				var a = /^[\u4e00-\u9fa5]{3,5}$/
				//邮箱
				var b = /^\S+@[0-9a-zA-Z]+[\.]{1}\w+$/
				//电话
				var c = /^(\d{3,4}-)?\d{7,8})$/
				//月份
				var d = /^((0?[1-9])|1[0-2])$/
				//天数
				var e = /^((0?[1-9])|((1|2)[0-9])|30|31)$/
		</script>

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		用户名：<input type="text" name="" id="name" value="" /><br />
		密码：<input type="text" name="" id="mm" value="" /><br />
		email：<input type="text" name="" id="email" value="" />
		<input type="button" name="" id="yz" value="验证" />
		<script type="text/javascript">
			document.getElementById("yz").onclick = function() {
				//密码只能是6-8，且里面只能包含数字、字母、下划线
				var name = document.getElementById("name").value
				var mm = document.getElementById("mm").value
				var email = document.getElementById("email").value
				//编写一个用于匹配密码格式的正则表达式
				//只能输入中文
				var iname = /^[\u4e00-\u9fa5]{3,5}$/
				//只能输入数字、小写字母、大写字母和下划线，并且必须在6-10位之间
				var imm = /^[0-9a-zA-Z_]{6,10}$/
				var sname = iname.test(name)
				console.log(sname)
				var smm = imm.test(mm)
				console.log(smm)

				//邮箱地址 12332@.com   只能输入邮箱
				var iemail = /^\S+@[0-9a-zA-Z]+[\.]{1}\w+$/
				console.log(iemail.test(email))	
			}
		</script>
	</body>
</html>

文档对像模型

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

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

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

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

js总结6