如何为HTML验证提供自定义验证错误消息? [英] How to give custom validation error messages for HTML validations?

问题描述

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

When I use default HTML validation it shows the default error messages which is not I want to show to my clients. I need to customize the message and give different massages for each validations such as min, max, type and require. For Example:

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

The field is required, The value does not match

请参考传统的HTML代码:

Refer the tradition HTML Code:

<input type="text" required>

我想要这样的东西:

I want something like this:

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

推荐答案

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

It's totally possible with custom libraries in jQuery which I would suggest - https://github.com/aslamanver/abvalidate

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

Custom Message - jQuery Form Validation - abValidate.js

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

通过添加这些CDN使用此库

Use this library by adding these CDNs

<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库使用自定义验证

There you go, now you can use your custom validation using jQuery abValidate library

<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验证提供自定义验证错误消息?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！