gpt4 book ai didi

javascript - 当使用 EventHandler 动态添加 onsubmit 时,如何创建与 onsubmit ="return groupAdd()"相同的功能?

转载 作者:行者123 更新时间:2023-11-28 01:06:46 27 4
gpt4 key购买 nike

用于仅添加带有按钮onclick事件并收集数据,甚至不需要表单元素,而是使用HTML5您可以利用错误检查和用户提交表单时显示的默认消息。

<input type="email" id="addEmail" name="addEmail"  placeholder="user@sample.com" value="" required="" title="" />

由于类型是email并且存在require属性,浏览器将检查结构良好的电子邮件地址onsubmit。如果该值失败,输入下方会出现一条消息,指示用户必须修复该值。

例如,您还可以使用正则表达式

<input type="password" id="addPassword" name="addPassword"  placeholder="Password" value="" required="" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,}$"  title="" />

你所拥有的一切

<script>
function userAdd(){
*** xmlhttprequest code *******
return false;
}
</script>

<html>
<form action="admin" method="post" onsubmit="return userAdd();">
<input type="email" id="addEmail" name="addEmail" placeholder="user@sample.com" value="" required="" title="" />
<input type="password" id="addPassword" name="addPassword" placeholder="Password" value="" required="" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,}$" title="" />
<input type="submit" value="Submit" />
</form>
</html>

当我动态生成表单元素时,我需要附加一个事件处理程序:

f = document.createElement('form');

addEventHandler(f,'submit', function(){userAdd()});

function addEventHandler(elem,eventType,handler) {
if (elem.addEventListener)
elem.addEventListener (eventType,handler,false);
else if (elem.attachEvent)
elem.attachEvent ('on'+eventType,handler);
}
}

我想保留默认提交功能的原因是因为内置的 HTML5 功能。

使用 EventHandler 动态添加取消提交时,如何创建与 onsubmit="return groupAdd()"相同的功能?

最佳答案

对于具有 DOM2 API 的 HTML5:

f.addEventListener('submit', function(e) { if (!userAdd()) { e.preventDefault(); } });

关于javascript - 当使用 EventHandler 动态添加 onsubmit 时,如何创建与 onsubmit ="return groupAdd()"相同的功能?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24971150/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com