内容
1.表单需包含昵称、姓名、QQ、手机号、邮箱、密码、确认密码以及提交和重置按钮;
2点击表单里的输入框,隐藏提示文字;
3.点击提交和重置按钮时,都需要有相应的提示;
4.在表单提交是,需要进行验证验证填写内容是否合理:昵称不超过10个字、姓名不超过4个字、QQ号为长度小于等于10大于5位的数字、手机号为长度11位的数字、密码由字母和数字组成且大于8位小于16位、密码和确认密码需相同。
原理
设置if语序,对表单设置限制
用value对表单重置
代码
<!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>
</head>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
body{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
#table{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 400px;
height: 450px;
border: 1px solid #000;
background-color: bisque;
margin-top: 50px;
}
input{
float: right;
}
#submit{
width: 70px;
height: 40px;
line-height: 16px;
font-size: 20px;
margin-top: 40px;
float: left;
}
#reset{
width: 70px;
height: 40px;
line-height: 16px;
font-size: 20px;
margin-top: 40px;
float: right;
}
</style>
</head>
<body>
<table id="table">
<tr>
<td>昵称:<input type="search" id="oname" placeholder="不超过10个字"></td>
</tr>
<tr>
<td>姓名:<input type="search" id="name" placeholder="不超过4个字"></td>
</tr>
<tr>
<td>QQ: <input type="search" id="QQ" placeholder="5~10个数字"></td>
</tr>
<tr>
<td>手机号:<input type="search" id="number" placeholder="请输入11位数字"></td>
</tr>
<tr>
<td>邮箱:<input type="search" id="email" placeholder="请输入"></td>
</tr>
<tr>
<td>密码:<input type="password" id="password" placeholder="8~16个字符"></td>
</tr>
<tr>
<td>确认密码:<input type="password" id="password2" placeholder="8~16个字符"></td>
</tr>
<tr>
<td>
<button id="submit">提交</button>
<button id="reset">重置</button>
</td>
</tr>
</table>
<script>
function Get(obj){
return document.getElementById(obj).value;
}
var input=document.getElementsByTagName("input");
var reset=document.getElementById("reset");
var submit=document.getElementById("submit");
submit.onclick=function(){
if(confirm("是否确定?")){
//设定限制
var tname=/^[\u4e00-\u9fa5]{1,4}/;
var toname=/[a-zA-Z0-9]{1,10}/;
var tnumber3=/^1[3-9][0-9]{9}$/;
var tpassword=/[a-zA-Z0-9]{8,16}/;
var tQQ=/[0-9]{5,10}/;
//设置达成数目
var Number=0;
if(tname.test(Get("name"))){
Number++;
console.log(1);
}
if(toname.test(Get("oname"))){
Number++
console.log(2);
}
if(tnumber3.test(Get("number"))){
Number++
console.log(3);
}
if(tpassword.test(Get("password"))){
Number++
console.log(4);
}
if(tQQ.test(Get("QQ"))){
Number++
console.log(5);
}
if(Get("password")==Get("password2")){
Number++
console.log(6);
}
//数目达成后判断
if(Number==6){
alert("注册成功!");
}
else{
alert("注册失败");
}
}
}
reset.onclick=function(){
if(confirm("是否重置?")){
var oname=document.getElementById("name");
var ooname=document.getElementById("oname");
var onumber=document.getElementById("number");
var oQQ=document.getElementById("QQ");
var oemail=document.getElementById("email");
var opassword=document.getElementById("password");
var opassword2=document.getElementById("password2");
oname.value="";
ooname.value="";
onumber.value="";
oQQ.value="";
oemail.value="";
opassword.value="";
opassword2.value="";
}
}
</script>
</body>
</html>
效果
注册表提交