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

首页课程实战体系课手记专栏慕课教程

来源：2-1 JavaScript表单验证

Uranium238

2019-11-23 07:45:19

写回答

3回答

好帮手慕阿莹

2019-11-23

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

老师修改了一下同学的代码，在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

<!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>