bootstrap validator 使用笔记

原创 2016年02月16日 09:29:37


       最近做的项目,前台使用的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方法即可。

总结


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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

BootstrapValidator超详细教程

废话不多说,直接开始~一、引入必要文件下载地址:(https://github.com/nghuuphuoc/bootstrapvalidator/archive/v0.4.5.zip)

bootstrapValidator.js,最好用的bootstrap表单验证插件

本篇推荐一款twitter做的bootstrapValidator.js(最好用的bootstrap表单验证插件,没有之一),本身bootstrap就是twitter做的,那么使用原配的validat...

BootstrapValidator 的使用

bootstrap 组件学习之bootstrap validator 1.项目目录 1. 源码和api地址 bootstrapvalidator源码:https://github.c...
  • zh4000
  • zh4000
  • 2016-11-18 22:08
  • 2063

bootstrap validator 使用笔记

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

bootstrapvalidator使用时需要注意的事项

如果你使用的前端框架是bootstrap,那么前端验证框架就bubi [bubi]

bootstrapvalidator之API学习

最近项目用到了bootstrap框架,其中前端用的校验,采用的是bootstrapvalidator插件,也是非常强大的一款插件。我这里用的是0.5.2版本。 下面记录一下使用中学习到的相关API,不...

bootstrapValidator不触发校验

一、前言 BootstrapValidator是基于bootstrap3的jquery表单验证插件,是最适合bootstrap框架的表单验证插件,在工作中用到此框架就写下自己在使用中积累的一些心得 ...

bootstrapvalidator校验验第三方插件

遇到问题:bootstrapvalidator在验证第三方插件WdatePicker时,不能实时校验。 预期目的:bootstrapvalidator做到实时校验。 1、选择完日期,不做校验,...

bootstrapvalidator 校验

callback 函数可以写自己的方法校验 issueInvoiceForm.validation = function(){ $('#issueInvoiceForm').on('init.fie...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)