easyui combobox 值必输

最新推荐文章于 2026-03-22 00:28:41 发布

翻译最新推荐文章于 2026-03-22 00:28:41 发布 · 7.3k 阅读

收录于

当前文章被以下社区和专栏收录：

本文介绍如何在EasyUI中实现ComboBox的选择项非空验证。通过扩展validatebox组件的默认规则，确保ComboBox中的选择项必须被选中。该方法适用于需要用户从下拉列表中进行必选项选择的场景。

最近项目需求select中的值必须输入。然而，使用easyui麻烦的是在select标签上加入

select class=”easyui-combobox easyui-validatebox” required=”true”

,运行时发现没有效果。必须写扩展代码来解决comboxbox的非空验证。

代码

<select
        id="test"
        class="easyui-combobox"
        name="state"
        style="width:200px;"
        required="true"
        validType="selectValueRequired['#test']"
>
    <option value="">请选择</option>
    <option value="1">test1</option>
    <option value="2">test2</option>
    <option value="3">test3</option>
</select>

扩展代码：

<script>

    /**
     * 扩展combox验证，easyui原始只验证select text的值，不支持value验证
     */
    $.extend($.fn.validatebox.defaults.rules, {
        selectValueRequired: {
            validator: function(value,param){
                console.info($(param[0]).find("option:contains('"+value+"')").val());
                return $(param[0]).find("option:contains('"+value+"')").val() != '';
            },
            message: 'select value required.'
        }
    });
</script>