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

debugcn 发表于 Dev

泰森·威廉姆斯（Tyson Williams）

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

它们使用相同的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
    }
});

});

我既需要漂亮的错误消息，又要验证电话号码，但是我不知道该怎么做。实际上，我什至不了解第一个如何验证任何内容，因为没有显式调用任何验证代码。

有人可以解释发生了什么吗？

啤酒酒精

由于required="required"输入名称中的属性，显示“美丽”错误消息。

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

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

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

该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/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。