注册表单提交

ZiminLi

已于 2023-01-18 09:21:56 修改

阅读量431

点赞数

分类专栏： demo 文章标签： css 前端 html

于 2023-01-18 06:33:57 首次发布

本文链接：https://blog.csdn.net/ziminli/article/details/128722622

版权

demo 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

该示例展示了如何使用HTML创建一个包含昵称、姓名等信息的表单，并通过JavaScript和正则表达式进行输入验证。当用户点击提交时，检查各字段内容是否符合预设规则，如昵称长度、QQ号格式等，不符合则显示错误提示。

摘要由CSDN通过智能技术生成

内容

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

实验原理

利用正则表达式来判断输入的值是否符合要求
对按钮点击事件绑定，跳出弹窗提示

html

<!DOCTYPE html>
<html lang="zh-CN">
<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>demo11</title>
    <link rel="stylesheet" href="./css/demo11.css">
</head>
<body>
    <form action="" id="frm">
        昵称：<input type="text" placeholder="昵称" id="nc"><br>
        姓名：<input type="text" placeholder="姓名" id="name"><br>
        QQ：<input type="text" placeholder="QQ" id="qq"><br>
        手机号：<input type="text" placeholder="手机号" id="phone"><br>
        邮箱：<input type="text" placeholder="邮箱"><br>
        密码：<input type="password" placeholder="密码" id="pw"><br>
        确认密码：<input type="password" placeholder="确认密码" id="spw"><br>
        <input type="submit" id="sbm"><input type="reset" id="res">
    </form>
    <script src="./js/demo11.js"></script>
</body>
</html>

css

<style>
*{
    margin: 0;
    padding: 0;
}
input{
    margin-bottom: 20px;
}
#sbm{
    margin-left: 50px;
    margin-right: 50px;
}
.mstk{
    border: 1px solid red;
}
</style>

js

<script>
var input=document.getElementsByTagName("input");
for(var i=0;i<input.length;i++){
    input[i].onfocus=function(){
        this.placeholder="";
    }
}
var sbm=document.getElementById("sbm");
var res=document.getElementById("res");
var nc=document.getElementById("nc");
var nam=document.getElementById("name");
var qq=document.getElementById("qq");
var phone=document.getElementById("phone");
var pw=document.getElementById("pw");
var spw=document.getElementById("spw");
var frm=document.getElementById("frm");
var regq=/^[0-9]{6,10}$/;
var regp=/^1[3-9][0-9]{9}$/;
var regpw=/^[0-9A-z]{9,15}$/;
sbm.onclick=function(){
    var ncv=nc.value;
    var namv=nam.value;
    var qqv=qq.value;
    var phonev=phone.value;
    var pwv=pw.value;
    var spwv=spw.value;
    if(ncv.length>10||ncv.length<1){
        alert("提交失败");
        nc.className="mstk"
    }else if(namv.length>4||namv.length<1){
        for(var i=0;i<input.length;i++){
            input[i].className="";
        }
        alert("提交失败");
        nam.className="mstk"
    }else if(!regq.test(qqv)){
        for(var i=0;i<input.length;i++){
            input[i].className="";
        }
        alert("提交失败");
        qq.className="mstk"
    }else if(!regp.test(phonev)){
        for(var i=0;i<input.length;i++){
            input[i].className="";
        }
        alert("提交失败");
        phone.className="mstk"
    }else if(!regpw.test(pwv)){
        for(var i=0;i<input.length;i++){
            input[i].className="";
        }
        alert("提交失败");
        pw.className="mstk"
    }else if(spwv!==pwv){
        for(var i=0;i<input.length;i++){
            input[i].className="";
        }
        alert("提交失败");
        spw.className="mstk"
    }else{
        for(var i=0;i<input.length;i++){
            input[i].className="";
        }
        alert("提交成功");
    }
}
res.onclick=function(){
    alert("重置成功");
}
frm.onsubmit=function(){
    return false;
}
</script>