为什么addEventListener("submit", )返回false不会取消提交表单

Uranium238 2019-11-23

源自：Java正则表达式 2-1 JavaScript表单验证

收起

3回答

好帮手慕阿莹 2019-11-23 13:48:19

同学你好，老师判断应该是因为没有引用到该函数的返回结果，

老师修改了一下同学的代码，在sublime上加了一个onclick="return 函数名() ”来判断一下该函数的返回结果，同学可以参考一下，修改后的代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <form action="http://localhost:8080" method="post" id="frmInfo">
        <div id="err" style="color:red"></div>
        <div>
            姓名：<input id="name" name="name">
        </div>
        <div>
            身份证：<input id="idno" name="idno">
        </div>
        <div>
            <input type="submit" onclick="return a() ">
        </div>
    </form>
    <script type="text/javascript">
       /* document.getElementById("frmInfo").addEventListener('submit', function(event) {
        /* document.getElementById("frmInfo").onsubmit = function() { */
            //在js中定义正则表达式对象只需要如下形式：/正则表达式/
            function a(){
            var regex1 = /^[\u4e00-\u9fa5]{2,8}$/;
            var regex2 = /^[1234568]\d{16}[0-9xX]$/;
            var name = document.getElementById('name').value;
            var idno = document.getElementById('idno').value;
            if (!regex1.test(name)) {//匹配则返回true
                document.getElementById('err').innerHTML = "无效姓名";
                /* event.preventDefault(); */
                return false;//表单不提交
            } else if (!regex2.test(idno)) {
                document.getElementById('err').innerHTML = "无效身份证号";
                return false;
            } else {
                alert("验证通过，准备提交表单");
                return true;//表单提交
            }
        };   /* 注意这里还去掉了半个括号)*/ 
        /* }; */ 
    </script>
</body>
</html>

如果我的回答解决了你的疑惑，请采纳！祝学习愉快！

收起回答

提问者 Uranium238 2019-11-23 12:43:30

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <form action="" method="post" id="frmInfo">
        <div id="err" style="color:red"></div>
        <div>
            姓名：<input id="name" name="name">
        </div>
        <div>
            身份证：<input id="idno" name="idno">
        </div>
        <div>
            <input type="submit">
        </div>
    </form>
    <script type="text/javascript">
        document.getElementById("frmInfo").addEventListener('submit', function(event) {
        /* document.getElementById("frmInfo").onsubmit = function() { */
            //在js中定义正则表达式对象只需要如下形式：/正则表达式/
            var regex1 = /^[\u4e00-\u9fa5]{2,8}$/;
            var regex2 = /^[1234568]\d{16}[0-9xX]$/;
            var name = document.getElementById('name').value;
            var idno = document.getElementById('idno').value;
            if (!regex1.test(name)) {//匹配则返回true
                document.getElementById('err').innerHTML = "无效姓名";
                /* event.preventDefault(); */
                return false;//表单不提交
            } else if (!regex2.test(idno)) {
                document.getElementById('err').innerHTML = "无效身份证号";
                return false;
            } else {
                alert("验证通过，准备提交表单");
                return true;//表单提交
            }
        });
        /* }; */ 
    </script>
</body>
</html>