EASYUI 使用自定义的校验类型来联动校验表单

EasyUI 自定义校验规则联动表单验证

最新推荐文章于 2024-04-14 16:01:11 发布

原创最新推荐文章于 2024-04-14 16:01:11 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#easyui

本文介绍如何在EasyUI中扩展自定义校验规则，实现根据输入框A的值联动校验输入框B的值是否相同。通过自定义规则并配置HTML元素，确保表单验证的灵活性。注意，自定义规则需单独配置属性，且处理Combobox时需采用特定方式获取值。

EasyUI的校验，一般使用validatebox来进行处理，除了一些已经给定的校验规则，有时候需要按照自己的特殊需求进行自定义校验规则，校验展示是按照原本的样式来展示；扩展性非常强。

例如，下面两个输入框，要根据输入框A的值对输入框B的值进行校验是否输入相同：

1）自定义规则，扩展EasyUI的校验规则：

// extend the 'equals' rule
$.extend($.fn.validatebox.defaults.rules, {
    equals: {
        validator: function(value,param){
            return value == $(param[0]).val();
        },
        message: 'Field do not match.'
    }
});

2）配置HTML元素：

<input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true">
<input id="rpwd" name="rpwd" type="password" class="easyui-validatebox" 
    required="required" validType="equals['#pwd']">

要注意点是，自定义的不能再data-options这个元素中使用了，只能分别配置属性

3) 还要注意一点，第1）步中，如果传入的param的class是一个combobox，这样的话通用的jQuery获取值方式就无法成功了，只能使用：

return value == $(param[0]).combobox('getValue');