Question

我希望表单通过get请求发布凭据，但难以使其与onsubmit参数一起使用，该参数用于验证输入的数据。这是我的表单代码：

<form onsubmit="return formValidation()" action="show_get.php" method="get" name="registration">

这是我用于验证的代码

function formValidation() {
    var name = document.registration.name;
    var uemail = document.registration.email;
    {
        if (allLetter(name)) {
            if (ValidateEmail(uemail)) {
                if (checkDate()) {
                }
            }
        }
        return false;
    }
}

function allLetter(name) {
    var letters = /^[A-Za-z]+$/;
    if (name.value.match(letters)) {
        return true;
    }
    else {
        alert('Name must have alphabet characters only');

        return false;
    }
}

function ValidateEmail(uemail) {
    var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    if (uemail.value.match(mailformat)) {
        return true;
    }
    else {
        alert("You have entered an invalid email address!");

        return false;
    }
}

function checkDate() {
    var selectedText = document.getElementById('datepicker').value;
    var selectedDate = new Date(selectedText);
    var now = new Date();
    if (selectedDate < now) {
        alert("Date must be in the future");
    }
}

Answer 1

如果您附加onsubmit事件处理程序并返回false，则不会提交表单。在您的情况下，即使输入有效，始终也会发生。

您检查allLetter()，然后ValidateEmail()和checkDate()，但当他们全部有效时，您不会返回true。您的代码会继续，并且会达到return false;。 submit事件处理程序返回该验证函数的结果（false），因此它也会返回false。这告诉表单不提交。

将验证功能更改为：

function formValidation() {
  var name = document.registration.name;
  var uemail = document.registration.email;

  if (allLetter(name) && ValidateEmail(uemail) && checkDate()) {
    return true;
  } else {
    return false;
  }
}

如果所有三个检查都返回true，则验证功能也将返回true，表单将被提交。

注意：您有一对不必要的括号（{}），我删除了它们。我还通过将所有嵌套的if语句合并为一个来提高可读性。

修改：此外，您的checkDate()也不会相应地返回true和false。它默认返回undefined，这是一个假值。这意味着它无法通过验证功能的&&检查，并且表单不会被提交。将checkDate()更改为：

function checkDate() {
  var selectedText = document.getElementById('datepicker').value;
  var selectedDate = new Date(selectedText);
  var now = new Date();
  if (selectedDate < now) {
    alert("Date must be in the future");
    return false;
  } else {
    return true;
  }
}

编辑2：您还错误地获取了输入元素的值。当你这样做时：

var name = document.registration.name;
var uemail = document.registration.email;

您获得名称属性为name的HTML 元素和名称属性为email的HTML 元素。你应该得到元素＆＃39;值：

var name = document.registration.name.value;
var uemail = document.registration.email.value;

最好编辑您的答案并添加完整的HTML和JavaScript。可能会有更多问题。

html - 一起使用onsubmit和action

1 个答案: