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>