<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>验证用户注册</title>
<meta charset="utf-8" />
<style>
#mailbox,#user,#password,#repetition,#phone
{
width: 250px;
}
img
{
height: 10px;
}
a
{
color: black;
}
#register {
width: 150px;
height: 45px;
background-color: sandybrown;
border-radius: 10px;
}
</style>
</head>
<body>
<form>
*Email ：
<input type="text" value="" placeholder="请输入您的Email地址" name="" id="mailbox" />
<img id="picture" />
<span id="site"></span>
<br />
<br />
*用户名 ：
<input type="text" value="" name="" placeholder="请输入你的用户名" id="user" />
<img id="pictureTwo" />
<span id="import"></span>
<br />
<br />
*密 码：
<input type="password" value="" name="" placeholder="请输入密码" id="password" />
<img id="pictureThree" />
<span id="cipher"></span>
<br />
<br />
*确认密码：
<input type="password" value="" name="" placeholder="请输入您的重复密码" id="repetition" />
<img id="pictureFour" />
<span id="repetitive"></span>
<br /><br />
*在线联系：
<input type="text" value="" name="" placeholder="请输入您的电话号码" id="phone" /><a
href="#">没有旺旺？注册</a> <a href="#">下载阿里旺旺</a>
<img id="pictureFive" />
<span id="number"></span>
<br /><br />
<input type="checkbox" name="read" id="read" value="" />我已阅读会员权益和义务
<br /><br />
<input type="button" value="注 册" name="" id="register" onclick="login()" />
</form>
<script>
//packaging封装函数
function packaging(id) {
return document.getElementById(id);
}
var mailboxpang = null;
var userpang = null;
var passwordname = null;
var repetitionname = null;
var phonename = null;
var readpang = null;
var mailbox = packaging("mailbox");
var user=packaging("user")
var password = packaging("password");
var repetition=packaging("repetition")
var phone=packaging("phone")
mailbox.onblur = function () { //Email地址
var sum = /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/;
console.log("2");
if (sum.test(packaging("mailbox").value)) {
packaging("picture").src = "img/√.jpg";
packaging("site").innerHTML = "合法";
mailboxpang = true;
} else if (packaging("mailbox").value == "") {
packaging("picture").src = "img/感叹号.PNG";
packaging("site").innerHTML = "请输入您的Email地址";
mailboxpang = false;
} else {
packaging("picture").src = "img/感叹号.PNG";
packaging("site").innerHTML = "输入错误，至少3位数,最多7位数";
mailboxpang = false;
}
}
user.onblur = function () { //用户名
var sum = /^[a-zA-Z].{5,8}$/;
if (sum.test(packaging("user").value)) {
packaging("pictureTwo").src = "img/√.jpg";
packaging("import").innerHTML = "合法";
userpang = true;
} else if (packaging("user").value == "") {
packaging("pictureTwo").src = "img/感叹号.PNG";
packaging("import").innerHTML = "用户名不能为空";
userpang = false;
} else {
packaging("pictureTwo").src = "img/感叹号.PNG";
packaging("import").innerHTML = "须以字母开头，至少6位，建议使用Email";
userpang = false;
}
}
password.onblur = function () { //密码
var sum = /^\w{3,6}$/;
if (sum.test(packaging("password").value)) {
packaging("pictureThree").src = "img/√.jpg";
packaging("cipher").innerHTML = "合法";
passwordname = true;
} else if (packaging("password").value == "") {
packaging("pictureThree").src = "img/感叹号.PNG";
packaging("cipher").innerHTML = "密码不能为空";
passwordname = false;
} else {
packaging("pictureThree").src = "img/感叹号.PNG";
packaging("cipher").innerHTML = "密码设置至少3位数，最多7位数";
passwordname = false;
}
}
repetition.onblur = function (){//确认密码
if(packaging("repetition").value == ""){
packaging("pictureFour").src = "img/感叹号.PNG";
packaging("repetitive").innerHTML = "密码不能为空";
repetitionname = false;
}
else if(this.value===password.value){
packaging("pictureFour").src = "img/√.jpg";
packaging("repetitive").innerHTML = "合法";
repetitionname=true;
}
else{
packaging("pictureFour").src = "img/感叹号.PNG";
packaging("repetitive").innerHTML = "两次密码不一致，请重新输入";
repetitionname = false;
}
}
phone.onblur = function () { //输入联系方式
var sum =/^\d{11}$/;
if (sum.test(packaging("phone").value)) {
packaging("pictureFive").src = "img/√.jpg";
packaging("number").innerHTML = "合法";
phonename = true;
} else if (packaging("phone").value == "") {
packaging("pictureFive").src = "img/感叹号.PNG";
packaging("number").innerHTML = "请输入旺旺ID，方便企业用户在线联系你";
phonename = false;
} else {
packaging("pictureFive").src = "img/感叹号.PNG";
packaging("number").innerHTML = "输入错误，不能为字母数字下划线开头且长度为11位数字";
phonename = false;
}
}
</script>
</body>
</html>
//根据内容可适当修改
//可参考网站：https://www.cnblogs.com/Renyi-Fan/p/12026277.html
