求快看看 innerHTML效果出不来

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>密码框的显示与隐藏</title>
        <link href="css/login.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <form action="#" method="post">
            <h2 align="center" style="line-height: 16px;">登录页面</h2>
            <hr />
            <p>
                <span>账号：</span>
                <input type="text" id="user" name="username" value="admin" class="num"/>
                <span id="s_username" class="error"></span>
            </p>
            <p>
                <span>密码：</span>
                <label for="username">
                    <img src="images/close.png" alt="" id="eye" class="a">
                </label>
                <input type="password" id="pwd" name="pwd" class="pass"/>
                <span id="s_password" class="error"></span>

            </p>
            <br />
            <p>
                <input type="submit" class="btn01" value="登录" />
                <input type="button" class="btn02" value="注册" />
            </p>
        </form>
        <script>
            window.onload=function (){
                //1 给表单绑定onsubmint事件
                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");
                var reg=/^\w{6,12}$/;//匹配规则：以单词开头开的6至12位、任意字符结尾的字符
                var flag=reg.test(username);
                var s_username=document.getElementById("s_username");
                if(flag){
                    s_username.innerText="";
                }else {
                    s_username.innerHTML="用户名格式有误";
                }
                return flag;
            }
            function checkPassword() {
                var password=document.getElementById("password");
                var reg=/^\w{6,12}$/;//匹配规则：以单词开头开的6至12位、任意字符结尾的字符
                var flag=reg.test(password);
                var s_username=document.getElementById("s_password");
                if(flag){
                    s_username.innerText="";
                }else {
                    s_username.innerHTML="密码输入有误";
                }
                return flag;
            }

            var eye=document.getElementById('eye');
            var pwd=document.getElementById('pwd');

            var flag=0;
            eye.onclick=function (){
                if(flag===0)
                {
                    pwd.type='text';
                    eye.src='images/open.png';
                    flag=1;//赋值操作
                }
                else{
                    pwd.type='password';
                    eye.src='images/close.png';
                    flag=0;
                }

            }

        </script>
    </body>
</html>

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

1条回答默认最新

你好！机器人 2022-05-28 13:41

关注


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>密码框的显示与隐藏</title>
        <link href="css/login.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <form action="#" method="post">
            <h2 align="center" style="line-height: 16px;">登录页面</h2>
            <hr />
            <p>
                <span>账号：</span>
                <input type="text" id="user" name="username" value="admin" class="num"/>
                <span id="s_username" class="error"></span>
            </p>
            <p>
                <span>密码：</span>
                <label for="username">
                    <img src="images/close.png" alt="" id="eye" class="a">
                </label>
                <input type="password" id="pwd" name="pwd" class="pass"/>
                <span id="s_password" class="error"></span>
 
            </p>
            <br />
            <p>
                <input type="submit" id="form" class="btn01" value="登录"/>
                <input type="button" class="btn02" value="注册" />
            </p>
        </form>
        <script>
            window.onload=function (){
                //1 给表单绑定onsubmint事件
                document.getElementById("form").onclick=function (){
                    return checkUsername()&&checkPassword();//校验用户名密码是否正确
                }
                document.getElementById("user").onblur=checkUsername;
                document.getElementById("pwd").onblur=checkPassword;
            }
            function checkUsername() {
                var username=document.getElementById("username");
                var reg=/^\w{6,12}$/;//匹配规则：以单词开头开的6至12位、任意字符结尾的字符
                var flag=reg.test(username);
                var s_username=document.getElementById("s_username");
                if(flag){
                    s_username.innerText="";
                }else {
                    s_username.innerHTML="用户名格式有误";
                }
                return flag;
            }
            function checkPassword() {
                var password=document.getElementById("password");
                var reg=/^\w{6,12}$/;//匹配规则：以单词开头开的6至12位、任意字符结尾的字符
                var flag=reg.test(password);
                var s_username=document.getElementById("s_password");
                if(flag){
                    s_username.innerText="";
                }else {
                    s_username.innerHTML="密码输入有误";
                }
                return flag;
            }
 
            var eye=document.getElementById('eye');
            var pwd=document.getElementById('pwd');
 
            var flag=0;
            eye.onclick=function (){
                if(flag===0)
                {
                    pwd.type='text';
                    eye.src='images/open.png';
                    flag=1;//赋值操作
                }
                else{
                    pwd.type='password';
                    eye.src='images/close.png';
                    flag=0;
                }
 
            }
 
        </script>
    </body>
</html>