jQuery plugins


baigoValidate

这是一个表单验证插件,3.0 起彻底重写,与以往版本完全不兼容。

本插件基于 bootstrap 4.3.* 版本,主要用到 css 样式,请使用者注意,您也可以通过配置完全脱离 bootstrap!


目录结构

  1. baigoValidate.js 验证插件
  2. baigoValidate.min.js 验证插件压缩版
  3. ajax.json ajax 验证示例

基本使用

载入文件

<!-- 样式表,3.0 起不再需要 -->
<link href="baigoValidate.css" type="text/css" rel="stylesheet">

<!-- jQuery 库 -->
<script src="jquery.min.js" type="text/javascript"></script>

<!-- bootstrap 库 -->
<script src="bootstrap.bundle.min.js" type="text/javascript"></script>
<link href="bootstrap.min.css" type="text/css" rel="stylesheet">

<!-- 插件 -->
<script src="baigoValidate.min.js" type="text/javascript"></script>

下载 jQuery

下载 Bootstrap

表单 HTML

请注意表单的 idname 属性必须与验证规则一一对应

全局消息容器 元素在验证出错时会提示错误。

id="msg_{:name}" 类型的元素会显示每一个表单验证的结果,{:name} 值应该与验证规则一一对应。

<form name="tag_form" id="tag_form" action="tag_save.php">
    <div>
        <label>名称</label>
        <input value="" name="tag_name" id="tag_name">
        <small id="msg_tag_name"></small>
    </div>

    <div>
        <label>状态</label>
        <div>
            <input type="radio" name="tag_status" id="tag_status_show" value="show" checked>
            <label for="tag_status_show">显示</label>
        </div>
        <div>
            <input type="radio" name="tag_status" id="tag_status_hide" value="hide">
            <label for="tag_status_hide">隐藏</label>
        </div>
        <small id="msg_tag_status"></small>
    </div>

    <!-- 全局消息容器 -->
    <div class="bg-validate-box"></div>

    <button type="submit">保存</button>
</form>

初始化并触发验证,如:

<script type="text/javascript">
// 配置
var opts_validate = {
    rules: {
        tag_name: {
            length: '1,30'
        },
        tag_status: {
            require: true
        }
    },
    attr_names: {
        tag_name: 'Tag',
        tag_status: '状态'
    },
    type_msg: {
        length: '{:attr} 只能在 {:rule} 之间',
        require: '{:attr} 是必须的'
    },
    msg: {
        loading: 'Loading...'
    },
    box: {
        msg: '输入错误'
    }
};


$(document).ready(function(){
    // 初始化
    obj_form = $('#form_id').baigoValidate(opts_validate);

    // 验证,2.0 起由 validateSubmit 改为 verify
    obj_form.verify();
});
</script>

特殊情况

在日常使用中,可能会遇到一些特殊情况,比如表单 id、name 无法与验证规则匹配,这种情况通常出现在需要输入数组的表单中,下面是一个实例:

<div>
    <input type="checkbox" name="allow[add]" value="1" id="allow_add" data-validate="allow">
    <label for="allow_add">
        添加
    </label>
</div>
<div>
    <input type="checkbox" name="allow[edit]" value="1" id="allow_edit" data-validate="allow">
    <label for="allow_edit">
        编辑
    </label>
</div>
<div>
    <input type="checkbox" name="allow[delete]" value="1" id="allow_delete" data-validate="allow">
    <label for="allow_delete">
        删除
    </label>
</div>

通常情况下,插件会根据表单 idname 属性去匹配验证规则。

上述例子由于表单类型是 checkbox,所以 id 是三个,而规则是一个,因此无法根据 id 匹配验证规则,这种情况下,插件会根据 name 属性去匹配规则,而恰好此例的 name 属性是一个数组,与 JSON 的命名规则不匹配,因此必须有一种替代方法来匹配规则。

我们需要分两步来解决:

  1. 请注意上述例子中的 data-validate 属性,此属性的值与验证规则相同
  2. 在配置对象中定义 selector_type 对象,如:
var opts_validate = {
    rules: {
        allow: {
            require: true
        }
    },
    selector_types: {
        allow: 'validate'
    }
};

selector_types 对象用来定义每一条规则所对应的表单选择器,以便插件能够获取表单的值。

采用 规则名: 选择器类型 的方式定义,选择器类型可能的值如下:

  1. validate
  2. name
  3. class
  4. id