Javascript正则表达式

夜未柒

已于 2023-07-03 19:31:02 修改

阅读量235

点赞数

分类专栏： Javascript 文章标签：正则表达式 javascript

于 2022-09-25 19:07:31 首次发布

本文链接：https://blog.csdn.net/m0_67427343/article/details/127041359

版权

Javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

正则表达式常用的用法

^[1-9]\d*$ //匹配正整数
^-[1-9]\d*$ //匹配负整数
^-?[1-9]\d*$ //匹配整数
^[1-9]\d*|0$ //匹配非负整数（正整数 + 0）
^-[1-9]\d*|0$ //匹配非正整数（负整数 + 0）
^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$ //匹配正浮点数
^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ //匹配负浮点数
^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$ //匹配浮点数
^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$ //匹配非负浮点数（正浮点数 + 0）
^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$//匹配非正浮点数（负浮点数 + 0）s

例题：实现下列图片效果

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.num {
				margin-left: 20px;
			}
			
			.bd {
				width: 250px;
				margin-left: 42%;
			}
		</style>
	</head>

	<body>
		<table class="bd">
			<tr>
				<th colspan="2">欢迎注册**网站</th>
			</tr>
			<tr>
				<th>姓名:</th>
				<th><input type="text" id="a" placeholder="2-4个中文" class="w"/></th>
			</tr>
			<tr>
				<th>密码:</th>
				<th><input type="text" id="b" placeholder="至少6个数字必须是字母数字下划线" class="w"/></th>
			</tr>
			<tr>
				<th>邮箱:</th>
				<th><input type="text" id="c" placeholder="单域名邮箱" class="w"/></th>
			</tr>
			<tr>
				<th>年龄:</th>
				<th><input type="text" id="d" placeholder="整数" class="w"/></th>
			</tr>
		</table>

		<script type="text/javascript">
			document.getElementById("e").onclick = function() {
				var xm = /^[\u4e00-\u9fa5]+$/
				var xm1 = document.getElementById("a").value
				var xm2 = xm.test(xm1)
				if(xm2 == false) {
					alert("名字格式不正确")
					return
				}
				var mm = /^[0-9a-zA-Z_]{6,}$/
				var mm1 = document.getElementById("b").value
				var mm2 = mm.test(mm1)
				if(mm2 == false) {
					alert("密码格式不正确")
					return
				}
				var en = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
				var en1 = document.getElementById("c").value
				var en2 = en.test(en1)

				if(en2 == false) {
					alert("邮箱格式不正确")
					return
				}
				var nl = /^[0-9]*$/
				var nl1 = document.getElementById("d").value
				var nl2 = nl.test(zheng1)
				if(nl2 == false) {
					alert("年龄格式不正确")
					return
				}
				if(xm2 && mm2 && en2 && nl2) {
					alert("验证成功")
				}
			}
		</script>
	</body>

</html>