在html输入上显示范围验证器错误消息

Displaying range validator error message on html input

本文关键字：验证 错误 消息 范围 显示 html 输入      更新时间：2023-09-26

我在html中有一个输入类型=text，我在js文件中有这个js代码来显示错误消息

 var $form = $("#myid"),
    $errorMsg = $("<span id='myerrormessagespan' class='error' style='color:red;'>*</span>");

var toReturn = 0;
$("input", $form).each(function () {
    if ($(this).val() == "") {
        if (!$(this).data("error")) {
            $(this).data("error", $errorMsg.clone().insertAfter($(this)));
        }
        toReturn = 1;

    }
    else {
        if ($(this).data("error")) {
            $(this).data("error").remove();
            $(this).removeData("error");
        }
    }
});

我试图将此代码转换为输入类型=文本字段上的范围验证器。在文本框中仅显示5位数字，但我无法实现。有什么简单的方法可以做到这一点吗?

谢谢

考虑使用jQuery验证插件，特别是rangelth方法。然而，如果你想坚持原始代码而不使用任何库，那么我建议你尝试下面的代码，例如:

: 

<form id="myid" name="myid" method="post" action="/">name :
    <input type="text" name="name" id="name" />age :
    <input type="text" name="age" id="age" />
    <input type="submit" id="submit" name="submit" value="Save" />
</form>
jQuery

: 

var $form = $("#myid"),
$errorMsg = $("<span id='myerrormessagespan' class='error' style='color:red;'>*</span>");
$("#submit").on("click", function () {
    var toReturn = true;
    $("input", $form).each(function () {
        var value = $(this).val();
        if((!$.trim(this.value).length) || (value.length > 5)) {
                if (!$(this).data("error")) {
                    $(this).data("error", $errorMsg.clone().insertAfter($(this)));
                }
                toReturn = false;
        }
        else {
                if ($(this).data("error")) {
                    $(this).data("error").remove();
                    $(this).removeData("error");
                }
        }
    });
  return toReturn;
});

Working JSFiddle Demo

相关文章：