JavaScript综合注册案例

最新推荐文章于 2022-09-03 11:16:03 发布

原创最新推荐文章于 2022-09-03 11:16:03 发布 · 448 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

Web组件化结构开发专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何使用正则表达式进行表单验证，包括用户名和身份证的有效性检查。探讨了HTML5的内置验证功能及自定义验证需求，通过实例展示了正则表达式的应用。

项目目标效果图

在这里插入图片描述

表单验证

1、用户名：一般由数字，字母，下划线组成
2、手机号：一般是11位的阿拉伯数字
3、数据有效性验证的2个途径：
(1) Html4时期，通过js脚本验证一些表单元素；
(2) Html5中，有些表单控件自带一些验证属性
在这里插入图片描述

总结

H5验证是存在的，但是有时候自己的需求进行验证，所以正则表达式必须存在的！

拓展知识点

elementList=document.querySelectorAll(selectors);
1、elementList是一个静态的NodeList类型的对象
2、selectors是一个由逗号链接的包含一个或者多个css选择器的字符串

常用正则表达式

在这里插入图片描述

登录小案例代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用户名密码校验</title>
</head>
<body>
	<form action="#" method="post" id="formInfo">
		<div id="err" style="color: red;"></div>
		<div>
			<label>姓名：</label>
			<input type="text" id="name">
		</div>
		<div>
			<label>身份证：</label>
			<input type="text" id="idno">
		</div>
		<div>
			<input type="submit" value="注册">
		</div>
	</form>
</body>
<script type="text/javascript">
	document.getElementById('formInfo').onsubmit = function(){
		var regexp1 = /^[\u4e00-\u9fa5]{2,8}$/,
			regexp2 = /^[1234568]\d{16}[0-9xX]$/;
		var name = document.getElementById('name').value,
			idno = document.getElementById('idno').value,
			err = document.getElementById('err');

		// regexp1.test(name) 返回布尔型
		if (regexp1.test(name) == false) {
			err.innerHTML = '无效姓名';
			return false;
		} else if (regexp2.test(idno) == false) {
			err.innerHTML = '无效身份证';
			return false;
		} else {
			alert('验证通过');
			return true;
		}
	}
</script>
</html>