注册表单提交

aaa小葵

已于 2023-01-16 20:45:59 修改

阅读量733

点赞数

文章标签： css 前端 html

于 2023-01-12 14:16:01 首次发布

本文链接：https://blog.csdn.net/m0_74033027/article/details/128658365

版权

需求：

1.表单需包含昵称、姓名、QQ、手机号、邮箱、密码、确认密码以及提交和重置按钮；
2.点击表单里的输入框，隐藏提示文字；
3.点击提交和重置按钮时，都需要有相应的提示；
4.在表单提交是，需要进行验证验证填写内容是否合理：昵称不超过10个字、姓名不超过4个字、QQ号为长度小于等于10大于5位的数字、手机号为长度11位的数字、密码由字母和数字组成且大于8位小于16位、密码和确认密码需相同。

原理：

1.当光标移入输入框内onfocus和移出输入框onblur要展示不同效果，光标移入框内要将内部placeholder变为空字符串，光标移出再复原

2.利用正则表达式，判断输入的值是否符合正则表达式，不符合就显示提示

效果图：

注册表单提交

代码块：

 <style>
        .box{
            margin: 0 auto;
            width: 300px;
            border: 3px solid paleturquoise;
            text-align: center;
            background-color: palegoldenrod;
        }
        .box>input{
            display: inline-block;
            width: 200px;
            height: 20px;
            line-height: 20px;
            margin: 10px 0;
            border: 1 solid paleturquoise;
            color: black;
        }
        .sbox>input{
            margin: 10px 10px;
        }
</style>

<body>
    <form>
    <div class="box">
            <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>
    </form>
</body>

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号为小于等于10大于5位的数字"
            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=/^1[3-9][0-9]{9}$/
            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("确认重置")
    }
}

aaa小葵

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
注册表单提交

4.在表单提交是，需要进行验证验证填写内容是否合理：昵称不超过10个字、姓名不超过4个字、QQ号为长度小于等于10大于5位的数字、手机号为长度11位的数字、密码由字母和数字组成且大于8位小于16位、密码和确认密码需相同。要展示不同效果，光标移入框内要将内部placeholder变为空字符串，光标移出再复原。1.表单需包含昵称、姓名、QQ、手机号、邮箱、密码、确认密码以及提交和重置按钮；2.利用正则表达式，判断输入的值是否符合正则表达式，不符合就显示提示。3.点击提交和重置按钮时，都需要有相应的提示；
复制链接

扫一扫