jquery easyui校验select下拉列表值是否为空的问题？

0 0

jquery easyui校验select下拉列表值是否为空的问题？0

<select id="cc" class="easyui-combobox" name="state" style="width:200px;" required="true"> <option value="">test1</option> <option value="2">test2</option> <option value="3">test3</option></select> 为什么不能验证呢？test1为空应该弹出浮动层吧?难道easyui不支持校验select下拉框？

2012年12月16日 17:30

kelloKitty
0
0 0 4

2个答案按时间排序按投票排序

0 0

属性名类型描述默认值
required 布尔定义文本域是否为必填项 false
validType 字符串定义字段的验证类型，比如email, url, etc. null
missingMessage 字符串当文本框为空时提示的文本信息 This field is required.
invalidMessage 字符串当文本框内容不合法时提示的文本信息 null

required只表示文本框中是否有内容，easy ui的select框渲染完后会自动添加一个文本框用于输入，如下所示：
<span class="combo" style="width: 198px; height: 20px;"><input type="text" class="combo-text validatebox-text validatebox-invalid" autocomplete="off" style="width: 176px; height: 20px; line-height: 20px;"><span><span class="combo-arrow" style="height: 20px;"></span></span><input type="hidden" class="combo-value" name="state" value=""></span>

此时如果required=true，你清空此文本框，则会报必须有内容的异常；即此时验证的是<option></option>中间的内容是否为空

你可以加editable="false" 不允许编辑

你现在是想校验 <option value="">是否为空，可以这样

1、注册自定义的validateType
$.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.'
}
});

2、使用

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

selectValueRequired['#test'] 表示验证类型和验证的组件