Javascript 表单验证未显示消息

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

这里我只包含了电话号码输入的代码。

HTML

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

使用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

---

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

看起来你只是把

phoneMessage

而不是

phoneNumberMessage

放在这一行：

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

您必须拥有有效的电话号码

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

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>

上面的JS做了几件事：

它查询

元素，并为

'submit'

添加事件侦听器。这比使用

onclick

侦听器侦听更可取，因为它允许您直接访问表单以及输入及其值

事件侦听器将

validate

函数附加为事件处理程序。此函数用于迭代表单中的各种输入（假设有多个输入），并验证每个输入。您会注意到，我使用了一个

switch

语句，通过它们的

name

属性来处理各种输入。这允许您在添加新输入时轻松添加其他验证。有关switch语句如何工作的更多信息，请查看

验证所有输入后，

validate

功能将检查

valid

标志是否正确。如果表单无效（即

valid=false

），则每个错误消息将被包装在

标记中，并附加到

中

validPhoneNumber（n）

函数获取用户输入的电话号码，并使用正则表达式检查其是否有效。如果数字有效，则以整数形式返回；否则，函数将返回

null

。如果您选择，您可以选择使用此功能将用户电话号码的格式标准化为整数

---

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

您有一个语法错误。您从未为最后一个函数键入过右括号。很抱歉，复制粘贴错误已被修复。这是一个很好的解决方案，但是OP应该注意，这只适用于支持HTML5规范的较新浏览器。@wvandaal感谢您的提醒。当我开始打字时，我确实想过要提到这一点，但当我完成时，我已经忘记了。我在底部添加了另一段关于这一点的内容。@Devs浏览器中不支持的任何输入类型都将默认为输入类型

text

，在本例中也同样有效。正确，但电话号码的类型“tel”是如何工作的validation@Devs我尝试过在没有模式的情况下使用

type=“tel”

，Chrome并没有自动将输入限制为工作模式。该模式实际上是必需的，因为输入类型

tel

不会自动验证它。@Josh M这不会改变任何东西可能我误读了您的代码，但行

var error\u box=document.querySelector（'#'+fieldname+'Message'）

将选择您正在呼叫的元素

phoneNumberMessage

not

phoneMessage

显示错误（'phoneNumber'，'phoneNumber字段无效'），因此它应该是

phoneNumberMessage

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

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

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;
  }
}