bootstrap validator 使用笔记

       最近做的项目，前台使用的bootstrap框架。对于前台框架来说，验证是必不可少的。对于常用的一些校验规则，如果有一个例子会更好的。虽然有提供validator的API，但是感觉不太好用。所以记录一下常用的几种校验方式。

准备工作

下载：相关的js和css文件

使用前提，必须是bootstrap框架。然后引入到项目中。

校验类型

客户端前台自校验

       这种校验方式，validator已经封装的很好了。只是在写前台界面的时候要用以下这种结构：

<div class="form-group">
    <label class="col-lg-3 control-label">Full name</label>
    <div class="col-lg-4">
        <input type="text" class="form-control" name="firstName"
            placeholder="First name" required
            data-bv-notempty-message="firstName不能为空(提示语)" 
            />
    </div>
</div>

       上面的这种结构只需要写相应的校验方式，对data-bv……进行替换 或添加属性即可。

校验常用方式

非空校验

data-bv-notempty-message="XXX不能为空"

长度限制校验

data-bv-stringlength="true" data-bv-stringlength-min="6" data-bv-stringlength-max="30" data-bv-stringlength-message="这个字段长度不得小于6，不得超过30 "

邮箱校验

type="email" data-bv-emailaddress-message="The input is not a valid email address"

日期格式校验

data-bv-date="false" data-bv-date-format="YYYY/MM/DD" data-bv-date-message="The birthday is not valid"

前后台交互校验

       对于前后太交互校验，最常用的是在ajax的回调函数中进行校验。以下是一个例子，可以当作模版使用。

$('#defaultForm').bootstrapValidator({
    message: 'This value is not valid',
    feedbackIcons: {        //提示图标
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        firstName: {
            validators: {
                notEmpty: {        // 非空校验+提示信息
                    message: 'The first name is required and cannot be empty'
                }
            }
        },
        lastName: {
            validators: {
                notEmpty: {
                    message: 'The last name is required and cannot be empty'
                }
            }
        },
        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'
                }
            }
        },
        password: {
            validators: {
                notEmpty: {
                    message: 'The password is required and cannot be empty'
                },
                identical: {
                    field: 'confirmPassword',
                    message: 'The password and its confirm are not the same'
                },
                different: {
                    field: 'username',
                    message: 'The password cannot be the same as username'
                }
            }
        },
        captcha: {
            validators: {
                callback: {     //提交到后台进行校验
                    message: 'Wrong answer',        //提示信息
                    callback: function(value, validator) {
                        //用ajax提交到后台，进行校验。如果校验失败  return false; 校验成功 return true;
                        var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
                        return value == sum;
                    }
                }
            }
        }
    }
});

       这种校验方式写法容易理解，只需要在field 下面 写上需要校验的字段并指明校验方式即可。
       对于有前后台交互的，只需要写上callback方法即可完成校验。

表单提交前校验

这种方式，是对上面一种写法的补充，例子如下：

$('#defaultForm').bootstrapValidator({
    message: 'This value is not valid',
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        ……
        ……
    }
})
.on('success.form.bv', function(e) {
    // Prevent form submission
    e.preventDefault();

    // Get the form instance
    var $form = $(e.target);

    // Get the BootstrapValidator instance
    var bv = $form.data('bootstrapValidator');

    // Use Ajax to submit form data
    $.post($form.attr('action'), $form.serialize(), function(result) {
        console.log(result);
    }, 'json');
});

       对于表单提交前验证，这种方式，主要是对上述校验的第二种保护，只需要添加on方法即可。

总结

       对于成熟的框架来说，都会有很方便的写法，这样才会发挥出框架的作用。我们要做的就是学会使用，快速的开发。