![](/img/trans.png)
[英]Should I use the input's onclick or the form's onsubmit event to validate form fields using JavaScript?
[英]Validate form with JavaScript using onsubmit
我有一個帶有現有表格的網站,該表格將 email 地址提交給第三方網站 (example.com)。 現在我想在使用 JavaScript 提交表單之前驗證 email 輸入字段。
我的 JavaScript
function isValidEmailAddress(emailAddress) {
var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
return pattern.test(emailAddress);
}
function formCheck() {
// Fetch email-value
sEmail = document.myForm.recipientEmail.value ;
// value empty?
if (sEmail == 0)
{
alert('Enter Email-Address.');
return false;
}
else
{
// value valid?
if (!isValidEmailAddress(sEmail))
{
alert('Enter valid Email-Address.');
return false;
}
else
{
return true;
}
}
}
現有表單標簽
<form name="myForm" action="http://example.com" method="post" onsubmit="return formCheck();">
已有email輸入域
<input type="text" class="form-text" name="email" id="recipientEmail">
現有的提交按鈕
<input type="image" src="some_pic.gif" alt="OK" id="submit_form" onclick="document.onlineForm.submit();" value="send" name="submit_button">
現在,只要我點擊提交按鈕,表單就會提交,我的 JavaScript 似乎被忽略了。 我究竟做錯了什么?
當您通過直接調用“submit()”提交表單時,就像您的按鈕所做的那樣,不會調用“onsubmit”處理程序。
您可以讓提交按鈕調用不同的 function:
function doSubmit() {
if (formCheck()) document.myForm.submit();
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.