jQuery 表单验证 - phoneUS 和默认消息样式

Question

我正在尝试创建一个表单，请求使用jQuery Validation Plugin 验证的（美国）电话号码。这里有两个例子。

1. BEAUTIFUL error messages but DOESN'T validate the phone number
2. PLAIN error messages but DOES validate the phone number

它们使用相同的 HTML（见下文）。第二个也使用了一些 JavaScript（见下文）。

HTML

<form id="myform">
<table>
    <tr>
        <td>Name</td>
        <td>Phone Number</td>
        <td></td>
    </tr>
    <tr>
        <td>
            <input type="text" name="Name" required="required" />
        </td>
        <td>
            <input type="phoneUS" name="PhoneNumber" />
        </td>
        <td>
            <input type="submit" />
        </td>
    </tr>
</table>
</form>

JavaScript

$(document).ready(function () {

$('#myform').validate({ // initialize the plugin
    errorElement: 'div',
    submitHandler: function (form) { // for demo
        alert('valid form submitted'); // for demo
        return false; // for demo
    }
});

});

我想要漂亮的错误消息和电话号码验证，但我不知道该怎么做。事实上，我什至不明白第一个是如何验证任何东西的，因为没有明确调用验证代码。

有人能解释一下是怎么回事吗？

Answer 1

由于名称输入中的required="required" 属性而显示“漂亮”错误消息。

这是一个标准的 HTML5 表单验证属性，因此完全由浏览器处理。就像生活中的许多事情一样，你的美丽可能和我的不一样，这取决于你的浏览器。

旧版浏览器根本无法识别它 - http://caniuse.com/#search=form%20validation E.g. IE 10 之前。

还有一个input type="tel" 用于电话号码 - 这对移动设备特别有用，因为它应该显示数字键盘而不是标准的字母键盘 - 但浏览器支持更有限：http://caniuse.com/#feat=input-email-tel-url

tel 类型还有一个pattern 属性，该属性接受一个正则表达式，以便您指定特定的电话号码格式：http://www.w3.org/TR/html-markup/input.tel.html

但总而言之，如果您需要一致地查看错误消息，并且需要与旧浏览器兼容，那么您将需要基于 Javascript 的解决方案。

编辑： 使用 input type="tel" 和我认为是美国电话号码模式 (nnn-nnn-nnnn) 更新了您的 JSFiddle 示例：http://jsfiddle.net/h5xf2wdk/1/