JavaScript+HTML+CSS,用户注册页面

耕的码田

于 2023-08-20 10:32:32 发布

阅读量303

点赞数 1

文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_73480865/article/details/132389339

版权

效果图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>

  <script languuage="Javascript">
        function judgename(){
            var name=document.getElementById("username");
            var nameerror=document.getElementById("nameerror");

                var pattern=/^[A-Za-z0-9]{6,10}$/;
                if(!pattern.test(name.value)){
                    nameerror.innerHTML="用户格式不正确！";

                }else{
                    nameerror.innerHTML="";
                    usernameok=true;
                }
            }
        //判断用户年龄
        function judgeage(){
            var age=document.getElementById("age");
            var ageerror=document.getElementById("ageerror");

               // var pattern=/^[A-Za-z0-9]{6,10}$/;
                if(age.value<17){
                    ageerror.innerHTML="年龄不能小于17岁！";

                }else{
                    ageerror.innerHTML="";

                    ageok=true;
                }
            }
        function judgepassword(){
            var psd=document.getElementById("psd");
            var passworderror=document.getElementById("passworderror");

                var pattern=/^(?=.*[A-Za-z])(?=.*\d)(?=.*[!@#$%^&]).{6,10}$/;
                if(!pattern.test(psd.value)){
                    passworderror.innerHTML="用户格式不正确或者不能为空！";

                }else{
                    passworderror.innerHTML="";

                   passwordok=true;
                }
            }
        function judgeagain(){
            var againpass=document.getElementById("againpass");
            var againerror=document.getElementById("againerror");
            var psd=document.getElementById("psd");
                //var pattern=/^(?=.*[A-Za-z])(?=.*\d)(?=.*[!@#$%^&]).{6,10}$/;
                if(psd.value!=againpass.value){
                   againerror.innerHTML="两次密码不一致！";

                }else{
                    againerror.innerHTML="";

                   againok=true;
                }
            }
        function judgeemail(){
            var email=document.getElementById("email");
            var emailerror=document.getElementById("emailerror");
                var pattern=/^(?=.*[@]).+$/;
                if(!pattern.test(email.value)){
                   emailerror.innerHTML="邮箱格式不正确！";

                }else{
                    emailerror.innerHTML="";

                 emailok=true;
                }
            }
        function judge(){
            if(emailok&&againok&&passwordok&&ageok&&usernameok){
                alert("登录成功")
            }
            else alert("登录失败")
        }

</script>

</head>
<body>


<div>
  <form id="myform" align="left" action="#">
    <table border="0px">
      <caption ><h3>用户注册信息</h3></caption>
      <tr>
        <td>用户名*:</td>
        <td><input type="text" id="username" placeholder="用户名由6-10位字符组成" size="12" onblur="judgename()"></td>
        <td id="nameerror" style="color: red;text-align: left;"></td>
      </tr>
      <tr>
        <td>年 龄*:</td><td><input type="text" id="age" placeholder="请输入你的年龄" size="12" onblur="judgeage()"></td>
        <td id="ageerror" style="color: red;text-align: left;"></td>
      </tr>

      <tr>
        <td>密码*：</td><td><input type="password" id="psd"placeholder="请输入正确的密码" size="12" onblur="judgepassword()" ></td>
        <td id="passworderror" style="color: red;text-align: left;"></td>
      </tr>
      <tr>
        <td>确认密码*：</td>
        <td><input type="password" title="确认密码" size="12" id="againpass" onblur="judgeagain()"></td>
        <td id="againerror" style="color: red;text-align: left;"></td>
      </tr>

      <tr>
        <td>电子邮件*：</td><td><input type="text" placeholder="请输入你的邮件地址" size="12" id="email" onblur="judgeemail()"></td>
        <td id="emailerror" style="color: red;text-align: left;"></td>
      </tr>

      <tr>
        <td>电话号码：</td><td><input type="text" placeholder="请输入你的电话号码" size="12"></td>
      </tr>

      <tr>
        <td>QQ号码：</td><td><input type="text" placeholder="请输入你的QQ号码号码" size="12"></td>
      </tr>

      <tr>
        <td style="align-content: center; color: aqua;"> <input type="submit" value="提交" onclick="judge()" ></td>
        <td style="align-items: center;color: aqua;"><input type="button" value="重置"></td>
      </tr>

    </table>
  </form>

</div>

</body>
</html>