一、注册表单提交要求
1.表单需包含昵称、姓名、QQ、手机号、邮箱、密码、确认密码以及提交和重置按钮
2.点击表单里的输入框,隐藏提示文字
3.点击提交和重置按钮时,都需要有相应的提示
4.在表单提交是,需要进行验证验证填写内容是否合理:昵称不超过10个字、姓名不超过4个字、QQ号为长度小于等于10大于5位的数字、手机号为长度11位的数字、密码由字母和数字组成且大于8位小于16位、密码和确认密码需相同
二、实验原理
利用鼠标的点击事件,使其里面placeholder消失,再利用提交时判断其是否符合要求
三、视频效果
表单
四、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 600px;
height: 550px;
background-color: aqua;
margin: 0 auto;
}
td {
font-size: 25px;
}
td>input {
height: 38px;
width: 310px;
font-size: 25px;
outline: none;
}
</style>
</head>
<body>
<div class="box">
<form action="#" id="formlist">
<table cellpadding="10" cellspacing="0">
<tr>
<th colspan="3" style="font-size: 25px;">注册表单提交</th>
</tr>
<tr>
<td class="checked">昵称:</td>
<td>
<input type="text" name="username" id="username" placeholder="请输入用户名,不超过10个字">
</td>
</tr>
<tr>
<td class="checked">姓名:</td>
<td>
<input type="text" name="name" id="name" placeholder="请输入名字,不超过4个字">
</td>
</tr>
<tr>
<td class="checked">QQ:</td>
<td>
<input type="text" name="QQ" id="QQ" placeholder="请输入QQ [5,10)">
</td>
</tr>
<tr>
<td class="checked">手机号:</td>
<td>
<input type="text" name="phone" id="phone" placeholder="请输入手机号11位">
</td>
</tr>
<tr>
<td class="checked">邮箱:</td>
<td>
<input type="text" name="email" id="email" placeholder="请输入邮箱 ">
</td>
</tr>
<tr>
<td class="checked">密码:</td>
<td>
<input type="password" name="password" id="password" placeholder="请输入密码 (8,16)">
</td>
</tr>
<tr>
<td class="checked">确认密码:</td>
<td><input type="password" name="vactor" id="vactor" placeholder="请再次输入密码,必须相等"></td>
</tr>
<tr align="center">
<td colspan="3">
<input id="btn1" type="submit"
style="height: 35px; width: 120px;">
<input id="btn2" type="reset" style="height: 35px;width: 120px;">
</td>
</tr>
</table>
</form>
</div>
<script>
var username = document.getElementById("username")
var name = document.getElementById("name")
var QQ = document.getElementById("QQ")
var phone = document.getElementById("phone")
var email = document.getElementById("email")
var password = document.getElementById("password")
var vactor = document.getElementById("vactor")
var usernames = username.value
var names = name.value
var QQs = QQ.value
var phones = phone.value
var emails = email.value
var passwords = password.value
var vactors = vactor.value
window.onload = function () {
username.onfocus = function () {
username.placeholder = ''
}
name.onfocus = function () {
name.placeholder = ''
}
QQ.onfocus = function () {
QQ.placeholder = ''
}
phone.onfocus = function () {
phone.placeholder = ''
}
email.onfocus = function () {
email.placeholder = ''
}
password.onfocus = function () {
password.placeholder = ''
}
vactor.onfocus = function () {
vactor.placeholder = ''
}
btn1.onclick = function () {
if (usernames.length > 10) {
alert("格式不对请重新填写")
}
if (names.length > 4) {
alert("格式不对请重新填写")
}
if (QQs.length < 5 || QQs.length >= 10) {
alert("格式不对请重新填写")
}
if (phones.length != 11) {
alert("格式不对请重新填写")
}
if (passwords.length < 8 || passwords.length > 16) {
alert("格式不对请重新填写")
}
if (passwords.length != vactors.length) {
alert("格式不对请重新填写")
}
}
}
</script>
</body>
</html>