需求
1.表单需包含昵称、姓名、QQ、手机号、邮箱、密码、确认密码以及提交和重置按钮;
2.点击表单里的输入框,隐藏提示文字;
3.点击提交和重置按钮时,都需要有相应的提示;
4.在表单提交是,需要进行验证验证填写内容是否合理:昵称不超过10个字、姓名不超过4个字、QQ号为长度小于等于10大于5位的数字、手机号为长度11位的数字、密码由字母和数字组成且大于8位小于16位、密码和确认密码需相同。
效果展示
实现原理
用oninput中判断是否输入正确的格式,若没有则弹出警告并返回重新输入
给两个按钮绑定点击事件,弹出警告框
使用正则表达式判断是否输如合理,若不合理则显示提示
具体代码
<!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>login</title>
</head>
<style>
.box{
margin: 150px auto;
width: 300px;
text-align: center;
}
p{
font-size: 30px;
color: rgb(32, 32, 216);
}
.box>input{
display: inline-block;
width: 200px;
height: 20px;
line-height: 20px;
margin: 10px 0;
color: black;
}
.sbox>input{
margin: 10px 10px;
}
</style>
<body>
<div class="box">
<p>注册</p>
<input type="text" placeholder="请输入昵称" name="nicheng">
<input type="text" placeholder="请输入真实姓名" name="realname">
<input type="text" placeholder="请输入QQ号码" name="qq">
<input type="text" placeholder="请输入电话号码" name="phonenumber">
<input type="text" placeholder="请输入邮箱" name="message">
<input type="password" placeholder="请输入密码" name="passvalue">
<input type="password" placeholder="请确认密码" name="confirm">
<div class="sbox">
<input type="submit">
<input type="reset">
</div>
</div>
<script>
window.onload=function(){
var oinput=document.querySelectorAll(".box input")
oinput[0].onfocus=function(){
oinput[0].placeholder=""
this.value=""
this.style.color="black"
}
oinput[0].onblur=function(){
oinput[0].placeholder="请输入昵称"
if (this.value.length>10) {
this.value="昵称不能超过10个字"
this.style.color="red"
}
}
oinput[1].onfocus=function(){
oinput[1].placeholder=""
this.value=""
this.style.color="black"
}
oinput[1].onblur=function(){
oinput[1].placeholder="请输入真实姓名"
if (this.value.length>4) {
this.value="姓名不能超过4个字"
this.style.color="red"
}
}
oinput[2].onfocus=function(){
oinput[2].placeholder=""
this.value=""
this.style.color="black"
}
oinput[2].onblur=function(){
oinput[2].placeholder="请输入QQ号码"
function checkqq(str){
var qqStr=/^[1-9]{1}[0-9]{5,9}$/
var flag=false
if(qqStr.test(str)){
flag=true
}
return flag
}
if (checkqq(this.value)) {
}else{
this.value="QQ号码不正确"
this.style.color="red"
}
}
oinput[3].onfocus=function(){
oinput[3].placeholder=""
this.value=""
this.style.color="black"
}
oinput[3].onblur=function(){
oinput[3].placeholder="请输入电话号码"
function checkphone(str){
var phoneStr=/^(\w){11}$/
var flag=false
if(phoneStr.test(str)){
flag=true
}
return flag
}
if (checkphone(this.value)) {
}else{
this.value="电话号码不正确"
this.style.color="red"
}
}
oinput[4].onfocus=function(){oinput[4].placeholder=""}
oinput[4].onblur=function(){oinput[4].placeholder="邮箱"}
oinput[5].onfocus=function(){
oinput[5].placeholder=""
this.type="password"
this.value=""
this.style.color="black"
}
oinput[5].onblur=function(){
oinput[5].placeholder="请输入你的密码"
function checkword(str){
var reg = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\\W_.,/;:!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\\W_!@#$%^.,/;:&*`~()-+=]+$)(?![0-9\\W_!@#.,/;:$%^&*`~()-+=]+$)(?![a-zA-Z0-9]+$)(?![a-zA-Z\\W_!@#$%.,/;:^&*`~()-+=]+$)(?![a-z0-9\\W_!@#$%.,/;:^&*`~()-+=]+$)(?![0-9A-Z\\W_!@#.,/;:$%^&*`~()-+=]+$)[a-zA-Z0-9\\W_!@#$.,/;:%^&*`~()-+=]{8,16}$/;
var flag = false;
if(reg.test(str)){
flag=true;
}
return flag;
}
if (checkword(this.value)) {
}else{
this.type="text"
this.value="密码必须包含大小写字母、数字以及特殊字符,且长度在8到16位之间"
this.style.color="red"
}
}
oinput[6].onfocus=function(){
oinput[6].placeholder=""
this.type="password"
this.value=""
this.style.color="black"
}
oinput[6].onblur=function(){
oinput[6].placeholder="请确认密码"
if(this.value!=oinput[5].value){
this.type="text"
this.value="两此密码输入不相同"
this.style.color="red"
}
}
//提交提示与重置提示
var nicheng=document.getElementsByName("nicheng")[0]
if(nicheng)
oinput[7].onclick=function(){
alert("确认提交?")
}
oinput[8].onclick=function(){
alert("确认重置?")
}
}
</script>
</body>
</html>