jQuery Validation Plugin - 简单的实现

Posted 2023-05-09

【中文标题】jQuery Validation Plugin - 简单的实现

【英文标题】：jQuery Validation Plugin - simple implementation

【发布时间】：2013-06-03 06:11:11

【问题描述】：

我在这里有这个标记，我希望添加一个简单的检查来查看用户是否有 选择了一个尺寸。我正在使用 jQuery 验证插件我不确定最好的方法 去做这件事。我无法更改标记，因为它是自定义 cms 的一部分。

        <form class="product-details">  
        <select class="w80 valid" id="mysize" required="required" title="Please select size!" name="mysize">
           <option value="11071">Select Size</option>
           <option value="11079">S</option>
           <option value="11080">M</option>
           <option value="11081">L</option>
           <option value="11082">XL</option>
           <option value="11089">XXL</option>
        </select>
        ...
        <button type="submit">Add</button>
        </form>

我知道原版 jQuery 中的逻辑是这样的：

        ( function($) 

           $(function ()  
               $('.product-details').submit(function()
                 var mySize = $('#mysize');
                 var firstOption = mySize.find('option').first().val();
                 var userOption = mySize.find(':selected').val();
                 if( firstOption === userOption ) 
                    // fail
                    return false;
                    // trigger some error.
                 
               );
           ); 

         ) ( jQuery );

那么如何使用 jQuery validate 来做类似的事情。

【参考方案1】：

试试

$(function()
    jQuery.validator.addMethod( 'notequals', function(value, element, param)
        return value != param;
     , 'Please select a valid value')

    $('.product-details').validate(
        rules: 
            mysize: 
                notequals: $('#mysize').find('option').first().val()
            
        
    );
);

演示：Plunker

【讨论】：

哦，添加一个新的验证方法 AddMethod 是关键。谢谢阿伦！