javascript - EasyUi中Combobox组件required:true无效？

问题描述

问 题

情况：

<select class="easyui-combobox" name="sex" data-options="width:100,panelHeight:72,editable:false,required:true">
    <option value="" selected="selected">-- 请选择 --</option>
    <option value="男">男</option>
    <option value="女">女</option>
</select>

问题：当选中文本没有value值、或文本为'-- 请选择 --'时，怎么样通过required、validType属性添加客户端验证？

解决方案

JS:

//添加一个验证类型
$.extend($.fn.validatebox.defaults.rules, {
    comboxRequired: {
        validator: function(value, param){
            return value!= param[0];
        },
        message: '必须选择一个'
    }
});
$('#formresetButton').on("click",function(){
    $('#myForm').form("reset");
});
$('#formSubmitButton').on("click",function(){
    $('#myForm').form("submit",{
        onSubmit: function(){
            var isValid = $(this).form('validate');
            //如果验证失败，返回false，form不提交
            console.log(isValid);
            return isValid;
        }
    });

});

HTML:

<form id="myForm" >
    <input id="cc" value="001" style="width: 50px;">

    <select class="easyui-combobox" name="sex0" id="sex0" data-options="width:100,panelHeight:72,editable:false,required:true,validType:'comboxRequired[\'-- 请选择 --\']'">
        <option value="">-- 请选择 --</option>
        <option value="男">男</option>
        <option value="女">女</option>
    </select>
    <select class="easyui-combobox" name="sex1" id="sex1" data-options="width:100,panelHeight:72,editable:false,required:true">
        <option value="男">男</option>
        <option value="女">女</option>
    </select>
    <button type="button" id="formresetButton">reset<button>
        <button type="button" id="formSubmitButton">submit<button>
</form>

不适用标准的form下的type="reset"的button，使用普通button，监听这个button的点击事件，在回调函数中调用EasyUI的form组件的reset方法，即可完成form元素的重置。
通过validType指定验证类型来执行字段验证

这篇关于javascript - EasyUi中Combobox组件required:true无效？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！