版权声明：hxt未经允许不可转载 https://blog.csdn.net/weixin_42979840/article/details/82876704
为了防止以后忘记,在此做记录
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用正则表达式验证注册页面</title>
<link rel="stylesheet" href="css/register.css">
<script src="js/jquery-1.12.4.js"></script>
<script>
//判断字符串是否为空
function isEmptyOrBlank(str) {
if (str == null || str.length == 0) {
return true;
} else {
return false;
}
}
//验证账户
function AccountName() {
var $accN = $("#user").val();
if (!isEmptyOrBlank($accN)) {
var $accRegular = /^[a-zA-Z]{1}\w{3,15}$/;
if (!$accRegular.test($accN)) {
$("#user_prompt").show();
return false;
} else {
return true;
}
} else {
return false;
$("#user_prompt").show();
}
}
//验证密码
function password() {
var $password = $("#pwd").val();
if (!isEmptyOrBlank($password)) {
var $passRegular = /^\w{4,10}$/;
if (!$passRegular.test($password)) {
$("#pwd_prompt").show();
return false;
} else {
return true;
}
} else {
return false;
$("#pwd_prompt").show();
}
}
//确定密码
function confirmPassword() {
var $password = $("#pwd").val();
var $rePassWord = $("#repwd").val();
//使用全等
if (!($password === $rePassWord)) {
$("#repwd_prompt").show();
return false;
}
}
//验证邮箱
function mailbox() {
var $mailbox = $("#email").val();
if (!isEmptyOrBlank($mailbox)) {
var $mailRegular = /^\w{1,10}@\w{0,3}.\w{3}$/;
if (!$mailRegular.test($mailbox)) {
$("#email_prompt").show();
return false;
} else {
return true;
}
} else {
return false;
$("#email_prompt").show();
}
}
//验证手机
function phone() {
var $phone = $("#mobile").val();
if (!isEmptyOrBlank($phone)) {
var $phoneRegular = /^\w{1,10}@\w{0,3}.\w{3}$/;
if (!$phoneRegular.test($phone)) {
$("#mobile_prompt").show();
return false;
} else {
return true;
}
} else {
return false;
$("#mobile_prompt").show();
}
}
//验证生日
function abirth() {
var $birth = $("#birth").val();
if (!isEmptyOrBlank($birth)) {
var $birthRegular = /^((19[0-9]{2}|20([0-1][0-8]))-(0[0-9]|1[0-2])-([0-2]\d|3[0-1]))$/;
if (!$birthRegular.test($birth)) {
$("#birth_prompt").show();
return false;
} else {
return true;
}
} else {
return false;
$("#birth_prompt").show();
}
}
//失去焦点的时候
$(function () {
//账户
$("#user").focus(function () {
$("#user_prompt").hide();
});
$("#user").blur(function () {
AccountName();
});
//密码框
$("#pwd").focus(function () {
$("#pwd_prompt").hide();
});
$("#pwd").blur(function () {
password();
});
//密码确认框
$("#repwd").focus(function () {
$("#repwd_prompt").hide();
});
$("#repwd").blur(function () {
confirmPassword();
});
//邮箱确认
$("#email").focus(function () {
$("#email_prompt").hide();
});
$("#email").blur(function () {
mailbox();
});
//手机确认
$("#mobile").focus(function () {
$("#mobile_prompt").hide();
});
$("#mobile").blur(function () {
phone();
});
//生日确认
$("#birth").focus(function () {
$("#birth_prompt").hide();
});
$("#birth").blur(function () {
abirth();
});
});
</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" style="display:none">用户名由英文字母开头和数字+英文组成,4~16位</div>
</dd>
</dl>
<dl>
<dt>密码：</dt>
<dd>
<input id="pwd" type="password" />
<div id="pwd_prompt" style="display:none">密码由英文字母和数字组成的4-10位字符</div>
</dd>
</dl>
<dl>
<dt>确认密码：</dt>
<dd>
<input id="repwd" type="password" />
<div id="repwd_prompt" style="display:none">两次密码不一致</div>
</dd>
</dl>
<dl>
<dt>电子邮箱：</dt>
<dd>
<input id="email" type="text" />
<div id="email_prompt" style="display:none">请输入正确的邮箱格式 [email protected]</div>
</dd>
</dl>
<dl>
<dt>手机号码：</dt>
<dd>
<input id="mobile" type="text" />
<div id="mobile_prompt" style="display:none">手机格式输入错误 11位</div>
</dd>
</dl>
<dl>
<dt>生日：</dt>
<dd>
<input id="birth" type="text" />
<div id="birth_prompt" style="display:none">1900~2018之间 例如2016-11-25</div>
</dd>
</dl>
<dl>
<dt> </dt>
<dd>
<input name="" type="image" src="images/register.jpg" class="btn" />
</dd>
</dl>
</form>
</section>
</body>
</html>