没有任何插件的 HTML 输入元素验证答案

【问题标题】：HTML input element validation without any plugin没有任何插件的 HTML 输入元素验证
【发布时间】：2012-01-08 20:36:15
【问题描述】：

我想在不使用任何验证插件的情况下验证元素。首先，我定义：

<input type='number' required="required" id='amt_elmt' name='amt_elmt' />

但我仍然可以在此控件中输入任何文本（我希望在其中只能输入数字）；它也接受空白值。

可能需要哪些额外的代码？

【问题讨论】：

type='number' 并且所有浏览器都支持 required 属性。如果您想在将其发送到服务器端之前对其进行验证，您将需要一个 javascript 后备。无需 javascript 在 Opera 中工作：jsfiddle.net/JvuLX/1
我认为@soderslatt 的意思是不在所有浏览器中都支持
对。这似乎是一个错字。实际上，我正在通过 javascript 或 JQuery 按下“提交”按钮后寻找验证。如果浏览器不支持它，我必须使用一些好的插件进行验证。你会推荐哪一个？
抱歉错字。使用 Modernizr 和一个 ployfill。 Modernizr：modernizr.com 一堆 polyfills 列表，github.com/Modernizr/Modernizr/wiki/….
查看 HTML5 表单验证兼容性的当前状态：caniuse.com/#form-validation

标签： html

【解决方案1】：

正如其他人提到的那样，并非所有浏览器都支持 Forms 2.0 或新的 HTML5 输入类型 (see this link)。

我最近回答了another question 处理 HTML 5 表单元素。我的桌面浏览器（FF、Chrome、IE）或移动浏览器（FF、Android 默认浏览器）都没有尝试验证我使用的是数字，或将其限制为数字。

最好的办法是使用 javascript 客户端验证，例如 jquery.validate 或任何其他数量的库来完成验证。

编辑：该链接指向 Visual Studio 附带的 Microsoft 验证库，但您可以从该网站下载它，它运行良好。如果您需要，我可以发布有关如何使用它的代码

Edit2： Codez http://jsfiddle.net/qxsS8/

【讨论】：

是的。在阅读您的答案后，我现在正在考虑使用一些好的插件。你会推荐哪一个？
检查我的编辑。我已经链接到 Visual Studio 附带的库
正如您在答案中提供的那样，pl。发布代码，以便我可以进一步构建它。谢谢。
你去。希望有帮助
这就是我想要的。非常感谢。另一件事——即使字段有错误数据（我的意思是它无法验证），是否会提交表单。

【解决方案2】：

数字是一种 HTML5 输入类型。这还不是所有浏览器都正确支持，在大多数浏览器中，您将能够输入任何内容。

如果您想在用户键入时阻止除数字以外的任何内容，则需要在按键时使用 JavaScript。

如果您想在发布后验证是否仅使用数字，您可以使用 JavaScript 或 PHP。

【讨论】：

嗯。如果不是所有浏览器都支持它，我必须使用一些好的插件进行验证。你会推荐哪一个？
正如 Eonasdan 在他的回答中提到的，您可以使用 jQuery 库。
我已经测试了一些库（www.position-relative.com，www.webreference.com）。如果您尝试过其他更简单灵活的方法，请。分享。

【解决方案3】：

为您要处理的事件添加 Javascript 事件处理程序（即 onkydown、onkeyup、...）。在这些函数中，您可以访问输入的值并删除不需要的字符。

【讨论】：

实际上，我正在通过 javascript 或 JQuery 按下“提交”按钮后进行验证。似乎不支持跨浏览器。如果我必须使用一些好的插件进行验证。你会推荐哪一个？

【解决方案4】：

您可以使用标准的 HTML5 表单验证。然后支持旧浏览器使用这个库：

https://github.com/ericelliott/h5Validate

这将使用 JavaScript 添加支持。

您需要添加到页面中的只是以下代码：

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script src="jquery.h5validate.js"></script> // You will need to host this somewhere
<script>
    $(function () {
        $('form').h5Validate();
    });
</script>

它适用于：桌面：IE 9、8、7、6、Chrome、Firefox、Safari 和 Opera。在 Windows 7 和 Mac 上测试。移动设备：iPhone、Android、Palm WebOS

【讨论】：

非常感谢。另一件事——即使字段有错误数据（我的意思是它无法验证），是否会提交表单。

【解决方案5】：

最后我发现使用 javascript（可能还有 jquery）非常灵活。（无依赖，无第三方错误，对于不懂插件逻辑的程序员来说很难解决）。

link to "javascript only form validation tutorial"

这个链接被证明是非常有用的。这可能对其他人有帮助，因此作为我自己问题的单独答案发布。

【讨论】：