html - 当 HTML5 所需的输入模式未通过时，如何创建自定义消息？

Question

我有以下内容：

<input required pattern=".{6,}" class="big medium-margin" name="Password" placeholder="Password" size="25" type="password" />

当我只输入一个字符时，我会收到一条消息：

"Please match the requested format"

有没有办法可以自定义此消息以说出诸如“请输入至少 5 个字符”之类的内容

Answer 1

你可以用这个技巧做一个快速而肮脏的方法：

<form>  
 <label for="username">Username:</label><br/>
  <input id="username" type="text" pattern=".{6,}" autofocus required title="Please enter at least 5 characters">        
  <input id="submit" type="submit" value="create">   
</form>

Answer 2

采用：setCustomValidity

第一个函数设置自定义错误消息：

$(function(){
    $("input[name=Password]")[0].oninvalid = function () {
        this.setCustomValidity("Please enter at least 5 characters.");
    };
});

第二个功能关闭自定义消息。如果没有此功能，自定义错误消息将不会像默认消息那样关闭：

$(function(){
    $("input[name=Password]")[0].oninput= function () {
        this.setCustomValidity("");
    };
});

PS您可以将 oninput 用于具有文本输入的所有输入类型。

对于输入 type="checkbox"，您可以使用 onclick 在错误应该关闭时触发：

$(function(){
    $("input[name=CheckBox]")[0].onclick= function () {
        this.setCustomValidity("");
    };
});

对于输入 type="file"，您应该使用更改。

change 函数中剩下的代码是检查文件输入是否为空。

PS这个空文件检查只针对一个文件，您可以随意使用任何您喜欢的文件检查方法以及您可以检查文件类型是否符合您的喜好。

文件输入自定义消息处理功能：

$("input[name=File]").change(function () {
    let file = $("input[name=File]")[0].files[0];
    if(this.files.length){
        this.setCustomValidity("");
    }
    else {
        this.setCustomValidity("You forgot to add your file...");
    }
    //this is for people who would like to know how to check file type
    function FileType(filename) {
        return (/[.]/.exec(filename)) ? /[^.]+$/.exec(filename) : undefined;
    }
    if(FileType(file.name)!="pdf"||FileType(file.name)!="PDF"){
        this.setCustomValidity("Your file type has to be PDF");
    //this is for people who would like to check if file size meets requirements
    else if(file.size/1048576>2){
        // file.size divided by 1048576 makes file size units MB file.size to megabytes
        this.setCustomValidity("File hast to be less than 2MB");
    }
    else{
    this.setCustomValidity("");
    }
});//file input custom message handling function

HTML5 表单必需属性。设置自定义验证消息？

JSFiddle：http: //jsfiddle.net/yT3w3/

非jQuery解决方案：

function attachHandler(el, evtname, fn) {
    if (el.addEventListener) {
        el.addEventListener(evtname, fn.bind(el), false);
    } else if (el.attachEvent) {
        el.attachEvent('on' + evtname, fn.bind(el));
    }
}
attachHandler(window, "load", function(){
    var ele = document.querySelector("input[name=Password]");
     attachHandler(ele, "invalid", function () {
        this.setCustomValidity("Please enter at least 5 characters.");
        this.setCustomValidity("");
    });
});

JSFiddle：http: //jsfiddle.net/yT3w3/2/

Answer 3

我会添加另一个属性oninvalid。

oninvalid="setCustomValidity('Please enter at least 5 characters')"

<input required pattern=".{6,}" class="big medium-margin" name="Password" placeholder="Password" size="25" type="password" oninvalid="setCustomValidity('Please enter at least 5 characters')"/>

Answer 4

我发现，至少chrome会自动将输入的标题添加到消息中，因此不需要额外的js，请参见：

输入如下所示：

<input type="text" title="Number with max 3 decimals" pattern="^\d+(\.\d{1,3})?$">

Answer 5

没有 javascript 或 jQuery 验证非常简单。我们可以通过 HTML5 来实现

假设我们有 HTML 字段：

<input required pattern=".{6,}" class="big medium-margin" name="Password" placeholder="Password" size="25" type="password" />

只需将 HTML 更改为

<input required pattern=".{6,}" class="big medium-margin" title="Please enter at least 5 characters." name="Password" placeholder="Password" size="25" type="password" />

如果你观察，只需添加 title = "Error message"

现在，无论何时发布表单，都会显示给定的消息，我们不需要 JavaScript 或 jQuery 检查。这个解决方案对我有用。

Answer 6

您需要使用该setCustomValidity功能。这样做的问题是它只保证为启用了 JavaScript 的用户提供自定义消息。

<input required pattern=".{6,}" ... oninput="check(this)">
                                    ^^^^^^^^^^^^^^^^^^^^^

function check (input) {
    if (input.value.search(new RegExp(input.getAttribute('pattern'))) >= 0) {
        // Input is fine. Reset error message.
        input.setCustomValidity('');
    } else {
        input.setCustomValidity('Your custom message here.');
    }
}

Answer 7

我只是oninvalid用来设置自定义有效性错误消息，然后onchange用来重置消息，以便表单可以提交。

<input type="number" oninvalid="this.setCustomValidity('Please enter an INTEGER')" onchange="this.setCustomValidity('')" name="integer-only" value="0" min="0" step="1">

Answer 8

https://www.geeksforgeeks.org/form-required-attribute-with-a-custom-validation-message-in-html5/

    <input id="gfg" type="number" min="101" max="999" required> 

    <button onclick="myFunction()">Try it</button> 


    <p id="geeks"></p> 

    <script> 
        function myFunction() { 
            var inpObj = document.getElementById("gfg"); 
            if (!inpObj.checkValidity()) { 
                document.getElementById("geeks") 
                        .innerHTML = inpObj.validationMessage; 
            } else { 
                document.getElementById("geeks") 
                        .innerHTML = "Input is ALL RIGHT"; 
            } 
        } 
    </script>