如何用jQuery实现输入框的oninvalid与oninput自定义表单验证

先解决你的报错问题 #

你遇到的「Cannot read properties of undefined (reading 'messages')」错误，几乎都是因为未正确引入jQuery Validate插件，或者在插件未加载完成时就调用了验证方法。先确保页面按顺序引入依赖：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

完整实现方案（基于jQuery Validate插件） #

下面是适配你需求的代码，兼容你使用的Spring <form:input>标签：

HTML结构

<form id="myForm">
    <form:input id="valid-to" required="required" type="text" class="form-control" />
    <button type="submit">提交</button>
</form>

jQuery验证逻辑

$(document).ready(function() {
    // 初始化表单验证
    $("#myForm").validate({
        // 绑定验证规则（通过input的name属性匹配，Spring form标签会自动生成对应name）
        rules: {
            "valid-to": {
                required: true
            }
        },
        // 自定义错误提示信息
        messages: {
            "valid-to": {
                required: "Enter User Name Here"
            }
        },
        // 错误提示的元素样式
        errorElement: "span",
        errorClass: "error-tip",
        // 验证失败时给输入框加红色边框
        highlight: function(element) {
            $(element).addClass("input-error");
        },
        // 验证通过时移除错误样式
        unhighlight: function(element) {
            $(element).removeClass("input-error");
        }
    });
});

配套CSS样式

/* 红色边框样式 */
.input-error {
    border: 1px solid #dc3545 !important;
}
/* 错误提示文字样式 */
.error-tip {
    color: #dc3545;
    font-size: 0.875em;
    margin-top: 4px;
    display: block;
}

无插件替代方案（纯jQuery原生事件） #

如果不想用Validate插件，也可以通过监听表单事件实现：

$(document).ready(function() {
    // 监听表单提交
    $("#myForm").submit(function(e) {
        const $input = $("#valid-to");
        const inputVal = $input.val().trim();
        
        // 清空之前的错误状态
        $input.removeClass("input-error");
        $input.next(".error-tip").remove();
        
        if (!inputVal) {
            e.preventDefault(); // 阻止表单提交
            $input.addClass("input-error");
            $input.after('<span class="error-tip">Enter User Name Here</span>');
        }
    });
    
    // 输入时自动清除错误状态
    $("#valid-to").on("input", function() {
        $(this).removeClass("input-error");
        $(this).next(".error-tip").remove();
    });
});

这个方案无需额外插件，效果和你之前的HTML原生实现一致，且更灵活。

内容的提问来源于stack exchange，提问作者Eatsam ul haq