我是否在 html5 中创建自定义验证？答案

【问题标题】：Do i create custom validation in html5?我是否在 html5 中创建自定义验证？
【发布时间】：2016-11-12 13:21:53
【问题描述】：

我的表单中有多个字段，例如

<input type="text" pattern="[0-9]+([\.,][0-9]+)?" step="any" oninvalid="setCustomValidity('Enter decimal value')" required>

我可以创建类似 required ex decimal 的东西，这样我就不必编写每次模式和自定义消息

我是第一次使用 html 5，所以如果您需要更清楚地了解问题，请帮助我，让我知道，谢谢

【问题讨论】：

标签： html user-interface html5-validation html-components

【解决方案1】：

你可以这样做，

如果您有许多具有相同模式的字段，您可以为所有这些字段指定相同的类名称，或者为所有这些字段指定相同的名称，
有必要执行上述操作，以便一起识别所有这些类型的字段，例如，

HTML 代码：

<input type="text" step="any" class="patternText" oninvalid="setCustomValidity('Enter decimal value')" required>

JS代码：

var patternFields=document.getElementByClassName("patternText");
for(var i=0;i<patternFields.length;i++)
{
patternFields.pattern="[0-9]+([\.,][0-9]+)?";
patternFields.oninvalid = function(event) {
event.target.setCustomValidity('Username should only contain lowercase letters. e.g. john');
}
}

【讨论】：

【解决方案2】：

基于示例here：

$.validator.addMethod('Decimal', function(value, element) {

return this.optional(element) || /^\d+(\.\d{0,3})?$/.test(value);

}, "请输入正确的数字，格式为xxxx.xxx");

【讨论】：