JavaScript更人性化的表单_event.srcelement.disabled-优快云博客

本文链接：https://blog.youkuaiyun.com/wfh_fighting/article/details/52949337

本文介绍了一种改进的表单验证方法，通过JavaScript实现自动提示用户填写必要信息，并确保两次密码输入一致，同时提供了用户体验友好的默认值清除与重新填充功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>更人性化的表单</title>
    <script>
        /* $作为函数名仅仅是document.getElementById方法简写  */
        function $(str) {
            return(document.getElementById(str));
        }
        function check_submit() {
            if($("txt_user_name").value==""){alert("请填写用户名"); return(false);}
            if($("txt_user_pwd").value==""){alert("请填写密码"); return(false);}
            if($("txt_user_pwd_confirm").value==""){alert("请填写确认密码"); return(false);}
            if($("txt_user_pwd_confirm").value!=$("txt_user_pwd").value){alert("两次输入不一致"); return(false);}
            $("btn_submit").disabled=true;//对按钮做隐藏
            //return false;如果不去掉按钮只能使用一次
        }
        //当鼠标经过的时候
        function mover() {
            /*event.srcElement来获取当前激发事件的对象，也就是鼠标所移入的文本框对象。
            *focus方法将焦点移至该文本框
            * select选择该文本框的内容
             */
            event.srcElement.focus();
            event.srcElement.select();
        }
        //当鼠标点击的时候,自动清空文本框的内容
        function mclick() {
            if(event.srcElement.value=="[请输入用户名]")
                event.srcElement.value="";
        }
        //失去焦点且文本框内容为空时设置值为
        function mblur() {
            if(event.srcElement.value=="")
                event.srcElement.value="[请输入用户名]";
        }
    </script>
</head>
<body>
<form action="" onsubmit="return check_submit();" method="get" name="register">
    <fieldset>
        <legend>注册</legend>
        用户名：<br/>
        <input id="txt_user_name" type="text" onclick="mclick();" onmousemove="mover();" onblur="mblur()" value="[请输入用户名]"/> <br/>
        密 码：<br/>
        <input id="txt_user_pwd" type="password" onmousemove="mover();" value="000000"/> <br/>
        确认密码：<br/>
        <input id="txt_user_pwd_confirm" type="password" onmousemove="mover();" value="000000"/> <br/>
        <input id="btn_submit" type="submit" value="提交"/><input type="reset" value="重置"/>
    </fieldset>
</form>
</body>
</html>