<!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>
