表单验证不显示消息

Question

我试图让我的javascript验证电话号码输入，并在用户输入信息不正确时显示消息。我还设置了另外两个输入，所以我复制了其中一个，并用phoneNumber替换了名称，但没有结果。没有HTML的替代品，请它是我必须使用我的评估。

这里我只包含了电话号码输入的代码。http://jsfiddle.net/29ZNV/

超文本标记语言

    <form>
        <label for="phoneNumber"><span class="textStyle">Phone Number*</span>
        <input type="text" id="phoneNumber"><br>
        <span id="phoneMessage" class="message">You must have a valid phone number</span>
         </label>
<input type="submit" id="submit" value="Submit"/>
</form>

JAVASCRIPT

var phoneInput = document.querySelector ('#phoneNumber');
var submitButton = document.querySelector('#submit');

function displayError(fieldname, message) {
    var input_field = document.querySelector('#' + fieldname);
    var error_box = document.querySelector('#' + fieldname + 'Message');

    addClass (input_field, 'error');
    error_box.style.display = 'block';

    error_box.innerHTML = message;
}

function hideError(fieldname){
    var input_field = document.querySelector('#'+fieldname);
    var error_box = document.querySelector('#'+fieldname+'Message');
    removeClass (input_field, 'error');
    error_box.style.display = 'none';
}

function addClass(html_element,class_str) {
    if(html_element.className.indexOf(class_str) == -1){
        html_element.className += ' '+class_str;
    }
}

function removeClass(html_element, class_str){
    if(html_element.className.indexOf(class_str) != -1){
        html_element.className = html_element.className.replace(class_str, '');
    }
}

  phoneInput.onblur = function(){
    if(!phoneNumberInput.value){
     valid = false;        
    displayError('phoneNumber', 'Please enter your number');
    }else if(!isValidPhoneNumber(phoneNumberInput.value)){
    valid = false; 
    displayError('phoneNumber', 'The phone number field is invalid');
    }else{
        hideError('phoneNumber');
    }
}


submitButton.onclick = function(){
    var nameIsValid = checkName();
    var emailIsValid = checkEmail();
    var phoneNumberIsValid = checkphoneNumber();

    var valid = nameIsValid && emailIsValid && phoneNumberIsValid;
    return valid;
 }

function isValidPhoneNumber(str){
    var phoneNumberPattern = new RegExp('^[a-zA-Z \s\'-]{1,}$');
}

Answer 1

您的代码中有很多内容。我已经对它进行了一些清理，并简化了验证逻辑，以允许更大的扩展性。您可以在此处查看整个工作代码，但要点如下：

超文本标记语言：
与其显示和隐藏每个字段的错误消息，不如考虑使用无序列表来显示错误消息。这种做法很常见，可以大大简化超文本标记语言和JS：

<form>
  <ul class="errors"></ul>
  <label for="phone_number">*Phone Number
    <input name="phone_number" type="text"/>
  </label>
  <br>
  <input type="submit"/>
</form>

这是验证逻辑的核心所在。正如其他人提到的，你可以使用HTML5属性来验证你的数据，但是这缺乏跨浏览器的兼容性，并且容易受到用户的操纵（尽管后一点对于JS验证也是如此；你应该总是在服务器端验证安全）

window.onload = function() {
  var form = document.querySelector('form');

  // listen for the form submission
  form.addEventListener('submit', validate, false);

  function validate(e) {
    var errors  = {},
        valid   = true,
        errorUL = document.querySelector('.errors'),
        node;

    // clear the errors list
    errorUL.innerHTML = '';

    // iterate through the inputs and validate each one using
    // a case statement
    [].forEach.call(e.target, function(input) {
      switch (input.name){
        case 'phone_number':
          if (!validPhoneNumber(input.value)) {
            // add the appropriate error message to the errors object
            errors[input.name] = "Phone number is not valid";
            valid = false; // set the 'valid' flag to false
          }
        // Add more case statements as you need them
        // Example:
        // case 'home_address': 
        // ...
      }
    });

    // if the form is invalid
    if (!valid) {
      // prevent the submission
      e.preventDefault();

      // loop through the errors and add the messages to the errorUL
      for (e in errors) {
        node = document.createElement('li');
        node.innerHTML = errors[e];
        errorUL.appendChild(node);
      }
    }
  }

  // This function will return the validated phone number or null
  // You may want to use this function to convert your phone number
  // string to an integer. This function will accept phone numbers 
  // in the following forms:
  //
  // 123.456.7890
  // 1234567890
  // [phone]
  // (123)-456-7890
  // 123-456-7890
  // 123 456 7890
  function validPhoneNumber(n) {
    var r = /^\(?(\d{3})\W{0,2}(\d{3})\W?(\d{4})$/,
        match = r.exec(n);

    // if the phone number is valid, return the number as an int
    // if the number is invalid, return null
    return match ? match.slice(1).join('')|0 : null;
  }
}

上面的JS做了几件事：

1. 它查询

希望这能给你一个用JS验证HTML表单的好方法。但是，请始终记住，任何数量的客户端验证都不能替代服务器上的验证。

Answer 2

注意：这个答案纯粹是作为表单验证的替代解决方案

使用HTML5输入类型很容易做到这一点。在这种情况下，您可以非常轻松地使用以下内容：

<form>
    <label for="phoneNumber">
        <span class="textStyle">Phone Number*</span>
        <input type="tel" pattern="((\+|00)[0-9]{2}|0)[ -]*[1-9]([ -]*[0-9]){8}" id="phoneNumber">
    </label>
    <button id="submit">Submit</button>
</form>

这就是一切。不需要JavaScript。看看这个演示（其中也包括CSS高亮显示有效性）。

当尝试输入示例国家代码10时，该模式将允许10个数字之间带有或不带空格或破折号，或者国家代码前缀带有10或0010。测试这个正则表达式。

这将适用于所有现代浏览器，但不适用于某些较旧的浏览器。MDN说这只在IE10中得到支持，而Safari不支持。其他浏览器都支持它，除了那些几乎不再使用的旧版本。

Answer 3

看起来您只是将phoneMessage而不是phoneNumberMessage放在这一行：

<span id="phoneNumberMessage" class="message">You must have a valid phone number</span>