如何为 HTML 验证提供自定义验证错误消息？答案

【问题标题】：How to give custom validation error messages for HTML validations?如何为 HTML 验证提供自定义验证错误消息？
【发布时间】：2019-05-21 17:47:28
【问题描述】：

当我使用默认 HTML 验证时，它会显示默认错误消息，而我不想向我的客户显示这些消息。我需要自定义消息并为每个验证提供不同的消息，例如最小值、最大值、类型和要求。例如：

该字段为必填项，值不匹配

参考传统的HTML代码：

<input type="text" required>

我想要这样的东西：

<input type="text" validation="required|my_message,min:5|my_message">

【问题讨论】：

这在标准 HTML 中是不可能的。如果你想要这个，你需要使用第三方库。如果您对使用 jQuery 感到满意，我建议您使用 jQuery validate
不使用 JS 最多只能使用 CSS 中的 :valid 选择器和一些创意来显示/隐藏不同的元素。但是，如果没有 JS，您将无法获得所需的详细程度。

标签： javascript jquery html css validation

【解决方案1】：

我建议使用 jQuery 中的自定义库完全有可能 - https://github.com/aslamanver/abvalidate

自定义消息 - jQuery 表单验证 - abValidate.js

ab-validation="required|Hey dude you missed that,min:5| No no you want to type more" name="name"

通过添加这些 CDN 来使用这个库

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- abValidate Library -->
<script type="text/javascript" src="https://raw.githubusercontent.com/aslamanver/abvalidate/master/abValidate.min.js">
<link rel="stylesheet" href="https://raw.githubusercontent.com/aslamanver/abvalidate/master/abValidate.css">

初始化库

$(document).ready(function () {
    //.ab-form is your form class
    $(".ab-form").abValidate();
});

你去吧，现在你可以使用 jQuery abValidate 库来使用你的自定义验证

<form class="ab-form" action="your_action_url">

   <!-- Input and error message should be in a div class -->
   <div class="my-form-group">
        <input type="text" ab-validation="required|Hey dude you missed that,min:5| No no you want to type more" name="name" class="ab-validation-i" />
        <div class="error"></div>
    </div><br>

    <div class="my-form-group">
        <input type="submit" name="submit" value="Submit">
    </div>

</form>

【讨论】：

【解决方案2】：

试试这个，它更好并且经过测试： HTML：

<form id="myform">
<input id="email" 
       oninvalid="InvalidMsg(this);" 
       oninput="InvalidMsg(this);"
       name="email"  
       type="email" 
       required="required" />
<input type="submit" />

JAVASCRIPT：

function InvalidMsg(textbox) {
if (textbox.value === '') {
    textbox.setCustomValidity('Required email address');
} else if (textbox.validity.typeMismatch){
    textbox.setCustomValidity('please enter a valid email address');
} else {
   textbox.setCustomValidity('');
}

return true;

}

演示：

http://jsfiddle.net/patelriki13/Sqq8e/

【讨论】：