JS组件系列——Form表单验证神器： BootstrapValidator

github:https://github.com/nghuuphuoc/bootstrapvalidator

参考博客：JS组件系列——Form表单验证神器： BootstrapValidator

表单HTML，如下：

　　　　　　　　　　<form role="form" id="roleForm">
                    <div class="box-body">
                        <div class="form-group">
                            <input type="text" class="form-control" id="inputRoleName"
                                name="roleName" placeholder="角色名称" />
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" id="inputRoleDescribe"
                                name="roleDescribe" placeholder="角色描述" />
                        </div>
                        <div class="form-group">
                            <select class="form-control select2" style="width: 100%;"
                                id="selectRoleType">
                            </select>
                        </div>
                        <div class="form-group">
                            <select class="form-control select2" style="width: 100%;"
                                id="selectUseFlag">
                                <option selected="selected" value='Y'>可用</option>
                                <option value='N'>不可用</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" id="inputDisplaySn"
                                name="displaySn" placeholder="显示序号" />
                        </div>
                    </div>
                </form>

js代码如下：

    function initForm(){
        $('#roleForm').bootstrapValidator({
            fields : {
                roleName : {
                    validators : {
                        notEmpty : {
                            message : '角色名称不能为空'
                        },
                        stringLength : {
                            min : 1,
                            max : 16,
                            message : '角色名称长度必须在1到16位之间'
                        },
                        regexp : {
                            regexp : /^[^&@#/"']*$/,
                            message : '角色名称不能包含&@#/\"\'等字符'
                        }
                    }
                },
                roleDescribe : {
                    validators : {
                        notEmpty : {
                            message : '角色描述不能为空'
                        },
                        stringLength : {
                            min : 1,
                            max : 64,
                            message : '角色描述长度必须在1到64位之间'
                        },
                        regexp : {
                            regexp : /^[^&@#/"']*$/,
                            message : '角色名称不能包含&@#/\"\'等字符'
                        }
                    }
                }
            }
        });
    }

保存前验证代码如下：

function save_click() {
        $('#roleForm').bootstrapValidator('validate');
        var valid = $('#roleForm').data('bootstrapValidator').isValid();
        if(!valid){return;}

来源：https://www.cnblogs.com/bmbh/p/6972396.html

标签

form

表单验证

bootstrapvalidator