zeus-validator

基于jquery和bootstrap的表单验证插件

安装

npm install zeus-validator --save

使用

//HTML
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="zeus-validator.js"></script>

<div id="demo" class="form-box">
    <div class="clearfix">
        <div class="sub-item">
            <label>姓名：</label>
            <div>
                <input name="name" type="text" class="form-control input-sm"/>
            </div>
        </div>
        <div class="sub-item">
            <label>性别：</label>
            <div>
                <label>
                    <input type="radio" name="sex" value="男"/>
                    <span>男</span>
                </label>
                <label>
                    <input type="radio" name="sex" value="女"/>
                    <span>女</span>
                </label>
            </div>
        </div>
    </div>
    <div class="clearfix">
        <div class="sub-item">
            <label>年龄：</label>
            <div>
                <input name="age" type="text" class="form-control input-sm"/>
            </div>
        </div>
        <div class="sub-item">
            <label>爱好：</label>
            <div>
                <label>
                    <input type="checkbox" name="love" value="篮球"/>
                    <span>篮球</span>
                </label>
                <label>
                    <input type="checkbox" name="love" value="足球"/>
                    <span>足球</span>
                </label>
                <label>
                    <input type="checkbox" name="love" value="羽毛球"/>
                    <span>羽毛球</span>
                </label>
                <label>
                    <input type="checkbox" name="love" value="乒乓球"/>
                    <span>乒乓球</span>
                </label>
                <label>
                    <input type="checkbox" name="love" value="排球"/>
                    <span>排球</span>
                </label>
            </div>
        </div>
    </div>
    <div class="clearfix">
        <div class="sub-item">
            <label>身份证号：</label>
            <div>
                <input name="card" type="text" class="form-control input-sm"/>
            </div>
        </div>
        <div class="sub-item">
            <label>籍贯：</label>
            <div>
                <select name="address" class="form-control input-sm">
                    <option value="">--请选择--</option>
                    <option value="福建">福建</option>
                    <option value="北京">北京</option>
                    <option value="广东">广东</option>
                </select>
            </div>
        </div>
    </div>
    <div class="clearfix">
        <div class="sub-item">
            <label>E-mail：</label>
            <div>
                <input name="email" type="text" class="form-control input-sm"/>
            </div>
        </div>
        <div class="sub-item">
            <label>电话：</label>
            <div>
                <input name="tel" type="text" class="form-control input-sm"/>
            </div>
        </div>
    </div>
    <div class="clearfix">
        <div class="sub-item">
            <label>密码：</label>
            <div>
                <input id="pwd" type="password" class="form-control input-sm"/>
            </div>
        </div>
        <div class="sub-item">
            <label>确认密码：</label>
            <div>
                <input id="repwd" type="password" class="form-control input-sm"/>
            </div>
        </div>
    </div>
    <div class="clearfix">
        <div class="sub-item">
            <label>备注：</label>
            <div>
                <textarea name="bz" class="form-control" style="width: 500px;"></textarea>
            </div>
        </div>
    </div>
    <div class="clearfix">
        <div class="sub-item">
            <label></label>
            <div>
                <button id="submit" type="button" class="btn btn-primary btn-sm">提交</button>
                <button type="button" class="btn btn-warning btn-sm">重置</button>
            </div>
        </div>
    </div>
</div>

//javascript
var options = {
        list: [
            {
                dom: $("[name=name]"),
                validate: {
                    maxLength: "5"
                }
            },
            {
                dom: $("[name=sex]")
            },
            {
                dom: $("[name=love]"),
                validate: {
                    minLength: 2,
                    maxLength: 4
                }
            },
            {
                dom: $("[name=email]"),
                requireType: "requiredIfHasValue",
                validate: {
                    type: "email"
                }
            },
            {
                dom: $("[name=age]"),
                validate: {
                    min: 1,
                    max: 100
                }
            },
            {
                dom: $("[name=card]"),
                validate:{
                    type: "card"
                }
            },
            {
                dom: $("[name=address]")
            },
            {
                dom: $("#pwd")
            },
            {
                dom: $("#repwd"),
                validate: {
                    customValidate: function($dom){
                        return {
                            validate: $dom.val() == $("#pwd").val(),
                            message: "密码不一致！"
                        };
                    }
                }
            },
            {
                dom: $("[name=bz]")
            }
        ],
        messageType: "after"
    };
    var validator = new Validator.default($("#demo"), options);

    $("#submit").click(function(){
        var validate = validator.submit();
        if(validate){
            alert("验证成功!页面跳转...");
        }else{
            alert("验证失败！请查看控制台报错信息！");
        }
    });
    

options配置说明

{
    list: [
        {
            id: domId，
            requireType: "required","requiredIfHasValue", function($curDom){}
            validate: {
                type: "email", "url", "zh", "number", function(){},
                minLength: 最小长度,
                maxLength: 最长长度,
                min: 最小值,
                max: 最大值,
                pattern: 正则表达式,
                customValidate: function(){},
                minLength_msg: "不能少于10个字"
            }
        }
    ],
    messageType: "after","tooltip","modal",
    inlineTarget: ‘消息显示的dom',
    dynamicCheck: true,失去焦点时是否实时验证
}

更新日志

• v1.0.0：实现基本表单域类型的验证；实现"after"类型的消息提示；其他类型下个版本实现；