JavaScript 登录注册表单验证(含正则表达式)

1. 验证用户名是否符合规则(idea2021 CTRL+R 修改替换)
1.1 获取用户名的输入框

1.2 绑定onblur事件  》》》 当元素失去焦点时发生此事件

1.3 获取用户在username输入框中输入的信息,排除掉空白字符

1.4 判断username的值是否符合规则,并设置正则表达式


2. 验证密码是否符合规则(idea2021 CTRL+R 修改替换)
2.1 获取密码的输入框

2.2 绑定onblur事件  》》》 当元素失去焦点时发生此事件

2.3 获取用户在password输入框中输入的信息,排除掉空白字符
2.4 判断password的值是否符合规则,并设置正则表达式


3. 验证手机号是否符合规则(idea2021 CTRL+R 修改替换)
3.1 获取手机号的输入框

3.2 绑定onblur事件  》》》 当元素失去焦点时发生此事件

3.3 获取用户在tel输入框中输入的信息,排除掉空白字符

3.4 判断tel的值是否符合规则,并设置正则表达式


4.form表单的提交
4.1获取表单的对象

4.2为表单对象绑定onsubmit

html文件代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="css/register.css" rel="stylesheet">
</head>
<body>

<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号?</span> <a href="#">登录</a>
    </div>
    <form id="reg-form" action="#" method="get">
        <table>
            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                    <br>
                      <!--这里是被隐藏的提示信息-->
                    <span id="username_err" class="err_msg" style="display:none">用户名不合乎规则</span>
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                    <br>
                    <!--这里是被隐藏的提示信息-->
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>
            <tr>
                <td>手机号</td>
                <td class="inputs"><input name="tel" type="text" id="tel">
                    <br>
                    <!--这里是被隐藏的提示信息-->
                    <span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span>
                </td>
            </tr>
        </table>
        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        </div>
        <br class="clear">
    </form>

</div>
</body>
</html>

 JavaScript文件代码:(HTML文件中没有引用,自己引用就好了)

<script>
    //1. 验证用户名是否符合规则
    //1.1 获取用户名的输入框
    var  username = document.getElementById("username");
    //1.2 绑定onblur事件  》》》 当元素失去焦点时发生此事件
    username.onblur =judgeUserName;
        function judgeUserName(){
            //1.3 获取用户在username输入框中输入的信息,排除掉空白字符
            var usernameValue = username.value.trim();
            //1.4 判断username的值是否符合规则,长度为6-12单词字符组成
            var reg = /^\w{6,12}$/;
            var  flag = reg.test(usernameValue);
            //var  flag = usernameValue.length>=6&&usernameValue.length<=12;
            if (flag){
                document.getElementById("username_err").style.display="none";
            }else{
                document.getElementById("username_err").style.display="";
            }
            return flag;
        }
    //2. 验证密码是否符合规则(CTRL+R 修改替换)
    //2.1 获取密码的输入框
    var  password = document.getElementById("password");
    //2.2 绑定onblur事件  》》》 当元素失去焦点时发生此事件
    password.onblur =judgePassword;
        function judgePassword(){
            //2.3 获取用户在password输入框中输入的信息,排除掉空白字符
            var passwordValue = password.value.trim();
            //2.4 判断password的值是否符合规则,长度为6-12单词字符组成
            var reg = /^\w{6,12}$/;
            var  flag = reg.test(passwordValue);
            //var flag = passwordValue.length>=6&&passwordValue.length<=12;
            if (flag){
                document.getElementById("password_err").style.display="none";
            }else{
                document.getElementById("password_err").style.display="";
            }
            return flag;
        }
    //3. 验证手机号是否符合规则
    //3.1 获取手机号的输入框
    var  tel = document.getElementById("tel");
    //3.2 绑定onblur事件  》》》 当元素失去焦点时发生此事件
    tel.onblur =judgeTel;
        function judgeTel(){
            //3.3 获取用户在tel输入框中输入的信息,排除掉空白字符
            var telValue = tel.value.trim();
            //3.4 判断tel的值是否符合规则,并设置正则表达式
            var reg =/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;

            var flag = reg.test(telValue);
            if (flag){
                document.getElementById("tel_err").style.display="none";
            }else{
                document.getElementById("tel_err").style.display="";
            }
            return flag;
        }
    //4.form表单的提交
    //4.1获取表单的对象
    var regForm = document.getElementById("reg-form");
    //4.2为表单对象绑定onsubmit
    regForm.onsubmit = function (){
         var flag = judgeUserName()&&judgePassword()&&judgeTel();
       if (flag){
           return true;
        }else {
           return false;
        }
    }
</script>

 css文件代码:

* {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.reg-content{
    padding: 30px;
    margin: 3px;
}
a, img {
    border: 0;
}

body {
    background-image: url("imgs/reg_bg_min.jpg") ;
    text-align: center;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td, th {
    padding: 0;
    height: 90px;

}
.inputs{
    vertical-align: top;
}

.clear {
    clear: both;
}

.clear:before, .clear:after {
    content: "";
    display: table;
}

.clear:after {
    clear: both;
}

.form-div {
    background-color: rgba(255, 255, 255, 0.27);
    border-radius: 10px;
    border: 1px solid #aaa;
    width: 424px;
    margin-top: 150px;
    margin-left:1050px;
    padding: 30px 0 20px 0px;
    font-size: 16px;
    box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.5), 0px 0px 15px rgba(75, 75, 75, 0.3);
    text-align: left;
}

.form-div input[type="text"], .form-div input[type="password"], .form-div input[type="email"] {
    width: 268px;
    margin: 10px;
    line-height: 20px;
    font-size: 16px;
}

.form-div input[type="checkbox"] {
    margin: 20px 0 20px 10px;
}

.form-div input[type="button"], .form-div input[type="submit"] {
    margin: 10px 20px 0 0;
}

.form-div table {
    margin: 0 auto;
    text-align: right;
    color: rgba(64, 64, 64, 1.00);
}

.form-div table img {
    vertical-align: middle;
    margin: 0 0 5px 0;
}

.footer {
    color: rgba(64, 64, 64, 1.00);
    font-size: 12px;
    margin-top: 30px;
}

.form-div .buttons {
    float: right;
}

input[type="text"], input[type="password"], input[type="email"] {
    border-radius: 8px;
    box-shadow: inset 0 2px 5px #eee;
    padding: 10px;
    border: 1px solid #D4D4D4;
    color: #333333;
    margin-top: 5px;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus {
    border: 1px solid #50afeb;
    outline: none;
}

input[type="button"], input[type="submit"] {
    padding: 7px 15px;
    background-color: #3c6db0;
    text-align: center;
    border-radius: 5px;
    overflow: hidden;
    min-width: 80px;
    border: none;
    color: #FFF;
    box-shadow: 1px 1px 1px rgba(75, 75, 75, 0.3);
}

input[type="button"]:hover, input[type="submit"]:hover {
    background-color: #5a88c8;
}

input[type="button"]:active, input[type="submit"]:active {
    background-color: #5a88c8;
}
.err_msg{
    color: red;
    padding-right: 170px;
}
#password_err,#tel_err{
    padding-right: 195px;
}

#reg_btn{
    margin-right:50px; width: 285px; height: 45px; margin-top:20px;
}

图片自取:

效果: 

 

 

 

  • 0
    点赞
  • 3
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页
评论

打赏作者

我的猴子

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值