easyui中combobox 验证输入的值必须为选项框中的数据

最新推荐文章于 2021-01-14 13:42:32 发布

zhou_xuexi

最新推荐文章于 2021-01-14 13:42:32 发布

阅读量3.2k

点赞数 1

分类专栏： JAVASCRIPT

JAVASCRIPT 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个关于Combobox控件的输入验证方法，该方法确保只有下拉列表中存在的选项才能被用户选择，避免了用户输入无效值的情况。文章还提供了一段JavaScript代码示例，展示了如何在用户离开控件时检查其输入的有效性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当作为提示框的方式时,combobox必须设置为允许用户输入的模式,但是当用户输入后未选择正确的数据就直接按tab或点击鼠标离开控件会导致用户输入无效的值并且通过验证,为了避免这种情况的发生我们需要对输入的值进行确认,输入不正确就清空用户的输入框以达到提示的效果

上代码:

onHidePanel : function() {  

    var _options = $(this).combobox('options');  

    var _data = $(this).combobox('getData');/* 下拉框所有选项 */  

    var _value = $(this).combobox('getValue');/* 用户输入的值 */  

    var _b = false;/* 标识是否在下拉列表中找到了用户输入的字符 */  

    for (var i = 0; i < _data.length; i++) {  

        if (_data[i][_options.valueField] == _value) {  

            _b=true;  

            break;  

        }  

    }  

    if(!_b){  

        $(this).combobox('setValue', '');  

    }  

},

修改的js文件为\jquery.easyui.js，可以搜索到onHidePanel这个方法，上面是去匹配下拉值，如果我们用下面的代码去实现用显示值去匹配，就会出现选择选项的值会被清空的bug

onHidePanel: function () {
    var _options = $(this).combobox('options');
    var _data = $(this).combobox('getData');/* 下拉框所有选项 */
    var _value = $(this).combobox('getValue');/* 用户输入的值 */
    var _b = false;/* 标识是否在下拉列表中找到了用户输入的字符 */
    for (var i = 0; i < _data.length; i++) {
        if (_data[i][_options.textField] == _value) {
            _b = true;
            break;
        }
    }
    if (!_b) {
        $(this).combobox('setValue', '');
    }