Question

我为表单验证编写了代码。

应该像这样工作：

检查(allLetter (uName))，如果是true，则验证下一个输入。

如果有任何验证false，则应return false。

我的问题是，如果两个验证都是true，那么所有内容都是false，并且不会发送表单。

如果我在true中设置formValidation ()，如果至少有一项检查为false，则不应发送该表单。

<form name='registration' method="POST" onSubmit="return formValidation();">
    <label for="userName">Name:</label>
    <input type="text" name="userName" size="20" />
    <label for="userPhone">Phone:</label>
    <input type="text" name="userPhone" size="20" />
    <input type="submit" name="submit" value="Submit" />
</form>

function formValidation() {
  var uName = document.registration.userName;
  var uPhone = document.registration.userPhone;
    if(allLetter(uName)) {
      if(phone(uPhone)) {}
    }
    return false;
  }


function phone(uPhone){ 
  var digts = /^[0-9]+$/;
  if(uPhone.value.match(digts)){
    return true;
  } else {
    alert('Phone must have only digits');
    uPhone.focus();
    return false;
  }
}

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

Answer 1

首先，您使用的是一种超过20年的方式来获取对您的元素的引用（document.form.formElementNameAttributeValue），虽然这仍然适用于遗留原因，但它不符合标准Document Object Model (DOM) API。

接下来，您已将验证测试分解为不同的方法（对于可重用性而言，这当然不是一个坏主意），但在这种情况下，添加大量您不需要的代码。我总是发现最好从简单开始并使代码工作，然后重构它。

您还没有正确使用<label>元素。

另外一点，您的表单设置为通过POST请求发送其数据。只应在更改服务器状态时使用POST（即，您要在服务器上添加，编辑或删除某些数据）。如果这就是你的表格所做的那样，你很好。但是，如果没有，您应该使用GET请求。

最后，您还使用20年以上的技术来设置使用内联HTML事件属性（onsubmit），which should no longer be used for many reasons的事件处理程序。此外，使用此技术时，您必须使用验证函数中的return false，然后使用属性中验证函数名称前面的return取消事件，而不是仅使用event.preventDefault()

因此，这是一种基于标准的现代验证方法：

// Get references to the elements you'll be working with using the DOM API
var frm = document.querySelector("form[name='registration']");
var user = document.getElementById("userName");
var phone = document.getElementById("userPhone");

// Set up event handlers in JavaScript, not with HTML attributes
frm.addEventListener("submit", formValidation);

// Validation function will automatically be passed a reference
// the to event it's associated with (the submit event in this case).
// As you can see, the function is prepared to recieve that argument
// with the "event" parameter.
function formValidation(event) {

  var letters = /^[A-Za-z]+$/;
  var digts = /^[0-9]+$/;
  
  // This will not only be used to show any errors, but we'll also use
  // it to know if there were any errors.
  var errorMessage = "";
  
  // Validate the user name
  if(user.value.match(letters)) {

     // We've already validated the user name, so all we need to
     // know now is if the phone is NOT valid. By prepending a !
     // to the test, we reverse the logic and are now testing to 
     // see if the phone does NOT match the regular expression
     if(!phone.value.match(digts)) {
       // Invalid phone number
       errorMessage = "Phone must have only digits";
       phone.focus();
     }
     
  } else {
    // Invalid user name
    errorMessage = "Username must have alphabet characters only";
    user.focus();
  }

  // If there is an error message, we've got a validation issue
  if(errorMessage !== ""){
    alert(errorMessage);
    event.preventDefault(); // Stop the form submission
  }

}

<!-- 20 is the default size for input elements, but if you do 
     want to change it do it via CSS, not HTML attributes -->
<form name='registration' method="POST">
    <!-- The for attribute of a label must be equal to the id 
         attribute of some other element, not the name attribute  -->
    <label for="userName">Name:</label>
    <input type="text" name="userName" id="userName">
    <label for="userPhone">Phone:</label>
    <input type="text" name="userPhone" id="userPhone">
    <input type="submit" name="submit" value="Submit">
</form>

发送时表单无法正常工作

1 个答案: