JQ正则使用

最新推荐文章于 2024-06-18 10:02:03 发布

Recently 祝祝

最新推荐文章于 2024-06-18 10:02:03 发布

阅读量309

点赞数 1

分类专栏： JQ 文章标签：正则表达式 html

本文链接：https://blog.csdn.net/qq_45656077/article/details/120693118

版权

JQ 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一：

在这里插入图片描述

重点

在这里插入图片描述

HTML:

<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>使用正则表达式验证注册页面</title>
	<link rel="stylesheet" href="css/register.css">
	<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
	<script>
		$(function () {
			function funcheck(id, reg, ok, error) {
				var val1 = $("#" + id).val();
				if (reg.test(val1)) {
					$("#" + id + "_prompt").text(ok).removeClass("red");
					return true;
				} else {
					$("#" + id + "_prompt").text(error).addClass("red");
					return false;
				}
			}
			$("form").submit(function () {
				if (!funcheck("user", /^[a-z,A-Z][a-z,A-Z,0-9]{3,15}$/, "通过", "用户名不正确")) {
					return false;
				}
				if (!funcheck("pwd", /^[a-z,A-Z,0-9]{4,16}$/, "通过", "密码不正确")) {
					return false;
				}
				if ($("#pwd").val() == $("#repwd").val()) {
					$("#repwd_prompt").text("两次密码一致").removeClass("red");
				} else {
					$("#repwd_prompt").text("两次密码不一致").addClass("red");
					return false;
				}
				if (!funcheck("email", /^\w+@\w+[.]\w$/, "通过", "电子邮箱格式不正确")) {
					return false;
				}
				if (!funcheck("mobile", /^[1][3-9]\d{9}$/, "通过", "电话号码格式不正确")) {
					return false;
				}
				if (!funcheck("birth", /^(19\d{2}|200\d)-([1-9]|0[1-9]|1[0-2])-([1-9]|0[1-9]|[1-2]\d|3[0-1])$/, "通过", "生日日期格式不正确,例如1980-5-12或1980-05-12")) {
					return false;
				}
			});
		});

	</script>
</head>

<body>
	<section id="register">
		<div><img src="images/logo.jpg" alt="logo" /><img src="images/banner.jpg" alt="banner" /></div>
		<h1 class="hr_1">新用户注册</h1>
		<form action="" method="post" name="myform">
			<dl>
				<dt>用户名：</dt>
				<dd><input id="user" type="text" />
					<div id="user_prompt">英文字母和数字组成的4-16位字符，以字母开头</div>
				</dd>
			</dl>
			<dl>
				<dt>密码：</dt>
				<dd><input id="pwd" type="password" />
					<div id="pwd_prompt">密码由英文字母和数字组成的4-10位字符</div>
				</dd>
			</dl>
			<dl>
				<dt>确认密码：</dt>
				<dd><input id="repwd" type="password" />
					<div id="repwd_prompt"></div>
				</dd>
			</dl>
			<dl>
				<dt>电子邮箱：</dt>
				<dd><input id="email" type="text" />
					<div id="email_prompt"></div>
				</dd>
			</dl>
			<dl>
				<dt>手机号码：</dt>
				<dd><input id="mobile" type="text" />
					<div id="mobile_prompt"></div>
				</dd>
			</dl>
			<dl>
				<dt>生日：</dt>
				<dd><input id="birth" type="text" />
					<div id="birth_prompt"></div>
				</dd>
			</dl>
			<dl>
				<dt>&nbsp;</dt>
				<dd><input name="" type="image" src="images/register.jpg" class="btn" /></dd>
			</dl>
		</form>
	</section>
</body>

</html>

CSS：

*{
    margin:0;
    padding:0;
    font-size:12px;
    line-height:20px;
}
#register{
    width:525px;
    margin: 0 auto;
}
.hr_1 {
    font-size: 14px;
    font-weight: bold;
    color: #3275c3;
    height: 35px;
    border-bottom: 2px solid #3275c3;
    vertical-align:bottom;
    padding-left:12px;
    margin-bottom: 15px;
}
#register dl{clear: both; height: 30px;}
#register dl dt{
    text-align:right;
    width:80px;
    height:25px;
    padding-right:5px;
    float: left;
}
#register dl dd{
    float: left;}
#register dl dd div{ display: inline; padding-left: 5px;}
#register dl dd input:not(.btn){
    width:130px;
    height:18px;
    border:solid 1px #0066FF;
}


.red{
    color:#cc0000;
    font-weight:bold;
}

div{
    color:blueviolet;
}

二：在这里插入图片描述

格式封装，required请求的使用。

在这里插入图片描述

Recently 祝祝

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JQ正则使用

一：重点HTML:<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>使用正则表达式验证注册页面</title> <link rel="stylesheet" href="css/register.css"> <script type="text/javascript" src="../js/jquery-1.8
复制链接

扫一扫