【问题标题】：Validate phone number on blur using pattern使用模式在模糊上验证电话号码
【发布时间】：2020-01-10 04:17:14
【问题描述】：

我有一个表格，我想检查电话号码的格式是否正确，但似乎每次都失败。

$('.form-control').blur(function(){                    
    if(!this.validity.valid){                        
        $(this).addClass('emptyField');

    }
    else{
        $(this).removeClass('emptyField');
    }
})

.emptyField { background:red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" class="form-control" name="fill_phone" placeholder="xxx-xxx-xxxx" required>

有效的电话号码应该是 XXX-XXX-XXXX，但似乎每次都失败。我在电子邮件字段上使用相同的代码，并且验证效果很好。

【问题讨论】：

无法复制。对我来说，它按预期工作
“失败”是什么意思？它是如何失败的？
除了 emptyField ++ 无效（++ 之前有一个空格，即使你没有，emptyField 也没有声明为 JavaScript tolken），代码可以正常工作.投票结束。
emtyField 目前并不重要（我已将其从代码中删除），当我输入有效数字 905-123-1234 时，仍会添加 emptyField 类。
它不在您显示的代码中。

标签： javascript jquery forms validation

【解决方案1】：

所以你需要使用带有 JS 或 HTML5 验证模式的 reg ex。让我给你举两个例子。

1

     function phonenumber(inputnumber) {
  var phone = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
  if(inputnumber.value.match(phone)) {
    return true;
  }
  else {
    alert("message");
    return false;
  }
}

HTML5 验证

在 HTML5 中你可以使用<input type='tel'>

<input type='tel' pattern='[\+]\d{2}[$]\d{2}[$]\d{4}[\-]\d{4}' title='Phone Number (Format: +99(99)9999-9999)'/>

或

<label for="phone">Enter your phone number:</label>

<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>

<small>Format: 123-456-7890</small> `

Link To MDN HTML5 Phone Input

【讨论】：

当 OP 已经在使用模式属性时，这如何解决问题？
我的回复的后半部分没有被复制过来，看下一个答案应该是有道理的。如果
现在您只是在猜测不应该如何生成答案。有问题的代码有效。由 OP 提供有关它如何不起作用的详细信息

【解决方案2】：

内容是动态呈现的吗？当我渲染动态内容时，我必须更改语法才能使其正常工作。这是您可以尝试的语法。如果它不是静态的，那么 j 查询不会使用上述语法找到它。这对我有用。这告诉 jquery 检查页面的动态内容。

    S(document).on("blur", ".form-control", event => {
  if (!this.validity.valid) {
    $(this).addClass("emptyField");
  } else {
    $(this).removeClass("emptyField");
  }
});

【讨论】：

我可能还会尝试这个，因为我的内容确实是动态创建的。看我上面的解决方案，
它给我抛出了一个错误：Uncaught TypeError: Cannot read property 'valid' of undefined
是的，上面的语法会找到动态呈现的内容。不确定您的 this.validity 来自哪里？您可以尝试将箭头函数切换为经典函数，因为它将 this 绑定到该特定函数。真的很难说，因为我看不到整个项目。这是一个例子` $(document).on('blur', ".form", function(){ //在这里做逻辑 }) 希望对你有帮助！祝你好运。我有类似的问题。

【解决方案3】：

好的，所以我想通了，问题是由意外引起的。该表单包含在 php.ini 中。表单中有这样的模板变量，value="{fill_phone}"。

在向访问者展示表单之前，模板变量正在使用 str_replace 替换，如下所示，$form = str_replace('{fill_phone}', '', $form); ，我会动态遍历表单上的所有变量。

一旦我从表单中手动删除了所有模板变量，一切正常。我很想有人向我解释这一点，因为我不知道为什么这会破坏表单验证。请记住，电子邮件验证工作正常，但电话号码验证对我不起作用。

现在一切正常。感谢您的所有帮助。

【讨论】：