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

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

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

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>


好帮手慕阿莹 2019-11-23 12:01:35

请同学提供一下全部代码,老师测试一下哦,注意不是截图哦:

注意不要贴在回复里,会失去代码的格式。可以在回答里贴一下。祝学习愉快。

  • 提问者 Uranium238 #1
    老师我贴好了,就是不填姓名submit后会出现“无效姓名”,但是很快就会因为表单提交而消失
    2019-11-23 12:45:30
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师