表单验证不显示消息

Question

我正在尝试让我的 javascript 验证电话号码输入并在用户输入错误信息时显示消息。我设置了另外两个输入来执行此操作，因此我复制了其中一个并将名称替换为 phoneNumber 但没有结果。请不要使用 HTML 替代品，我必须将其用于我的评估。

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

HTML

    <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

看起来您只是在这一行中输入了phoneMessage 而不是phoneNumberMessage：

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

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。只需查看this demo（其中还包含 CSS 高亮以确保有效性）。

当尝试输入示例国家/地区代码 10 时，该模式将允许 10 个数字之间有或没有空格或破折号，或者国家/地区代码前缀为 +10 或 0010。 test this regex.

这适用于所有现代浏览器，但不适用于某些较旧的浏览器。 MDN 表示仅 IE10+ 支持，Safari 不支持。其他浏览器都支持它，除了那些几乎不再使用的旧版本。

Answer 3

您的代码中有很多事情要做。我冒昧地对其进行了一些清理并简化了您的验证逻辑以实现更大的可扩展性。可以查看完整的工作代码here，但要点如下：

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

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

JavaScript：
这是验证逻辑的核心所在。正如其他人所提到的，您可以使用 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
  // (123)456-7890
  // (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. 它查询<form> 元素并为'submit' 添加一个事件侦听器。这比使用onclick 侦听器更可取，因为它允许您直接访问表单以及输入及其值。
2. 事件侦听器将validate 函数附加为您的事件处理程序。此函数将用于迭代表单中的各种输入（假设您有多个输入）并验证每个输入。您会注意到我使用了switch 语句通过name 属性处理各种输入。这使您可以在添加新输入时轻松添加其他验证。有关 switch 语句如何工作的更多信息，请查看the documentation。
3. 验证所有输入后，validate 函数将检查valid 标志是真还是假。如果表单无效（即valid = false），则每条错误消息都将包装在<li> 标记中并附加到<ul class='errors'>。
4. validPhoneNumber(n) 函数获取用户输入的电话号码并使用 RegEx 检查它是否有效。如果数字有效，则以整数形式返回；如果不是，该函数将返回null。如果愿意，您可以选择使用此功能将用户电话号码的格式标准化为整数。

希望这能让您了解使用 JS 验证 HTML 表单的好方法。但是请始终牢记，没有任何客户端验证可以替代服务器上的验证。