题目需求:
1.表单需包含昵称、姓名、QQ、手机号、邮箱、密码、确认密码以及提交和重置按钮;
2.点击表单里的输入框,隐藏提示文字;
3.点击提交和重置按钮时,都需要有相应的提示;
4.在表单提交是,需要进行验证验证填写内容是否合理:昵称不超过10个字、姓名不超过4个字、QQ号为长度小于等于10大于5位的数字、手机号为长度11位的数字、密码由字母和数字组成且大于8位小于16位、密码和确认密码需相同。
演示:
注册表单
body部分:
<body>
<div class="dan_content">
<form action="">
<span class="first"><strong>注册表单</strong></span>
<div class="inner"><span>昵称:</span><input type="text" placeholder="请输入昵称" maxlength="10"></div>
<div class="inner"><span>姓名:</span><input type="text" placeholder="请输入姓名" maxlength="4"></div>
<div class="inner"><span>QQ :</span><input type="text" placeholder="请输入QQ" minlength="6" maxlength="10"></div>
<div class="inner"><span>手机号:</span><input type="tel" placeholder="请输入手机号" maxlength="11" minlength="11"></div>
<div class="inner"><span>邮箱:</span><input type="email" placeholder="请输入邮箱"></div>
<div class="inner"><span>密码:</span><input type="password" placeholder="请输入密码" minlength="8" maxlength="16" ></div>
<div class="inner" ><span>确认密码:</span><input type="password" placeholder="请确认密码" minlength="8" maxlength="16"></div>
<input class="btn" type="submit" id="btn1">
<input class="btn" id="btn2" type="reset">
</form>
</div>
css部分:
<style>
*{
margin: 0;
padding: 0;
}
.dan_content{
width: 350px;
height: 420px;
margin: 100px auto;
border: 1px solid black;
background-color: cyan;
border-radius: 15px;
}
.dan_content div{
padding: 10px ;
outline: none;
}
.first{
margin: 2px 145px;
}
.dan_content div input{
outline: none;
width: 150px;
height: 25px;
border: 1px solid black;
border-radius: 5px;
padding-left: 10px;
}
.dan_content span{
display: inline-block;
width: 80px;
}
#btn1{
margin: 10px 90px;
width: 60px;
height: 30px;
}
#btn2{
width: 60px;
height: 30px;
margin: 10px -55px;
}
</style>
JavaScript部分:
<script>
//填充内容
let pass =document.querySelectorAll(".inner input")
for(let i in pass){
pass[i].onfocus=function(){
pass[i].placeholder=" "
//输入内容后保持清除
}
}
//设置提交
let btn1=document.getElementById("btn1")
btn1.onclick=function(){
alert("确定提交?")
}
//设置重置
let btn2=document.getElementById("btn2")
btn2.onclick=function(){
alert("确定重置?")
}
//点击提交和重置后的提示
function fn(){
if(putk[6].value===" "){
alert("请输入密码");
return false;
}
if(pass[7].value!==c2.value){
alert("两次密码不同请重新输入")
return false
}else{
return true
}
}
//全部填充
pass[7].onblur=fn()
btn1.onclick=fn()
</script>
实现原理:长度限制:在input中设置min与maxlength值设置输入上限;利用click事件与alert输出反馈内容。使用if判断密码内容是否相同。将按钮绑定弹窗事件,提供交互