JavaScript验证-document.getElementById在Bootstrap模式下不起作用

Question

我正在使用onSubmit()函数来验证表单条目。

如果表单位于独立的php文件或html文件中，则表单和验证功能可以正常工作。

但是，当表单嵌入到Bootstrap模态中时，JS验证功能将引发错误消息。 [object HTMLInputElement]

我尝试按照另一个答案中的建议将document.getElementById('uemail')更改为document.getElementById('uemail').value ，但显然没有值传递给该函数。

如果我删除onSubmit()属性，那么值将正确传递到服务器上的操作脚本。

这必须是常见用法。 我究竟做错了什么？

这是我的代码的缩写部分：

<script>
function formCheck() {
    var valid = true;
    //alert('in function');
    var email = document.getElementById('uemail');
    alert('email:' + email);
    var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    if (!filter.test(email)) {
        alert('Please provide a valid email address');
        email.focus;
        valid = false;
    }
    return valid;
}
</script>


<form id="regform" action="action.php" method="post" onSubmit="return formCheck()">
    Email: <input type="text" name="uemail" id="uemail" size="50" value="" required><span id ="ast">*</span><br>
    <input type="submit" name="Submit" value="Register" />
</form>

Answer 1

编辑：看起来您无法执行document.getElementById ，您可以改为执行以下操作：

function formCheck(formEl) {
    //...
    var email = formEl.getElementsByTagName("input")[0].value;
    // this will get the first input-element in your form

和

onsubmit="return formCheck(this)"

---

错误：您要测试的可变email是HTMLElement，而不是字符串：

解决方案：将email设置为HTMLInputElement的值：

var email = document.getElementById('uemail').value;

也email.focus; 什么也没做，请使用email.focus();

演示：

 function formCheck() { var valid = true; //alert('in function'); var email = document.getElementById('uemail').value; alert('email:' + email); var filter = /^([a-zA-Z0-9_\\.\\-])+\\@(([a-zA-Z0-9\\-])+\\.)+([a-zA-Z0-9]{2,4})+$/; if (!filter.test(email)) { alert('Please provide a valid email address'); email.focus; valid = false; } return valid; } 

 <form id="regform" action="action.php" method="post" onsubmit="alert(formCheck())"> Email: <input type="text" name="uemail" id="uemail" size="50" value="" required><span id="ast">*</span> <br> <input type="submit" name="Submit" value="Register" /> </form>