BootstrapValidator 验证表单

在线实例

实例演示

使用方法

<form id="defaultForm" method="post" class="form-horizontal" action="target.php"> 
    <div class="form-group"> 
        <label class="col-lg-3 control-label">用户名</label> 
        <div class="col-lg-5"> 
            <input type="text" class="form-control" name="username" /> 
        </div> 
    </div> 
 
    <div class="form-group"> 
        <label class="col-lg-3 control-label">邮箱</label> 
        <div class="col-lg-5"> 
            <input type="text" class="form-control" name="email" /> 
        </div> 
    </div> 
 
    <div class="form-group"> 
        <label class="col-lg-3 control-label">生日</label> 
        <div class="col-lg-5"> 
            <input type="text" class="form-control" name="birthday" /> (YYYY/MM/DD) 
        </div> 
    </div> 
 
    <div class="form-group"> 
        <div class="col-lg-9 col-lg-offset-3"> 
            <button type="submit" class="btn btn-primary" name="signup" value="Sign up">提交</button> 
            <button type="button" class="btn btn-info" id="validateBtn">自动验证</button> 
            <button type="button" class="btn btn-info" id="resetBtn">重置表单</button> 
        </div> 
    </div> 
</form>

$('#defaultForm').bootstrapValidator({ 
    message: 'This value is not valid', 
    feedbackIcons: { 
        valid: 'glyphicon glyphicon-ok', 
        invalid: 'glyphicon glyphicon-remove', 
        validating: 'glyphicon glyphicon-refresh' 
    }, 
    fields: { 
        username: { 
            message: 'The username is not valid', 
            validators: { 
                notEmpty: { 
                    message: 'The username is required and cannot be empty' 
                }, 
                stringLength: { 
                    min: 6, 
                    max: 30, 
                    message: 'The username must be more than 6 and less than 30 characters long' 
                }, 
                regexp: { 
                    regexp: /^[a-zA-Z0-9_\.]+$/, 
                    message: 'The username can only consist of alphabetical, number, dot and underscore' 
                }, 
                remote: { 
                    url: 'remote.php', 
                    message: 'The username is not available' 
                }, 
                different: { 
                    field: 'password', 
                    message: 'The username and password cannot be the same as each other' 
                } 
            } 
        }, 
        email: { 
            validators: { 
                emailAddress: { 
                    message: 'The input is not a valid email address' 
                } 
            } 
        }, 
    } 
});

参数详解

云盘内容

注意：示例只是当前的内容，【下载】的是全部jQuery插件一起打包后的文件。