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

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

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

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>