Java Script 基本对象与DOM基础事件

最新推荐文章于 2025-12-15 08:57:28 发布

原创最新推荐文章于 2025-12-15 08:57:28 发布 · 100 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #javascript #html5

本文详细介绍了如何在HTML页面中实现用户注册时，用户名和密码的实时校验，包括正则表达式验证和离焦时的提示功能，适合前端开发者学习前端表单验证技巧。

案例：实现用户名与密码的提交审核与离焦审核

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        .error{color: crimson}
        #td_sub{padding-left: 150px;}
    </style>
    <script>
        /*首先等待页面打开*/
        window.onload=function(){
            /*表单将要提交需要执行的functional*/
            document.getElementById("form").onsubmit=function(){
                /*验证的方法*/
                return checkUserName() && checkPassword();

            }
            /*设置光标离开后自动校验*/
            document.getElementById("username").onblur=checkUserName;
            document.getElementById("password").onblur=checkPassword;
        }



        function checkUserName(){
            /*获取用户输入的用户名*/
            var username=document.getElementById("username").value;
            /*定义用户名规则*/
            var namestandard=/^\w{6,12}$/;
            /*对用户名进行判断*/
            var flag=namestandard.test(username);
            /*获取提示信息*/
            var s_username=document.getElementById("s_username");
            /*设定判断条件和提示信息的关系*/
            if(flag){
                s_username.innerHTML="<img width='35px' height='25px' src='gou.png'/>"
            }else{
                s_username.innerHTML="用户名格式错误";
            }
            return flag
        }
        function checkPassword(){
            /*获取用户输入的用户名*/
            var password=document.getElementById("password").value;
            /*定义用户名规则*/
            var codestandard=/^\w{6,12}$/;
            /*对用户名进行判断*/
            var flag=codestandard.test(password);
            /*获取提示信息*/
            var s_password=document.getElementById("s_password");
            /*设定判断条件和提示信息的关系*/
            if(flag){
                s_password.innerHTML="<img width='35px' height='25px' src='gou.png'/>"
            }else{
                s_password.innerHTML="密码格式错误";
            }
            return flag
        }
    </script>
</head>
<body>
    <div class="bottom_layout"><!--最后面的图层-->
        <div class="left"><!--左面信息框-->
            <p>新用户注册</p>
            <p>User register</p>
        </div>
        <div class="centerback"><!--中间信息框的背景-->
            <div class="rg_info"><!--中间的信息输入框-->
                <form action="#" id="form" method="get">
                    <table >
                        <tr>
                            <td class="td_right"><label for="username">用户名</label></td>
                            <td class="td_left"><input type="text" name="username" id="username" placeholder="请输入用户名">
                                <span id="s_username" class="error"></span><!--提示标签-->
                            </td>

                        </tr>
                        <tr>
                            <td class="td_right"><label for="password">密码</label></td>
                            <td class="td_left"><input type="password" name="password" id="password" placeholder="请输入密码">
                                <span id="s_password" class="error"></span><!--提示标签-->
                            </td>

                        </tr>
                        <tr>
                            <td class="td_right"><label for="Email">邮箱地址</label></td>
                            <td class="td_left"><input type="Email" name="Email" id="Email" placeholder="请输入邮箱地址"></td>
                        </tr>
                        <tr>
                            <td class="td_right"><label for="name">真实姓名</label></td>
                            <td class="td_left"><input type="name" name="name" id="name" placeholder="请输入你的真实姓名"></td>
                        <tr>
                            <td class="td_right"><label for="phone">手机号</label></td>
                            <td class="td_left"><input type="number" name="phonenumber" id="phone" placeholder="请输入手机号"></td>
                        </tr>
                        <tr>
                            <td class="td_right"> <label> 性别</label></td>
                            <td class="td_left"><input type="radio" name="gender" value="male">男
                                <input type="radio" name="gender" value="female">女
                            </td>
                        </tr>
                        <tr>
                            <td class="td_right"><label for="birthday">出生日期</label></td>
                            <td class="td_left"><input type="date" name="birth" id="birthday"></td>
                        </tr>
                        <tr>
                            <td class="td_right"><label for="checkcode">验证码</label></td>
                            <td class="td_left"><input type="text" name="textcode" id="checkcode" placeholder="请输入验证码">
                                <img id="checkimg" src="../image/verify_code.jpg" alt="">
                            </td>
                        </tr>
                        <tr align="center">
                            <td colspan="2" id="td_sub"><input type="submit" value="注册"></td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
        <div class="right"><!--右面信息框-->
            <p>已有账号？<a href="#">立即登录</a></p>
        </div>
    </div>
</body>
</html>