如何强制验证来自 jquery 的 HTML 5 输入的数据？

debugcn 发表于 Dev

天使

我确实有一个带有模式和标题的输入以在数据错误的情况下显示错误，我确实不需要使用 post 方法，所以我只是制作了一些 Jquery 代码来使用输入验证，但我找不到如何显示输入的默认消息

这是 HTML5 输入：

<input type="text" id="user" pattern="whatever pattern" title="wrong value" required>

这是jquery代码：

    $("#inputEnviar").click(
    function(){

        var userValidation = $("#user")[0].checkValidity();

        //validate if the pattern match
        if ( userValidation ){

            //code to do whatever I have to do if the data is valid

        } else {
            //if the data is invalid
            //the input already has a default message to show
            //then, how do I force to show
            $("#user")-> FORCE TO SHOW TO THE DEFAULT ERROR MESSAGE OF THE INPUT
        }

    });

大卫

如果验证失败，请在您的else代码块中设置要通知用户的自定义消息：

$("#user")[0].setCustomValidity("Please enter at least 5 characters.");

然后，您可以使用reportValidity()来显示该消息。来自MDN：

如果元素的子控件满足其验证约束，则该HTMLFormElement.reportValidity()方法返回true。当false返回，取消invalid事件被激发每个孩子无效和确认问题报告给用户。

$("#inputEnviar").click(
  function() {
    var userValidation = $("#user")[0].checkValidity();
    //validate if the pattern match
    if (userValidation) {
      //code to do whatever I have to do if the data is valid
    } else {
      $("#user")[0].setCustomValidity("Please enter at least 5 characters.");
      var isValid = $('#user')[0].reportValidity();
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="user" pattern="whatever pattern" title="wrong value" required>

<input id="inputEnviar" type="button" value="Send">

对于旧浏览器（即 IE），您需要使用 polyfill。
有几个实现（比如这个git）。这篇文章更深入地探讨了这个话题。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。