下面是在阻止提交表单的什么默认行为?

下面是在阻止提交表单的什么默认行为?

function replaceInvalidityUi(formObj) {

//阻止原气泡

formObj.addEventListener('invalid',function(event) {

event.preventDefault();

},true);

//下面是在阻止提交表单的什么默认行为?

// formObj.addEventListener('submit',function(event) {

// if(!this.checkValidity()) {

// event.preventDefault();

// }

// });

document.getElementById('thesubmit').addEventListener('click', function(event) {


//校验失败的input对象集合

var invalidObjs = formObj.querySelectorAll(':invalid');


//自定义错误提示元素对象集合

var errorMsgObjs = formObj.querySelectorAll('.error-message');


//将已经出现在页面的自定义错误提示清除

for(var i = 0; i < errorMsgObjs.length; i ++) {

errorMsgObjs[i].parentNode.removeChild(errorMsgObjs[i]);

}


//在相应位置插入新的自定义错误提示

for(var i = 0;i < invalidObjs.length; i ++) {

invalidObjs[i].parentNode.insertAdjacentHTML('beforeEnd',`<div class='error-message'>${invalidObjs[i].validationMessage}</div>`);

}


//校验失败的第一个input获得焦点

if(invalidObjs.length > 0) {

invalidObjs[0].focus();

}

});


}


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

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

2回答
好帮手慕慕子 2019-08-11 11:35:55

同学你好, 当点击type类型的submit的按钮,不管验证有没有通过都会提交表单刷新页面。

给同学举个示例,可以试着理解一下哦。例:

因为不管输入的正确与否,都会提交表单的, 所以我们需要在用户提交表单之前对用户的输入内容进行判断操作了,当输入不正确的时候, 就阻止提交表单的默认提交行为。

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~

好帮手慕慕子 2019-08-11 10:33:42

同学你好, 提交表单的时候,默认行为是会刷新页面哦,添加如下代码,是阻止提交表单后刷新页面哦

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~

  • 提问者 慕函数3762822 #1
    !this.checkValidity()意味着表单校验不通过才执行,既然校验不通过,又怎么会提交,再刷新页面呢?
    2019-08-11 10:37:35
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
响应式开发与常用框架 2018
  • 参与学习           人
  • 提交作业       2198    份
  • 解答问题       5012    个

如果你有web端基础,既想进阶,又想进军移动端开发,那就来吧,我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等,让你在前端道路上畅通无阻!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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