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

当我使用默认HTML验证时，它会显示默认错误消息，而我不想向我的客户机显示这些消息。我需要自定义消息，并为每个验证提供不同的消息，例如min、max、type和require。例如：

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

请参阅传统HTML代码：

<input type="text" required>

我想要这样的东西：

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

---

在jQuery中使用自定义库是完全可能的，我建议-

自定义消息-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">

现在，您可以使用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>

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

}

演示：

---

这在标准HTML中是不可能的。如果您想要这个，您需要使用第三方库。如果您喜欢使用jQuery，我建议jQuery验证如果没有JS，您最多可以使用CSS中的：valid选择器和一些创造性来显示/隐藏不同的元素。但是，如果没有JS，就无法获得所需的详细程度。

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

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

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;