[学习交流] 【上海校区】form表单提交时onsubmit校验出错问题

form表单提交时onsubmit返回调用的函数名和name属性值重复时不能调用的的问题前几天在解决问题发现，做提交表单验证的时候,就发现自己的表单提交没有效果,
onsubmit根本调用不到check()函数,将函数换个名称或者调用其他的都可以实现
一脸懵逼的情况下,发现了设置的name属性值的其中一个和我们的函数名重复了
我们学习js的时候,明确的讲过,函数是js中的一等公民,所有当函数和变量名重复的时候,变量会被覆盖
但是这和我们的name属性值又有什么关系呢?
在网上找了一些资料,才大致有些许了解,但是还不是很通透
当我们的onsubmit = "return check()" 的时候,浏览器不能识别该check是我们的name属性值,还是全局里面的一个函数,也就是作用域的问题,浏览器不知道自己访问的是谁的check,所以要告诉浏览器,我们访问的是全局里面的check函数
也就是这样就会调用我们的全局里面的check()
全部代码如下;

[JavaScript] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="css01.css">
</head>
<body>
<div id="load_div">
    <form action="#" method="post">
        <table>
            <tr>
                <td colspan="3">
                    <font>会员注册</font> USER REGISTER
                </td>
            </tr>
            <tr>
                <td>用户名</td>
                <td colspan="2"><input type="text" name="username" placeholder="请输入用户名" id="usernameid"></td>
            </tr>
            <tr>
                <td>密码</td>
                <td colspan="2"><input type="password" name="password" placeholder="请输入密码" id="passwordid"></td>
            </tr>
            <tr>
                <td>确认密码</td>
                <td colspan="2"><input type="password" name="repassword" placeholder="请输确认密码" id="repasswordid"></td>
            </tr>
            <tr>
                <td>Email</td>
                <td colspan="2"><input type="text" name="email" placeholder="请输入邮箱" id="emailid"></td>
            </tr>
            <tr>
                <td>姓名</td>
                <td colspan="2"><input type="text" name="realname" placeholder="请输入用姓名" id="realnameid"></td>
            </tr>
            <tr>
                <td>性别</td>
                <td colspan="2">
                    <input type="radio" name="sex">男
                    <input type="radio" name="sex">女
                </td>
            </tr>
            <tr>
                <td>出生日期</td>
                <td colspan="2"><input type="date" name="birthday"></td>
            </tr>
            <tr>
                <td>验证码</td>
                <td><input type="text" name="check" id="testid"></td>
                <td><img src="img/checkcode.jpg" alt=""></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" value="注册" class="btn"></td>
                <td></td>
            </tr>
 
        </table>
 
        <script type="text/javascript">
            // debugger;
            // var btn = document.querySelector('.btn')
            // btn.onclick = function(){
            //     check()
            // }
            function check(){
                // alert(1);
                var uesername = document.getElementById('usernameid').value;
                if (uesername == '') {
                    alert("用户名不能为空");
                    return false;
                }
                var password = document.getElementById('passwordid').value;
                if (password == '') {
                    alert("密码不能为空");
                    return false;
                }
                var repassword = document.getElementById('repasswordid').value;
                if (repassword !== password) {
                    alert("两次输入密码不一致，请重新输入");
                    return false;
                }
                var email = document.getElementById('emailid').value;
                if (email == "") {
                    alert("邮箱不能为空");
                    return false;
                }
                var realname = document.getElementById('realnameid').value;
                if (realname == '') {
                    alert("姓名不能为空");
                    return false;
                }
                var test = document.getElementById('testid').value;
                if (test == '') {
                    alert("验证码不能为空");
                    return false;
                }
            }
 
        </script>
    </form>
</div>
</body>
 
</html>

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【上海校区】form表单提交时onsubmit校验出错问题

0 个回复