目录结构


  1. baigoValidator.js 验证插件
  2. baigoValidator.min.js 验证插件压缩版
  3. baigoValidator.css CSS 样式
  4. status_x.png 验证失败时的图标
  5. status_y.png 验证成功时的图标
  6. loading.gif 正在验证图标
  7. readme.txt 使用说明
  8. ajax.json ajax 验证示例
返回顶部
 

使用方法


载入插件

载入 jQuery 库文件,jQuery 库文件请到 http://www.jquery.com 下载,例:

<script src="jquery.min.js" type="text/javascript"></script>

载入 baigoValidator 样式表,例:

<link href="baigoValidator.css" type="text/css" rel="stylesheet">

载入 baigoValidator 核心文件,例:

<script src="baigoValidator.min.js" type="text/javascript"></script>

定义需要验证的表单 data-validate 属性,其值为一级对象名,如 data-validate 属性为空,则一级对象名为该表单的 id,当 validator.type 为 checkbox 和 radio 时,该属性不能为空值,此处需与 配置参数 中的定义一致,例:

<input type="text" data-validate="name">

<input type="checkbox" data-validate="test">

特别提示:v2.0 之前,由 class 定义该表单是否需要验证,且必须定义 id 或 group 属性,v2.0 之后将这些属性全部合并至 data-validate 属性。

 

配置参数

类型为 JSON,名称可以自定义,具体请参考 配置说明,例:

<script type="text/javascript">
var opts_validate = {
    name: { //一级对象名
        len: { min: 1, max: 100 },
        validate: { type: "str", format: "text", group: "#group_prj_status" },
        msg: { selector: "#msg_prj_status", too_short: "太短", too_long: "太长" }
    },
    no: {
        len: { min: 4, max: 4 },
        validate: { type: "str", format: "int" },
        msg: { selector: "#msg_prj_status", too_short: "太短", too_long: "太长" }
    },
    email: {
        len: { min: 1, max: 0 },
        validate: { type: "str", format: "email" },
        msg: { selector: "#msg_prj_status", too_short: "太短" }
    },
    digit: {
        len: { min: 1, max: 0 },
        validate: { type: "digit", format: "int" },
        msg: { selector: "#msg_prj_status", too_short: "太短" }
    },
    checkbox: {
        len: { min: 1, max: 0 },
        validate: { selector: "[data-validate='checkbox']", type: "checkbox" },
        msg: { selector: "#msg_prj_status", too_few: "太少" }
    },
    user_name: {
        len: { min: 1, max: 0 },
        validate: { type: "ajax" },
        msg: { selector: "#msg_prj_status", too_few: "太少" }
        ajax: { url: "http://www.baigo.net/ajax/", key: "user_name", type : "str" }
    }
}
</script>

 

初始化

初始化 baigoValidator,opts_validate 为配置参数,类型为 JSON,名称可以自定义,例:

<script type="text/javascript">
$(document).ready(function(){
  obj_form = $("#form_id").baigoValidator(opts_validate);
});
</script>

 

触发验证

触发 verify 方法,例:

<script type="text/javascript">
var obj_form = $("#cate_form").baigoValidator(opts_validate);
$("#cate_form").submit(function(){
  obj_form.verify(); //v2.0 起由 validateSubmit 改为 verify
});
</script>

v2.0 起由 validateSubmit 改为 verify

返回顶部
 

配置说明


opts_validate:配置参数,类型为 JSON,名称可以自定义

  • 配置的一级对象名需与 data-validate 属性对应
  • validate:验证类型
    • selector:表单选择器名
      v2.0 起新增,此对象的值必须为待验证的表单的选择器名称,建议使用 id,如未定义此对象,则默认将待验证的表单 id 作为选择器
    • type:类型,可选以下几种
      str(字符串)
      digit(数字)
      checkbox(复选框)
      radio(单选框)
      select(下拉框)
      confirm(确认)
      ajax(AJAX 验证)
    • format:格式
      • type 为 str 时,可选以下几种
        text(普通文字)
        email(Email 地址)
        date(日期 2012-11-12)
        time(时间 17:32:12)
        datetime(日期时间 2012-11-12 17:32:12)
        int(整数)
        digit(数字(可带小数点)
        url(网址)
        alphabetDigit(字母和数字)
        strDigit(字母中文数字下划线)
        ip(IP 地址)
      • type 为 digit 时:,可选以下几种
        int:整数
        digit:数字(可带小数点)
      • type 为 checkbox radio 和 select 时可忽略
    • group:表单组选择器,建议使用 id
      v2.0 起由 id 改为选择器,此参数主要为配合 Bootstrap 的验证样式,如使用此参数,页面中必须使用 Bootstrap,详细请参考 Bootstrap 中文网站关于表单验证样式的信息 http://v3.bootcss.com/css/#forms-control-validation
    • target:目标选择器,建议使用 id。当 type 为 confirm 时,必须指定本对象,以便验证两个表单值是否一样。
  • len:规定长度或大小,0 为无限制,v2.0 起由 length 改为 len,防止与 js 内置的对象名冲突。
    • type 为 str 时:
      • min:最短
      • max:最长
    • type 为 checkbox radio 和 select 时:
      • min:最少
      • max:最多
    • type 为 digit 时:
      • min:最小
      • max:最大
  • msg:提示信息
    • selector:显示信息的选择器名,建议使用 id,v2.0 起由 id 改为选择器
    • too_short:太短
    • too_long:太长
    • too_few:太少
    • too_many:太多
    • too_small:太小
    • too_big:太大
    • format_err:格式错误
    • ajax_err:ajax 地址出错
    • ajaxIng:AJAX 正在查询
    • ok:验证通过
  • ajax:AJAX 验证
    • url:AJAX 请求地址
    • key:查询关键词,既传给 AJAX 程序的内容,其值为表单值
    • type:类型,可选以下几种
      str(字符串)
      digit(数字)
    • attach:附加查询串
    • attach_selector:附加表单选择器(多个)
    • attach_keys:附加查询关键词(多个),暨传给 AJAX 程序的内容,其值为 attach_selectors 表单值。attach_selectors 和 attach_keys 插件会将两个参数转换为 attach_keys[0]=attach_selectors[0] 表单值&attach_keys[1]=attach_selectors[1] 表单值 的形式附加至 AJAX 查询串。

AJAX 返回内容必须为 JSON,例:

  • { "re": "ok" } 成功
  • { "re": "验证失败" } 具体提示信息
返回顶部
 

演示 Demo


演示代码

<form name="article_form" id="article_form">
    <div class="form-group">
        <label class="control-label">所属栏目<span id="msg_cate_ids">*</span></label>

        <div>
            <div class="checkbox">
                <label for="cate_ids_1">
                    <input type="checkbox" value="1" name="cate_ids[]" id="cate_ids_1" data-validate="cate_ids">
                    baigo CMS
                </label>
            </div>

            <div class="checkbox">
                <label for="cate_ids_2">
                    <input type="checkbox" value="2" name="cate_ids[]" id="cate_ids_2" data-validate="cate_ids">
                    jQuery 插件
                </label>
            </div>

            <div class="checkbox">
                <label for="cate_ids_3">
                    <input type="checkbox" value="3" name="cate_ids[]" id="cate_ids_3" data-validate="cate_ids">
                    服务
                </label>
            </div>

            <div class="checkbox">
                <label for="cate_ids_4">
                    <input type="checkbox" value="4" name="cate_ids[]" id="cate_ids_4" data-validate="cate_ids">
                    技术支持
                </label>
            </div>

            <div class="checkbox">
                <label for="cate_ids_5">
                    <input type="checkbox" value="5" name="cate_ids[]" id="cate_ids_5" data-validate="cate_ids">
                    关于 baigo
                </label>
            </div>

        </div>
    </div>

    <div class="form-group">
        <label class="control-label">状态<span id="msg_article_status">*</span></label>
        <div>
            <label for="article_status_pub" class="radio-inline">
                <input type="radio" name="article_status" id="article_status_pub" checked value="pub" data-validate="article_status">
                发布
            </label>

            <label for="article_status_wait" class="radio-inline">
                <input type="radio" name="article_status" id="article_status_wait" value="wait" data-validate="article_status">
                待审
            </label>

            <label for="article_status_hide" class="radio-inline">
                <input type="radio" name="article_status" id="article_status_hide" value="hide" data-validate="article_status">
                隐藏
            </label>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label">标记<span id="msg_article_mark">*</span></label>
        <select id="article_mark" name="article_mark" data-validate class="form-control">
            <option value="">请选择</option>
            <option value="mark_1">标记一</option>
            <option value="mark_2">标记二</option>
            <option value="mark_3">标记三</option>
        </select>
    </div>

    <div class="form-group">
        <div id="group_article_title">
            <label class="control-label">标题<span id="msg_article_title">*</span></label>
            <input type="text" name="article_title" id="article_title" data-validate class="form-control">
        </div>
    </div>

    <div class="form-group">
        <label class="control-label">副标题<span id="msg_article_ass">*</span></label>
        <input type="text" name="article_ass" id="article_ass" data-validate class="form-control">
    </div>

    <div class="form-group">
        <label class="control-label">内容<span id="msg_article_content"></span></label>
        <textarea name="article_content" id="article_content" rows="5" cols="50" data-validate class="form-control"></textarea>
    </div>

    <div class="form-group">
        <label class="control-label">跳转至(必须以 http:// 开始)<span id="msg_article_link"></span></label>
        <input type="text" name="article_link" id="article_link" data-validate class="form-control">
    </div>

    <div class="form-group">
        <button type="button" id="go_submit" class="btn btn-primary">提交</button>
    </div>
</form>

<script type="text/javascript">
var opts_validate = {
    cate_ids: {
        len: { min: 1, max: 0 },
        validate: { selector: "[data-validate='cate_ids']", type: "checkbox" },
        msg: { selector: "#msg_cate_ids", too_few: "请选择所属栏目" }
    },
    article_status: {
        len: { min: 1, max: 0 },
        validate: { selector: "[name='article_status']", type: "radio" },
        msg: { selector: "#msg_article_status", too_few: "请选择状态" }
    },
    article_mark: {
        len: { min: 1, max: 0 },
        validate: { type: "select" },
        msg: { selector: "#msg_article_mark", too_few: "请选择标记"}
    },
    article_title: {
        len: { min: 1, max: 300 },
        validate: { type: "str", format: "text", group: "#group_article_title" },
        msg: { selector: "#msg_article_title", too_short: "请输入文章标题", too_long: "文章标题不能超过 100 中文,300 英文" },
    },
    article_ass: {
        len: { min: 1, max: 300 },
        validate: { type: "ajax", format: "text" },
        msg: { selector: "#msg_article_ass", too_short: "请输入副标题", too_long: "副标题不能超过 100 中文,300 英文" },
        ajax: { url: "./lib/baigoValidator/ajax.json", key: "article_ass", type: "str" }
    },
    article_link: {
        len: { min: 0, max: 900 },
        validate: { type: "str", format: "url" },
        msg: { selector: "#msg_article_link", too_long: "链接不能超过 900 字符", format_err: "链接格式错误" }
    },
    article_content: {
        len: { min: 0, max: 900 },
        validate: { type: "str", format: "text" },
        msg: { selector: "#msg_article_content", too_long: "内容不能超过 300 中文,900 英文" }
    },
};

$(document).ready(function(){
    var obj_validate = $("#article_form").baigoValidator(opts_validate);
    $("#go_submit").click(function(){
        obj_validate.verify();
    });
});
</script>
返回顶部
 

下载


Github

https://github.com/baigoStudio/baigoValidator

baigoValidator v2.0 [ 2016-02-29 ]

baigoValidator v1.0.1 [ 2015-08-16 ]

baigoValidator v1.0 [ 2015-03-25 ]

baigoValidator v0.1.0 [ 2015-03-19 ]

baigoValidator v0.0.9 [ 2014-05-15 ]

  • «
  • 1
  • »


 

资助我们


baigo Studio 是一个纯公益组织,几乎没有资金来源,同时我们还必须承担一些费用,比如服务器租用等。旗下的软件均为开源项目,为了能让我们的项目能够继续发展,我们需要用户的帮助。