<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.2.1.min.js"></script>
<style>
table {
border: 1px solid #999;
border-collapse: collapse;
}
td {
padding: 10px;
height: 50px;
border: 1px solid #999;
}
tr td:first-child {
text-align: right;
background-color: aqua;
}
input {
background-color: aqua;
border: 1px solid #999;
float: left;
}
div {
display: inline;
float: left;
margin-left: 10px;
}
button {
width: 100px;
margin-left: 250px;
margin-top: 10px;
}
img {
width: 20px;
height: 20px;
margin-right: 5px;
margin-top: 5px;
}
</style>
<script>
$(function () {
$("img").hide();
$("#email").blur(function () {
$("img").hide();
/*验证emial*/
if ($("#email").val().indexOf("@") != -1) {
$("#dui").show();
$("#emid").text("用户可用");
} else {
$("#cuo").show();
$("#emid").text("Email错误");
}
});
/*验证暱称*/
$("#name").blur(function () {
if ($("#name").val().length < 4) {
$("#nameid").text("用户输入信息错误");
} else {
$("#nameid").text("用户输入正确");
}
});
/*验证密码格式*/
var $pass = "";
$("#password").blur(function () {
if ($("#password").val().length < 6) {
$("#pass").text("用户密码不可用");
} else {
$pass = $("#password").val();
$("#pass").text("用户密码可用");
}
});
/*验证两次密码是否一致*/
$("#repass").blur(function () {
if ($("#repass").val() == $pass) {
$("#press").text("用户密码输入正确");
} else {
$("#press").text("用户两次密码不一致");
}
});
/*验证点击*/
$("#add").click(function () {
/*表单符合要求*/
if ($("#email").val().indexOf("@") != -1 && $("#name").val().length >= 4 && $("#password").val().length >= 6 && $("#repass").val() == $pass) {
alert("用户表单符合要求");
} else {
alert("用户表单有误");
}
});
})
</script>
</head>
<body>
<!--页面制作-->
<table>
<tr>
<td>请填写你的Eamil地址:</td>
<td><input type="text" id="email">
<div>请填写有效的Email地址,在下一步您将用此邮箱接收验邮件。<br><img src="cuo.gif" id="cuo">
<img src="dui.gif" id="dui"><span id="emid"></span></div>
</td>
</tr>
<tr>
<td>设置您在当当网的暱称:</td>
<td><input type="text" id="name">
<div>您的暱称可以由小写英文字母、中文、数字组成。<br>长度4-20个字符,一个汉字为两个字符。<br><span id="nameid"></span></div>
</td>
</tr>
<tr>
<td>设置密码:</td>
<td><input type="password" id="password">
<div>您的密码可以由大小写英文字母,数字组成,长度6-20位<br><span id="pass"></span></div>
</td>
</tr>
<tr>
<td>再次输入您设置的密码:</td>
<td><input type="password" id="repass">
<div><span id="press"></span></div>
</td>
</tr>
</table>
<!--注册按钮-->
<button id="add">注册</button>
</body>
</html>