用正则表达式的方式实现注册登入的校验

最新推荐文章于 2022-05-28 15:31:21 发布

于珂琛。

最新推荐文章于 2022-05-28 15:31:21 发布

阅读量3.1k

点赞数 10

文章标签： javascript

本文链接：https://blog.csdn.net/a815886696/article/details/108714458

版权

表单验证：

用户名：6–18位数字,字母,下划线_，文本域获取焦点和失去焦点出现提示文字。
登入密码：请输入6–20位数字,字母,任意字符，文本域获取焦点和失去焦点出现提示文字。（效果同上）
确认密码：内容与登入密码必须一致。
姓名：2-5位中文字。
身份证号：开头为1234568，中间16位为数字，结尾为数字或Xx。
邮箱：常规验证如下
手机号：为1开头是11位数字
提交是验证为一项是否填写正确，并弹框提示。
确认已阅读选项是否选中，并弹框提示。

页面效果：
1、提交是验证为一项是否填写正确，并弹框提示。
2、确认已阅读选项是否选中，并弹框提示。

在这里插入图片描述
源代码：html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用户登入界面</title>
	<link rel="stylesheet" type="text/css" href="demo.css">
	<script type="text/javascript" src="demo.js"></script>
</head>
<body>
	<form id="forms" method="post" action="#">
		<!-- 头部 -->
		<header>--账户信息--</header>
		<!-- 内容 -->
		<section>
			<div>
				<label>用户名：</label>
				<input type="text" id="userName" name="userName" placeholder="用户设置成功后不可修改" />
				<span></span>
				<p></p>
			</div>
			<div>
				<label>登陆密码：</label>
				<input type="password" id="password" placeholder="6-20位字母，数字或符号"/>
				<span></span>
				<p></p>
			</div>
			<div>
				<label>确认密码：</label>
				<input type="password" id="passwordTwos"  placeholder="请再次输入密码"/>
				<span></span>
				<p></p>
			</div>
			<div>
				<label>姓名：</label>
				<input type="text" id="theName" placeholder="请输入姓名，中文且最多五位" />
				<span></span>
				<p></p>
			</div>
			<div>
				<label>身份证号：</label>
				<input type="text" id="identity" placeholder="请输入身份证号"