Question

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

BEAUTIFUL error messages but DOESN'T validate the phone number
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

＆＃34;美丽＆＃34;由于名称输入上的required="required"属性，显示错误消息。

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

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

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

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

但长期和短期是，如果您需要对错误消息进行一致的查看，并且需要与旧版浏览器兼容，那么您将需要基于Javascript的解决方案。

修改：使用input type="tel"更新了您的JSFiddle示例以及我认为是美国电话号码模式（nnn-nnn-nnnn）：http://jsfiddle.net/h5xf2wdk/1/

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

1 个答案: