发送时表单无法正常工作

时间:2018-04-16 14:17:38

标签: javascript forms

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

应该像这样工作:

检查(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;
  }
}

1 个答案:

答案 0 :(得分:2)

首先,您使用的是一种超过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>