03.1 JavaScript练习

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    window.onload = function(){
        //获取注册的按钮对象并给它绑定单击事件
        var subEle = document.getElementById("submitBtn");
        subEle.onclick = function(){
            //获取文本框
            var userInputEle = document.getElementById("userInput");
            //获取用户输入的用户名
            var userInputValue = userInputEle.value;
            //判断用户名是否为空
            if(userInputValue == ""){
                alert("用户名不能为空！");
                //取消默认行为
                return false;
            }
            //获取密码框
            var pwdInputEle = document.getElementById("pwdInput");
            //获取密码
            var pwdInputValue = pwdInputEle.value;
            //判断密码是否为空
            if(pwdInputValue == ""){
                alert("密码不能为空！");
                //取消默认行为
                return false;
            }
            //获取确认密码框
            var confirmPwdEle = document.getElementById("confirmPwd");
            //获取确认密码
            var confirmPwdEleValue = confirmPwdEle.value;
            //判断确认密码是否为空
            if(confirmPwdEleValue == ""){
                alert("确认密码不能为空！");
                //取消默认行为
                return false;
            }
            //判断两次输入的密码是否一致
            if(confirmPwdEleValue != pwdInputValue){
                //将确认密码置空
                confirmPwdEle.value = "";
                alert("两次输入的密码不一致！");
                //取消默认行为
                return false;
            }
            //获取邮箱
            var emailValue = document.getElementById("emailInput").value;
            if(emailValue == ""){
                alert("邮箱不能为空！");
                return false;
            }
        };
    };
</script>
</head>
<body>
    <h3>注册页面</h3>

    <img src="../img/logo.gif"/>
    
    <form action="regist_success.html" method="post">
        <table border="1">
        
            <tr>
                <td>用户名</td>
                <td><input  type="text" id="userInput" name="username" /></td>
            </tr>
        
            <tr>
                <td>密码</td>
                <td><input  type="password" id="pwdInput" name="password" /></td>
            </tr>
        
            <tr>
                <td>确认密码</td>
                <td><input  type="password" id="confirmPwd" name="passwordConfirm" /></td>
            </tr>
        
            <tr>
                <td>邮箱</td>
                <td><input  type="text" id="emailInput" name="email" /></td>
            </tr>
        
            <tr>
                <td colspan="2" align="center"><input  type="submit" id="submitBtn" value="注册" /></td>
            </tr>
        
        </table>
    
    </form>
    
    <br /><br />
    
    <a href="../index.html">回首页</a>

</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容