Jquery验证插件，使用选项的数据元素作为验证检查

Jquery Validation Plugin, Use option's data element as check for validation

本文关键字：验证 元素 数据 检查 选项 插件 Jquery      更新时间：2023-09-26

我正在寻找一种方法让 JQuery 验证插件检查所选选项的数据元素的值以确定选择是有效还是无效。选择中需要包含无效选项的原因主要是为了显示目的。也就是说，如果我有一个问题"你的房子是什么颜色？"的选择，并且我有"红色"，"蓝色"，"绿色"选项，则需要明确地向最终用户表明"绿色"不是有效的选择。

现在我正在对其他所有内容使用"验证"，但我必须编写一个单独的函数来检查这些字段，我希望能够只用"验证"来完成这一切。

以下是我正在寻找的更详细的示例：

.HTML：

<html>
<head>
<script type="text/javascript" src="./js/jquery-validate-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
    // BASIC VALIDATION
    // Set Validator Defaults and rules
    $.validator.setDefaults({
        errorPlacement: function(error, element) {  
            $(element).attr({"title": error.append()});
        },
        highlight: function(element){
            $(element).addClass("error");
        },
        unhighlight: function(element){
            $(element).removeClass("error");
        }
    });
    $("#myform").validate({
        rules: {
            email: {
                required: true,
                email: true
            },
            myselect: {
                // HOW DO I DEFINE THIS RULE SO THAT 
                // IF OPTION 3 IS SELECTED THIS RETURNS
                // INVALID
            }
        }   
    });
});
</script>
</head>    
<body>
<form id='myform' name='myform'>
    <input type='text' id='email' name='email value='' />
    <select id='myselect' name='myselect'>
        <option id='1' data-is_valid='1'>Option 1</option>
        <option id='2' data-is_valid='1'>Option 2</option>
        <option id='3' data-is_valid='0'>Option 3</option>
        <option id='4' data-is_valid='1'>Option 4</option>
    </select>
</form>

引用 OP：

"我必须编写一个单独的函数来检查这些字段，我希望能够只用validate来完成这一切。"

您可以使用 .addMethod() 方法来包装单独的函数并将其转换为规则。

但是，如果您花时间解释为什么要将select限制为某些选项，那么当您已经控制了select的创建方式时，可能会建议更好的答案或解决方法。 （这是SO在OP满意后很长时间内使其他人受益的一种方式）

以下是我最终解决它的方式：感谢斯帕基为我指明了正确的方向

jQuery.validator.addMethod("valid_option", function(value, element) {
    if ($(":selected", element).data('is_valid') == "1") {
        return true;
    }
    return false;
}, "&nbsp&nbspError, Invalid Selection");
相关文章：