码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrapValidator表单验证插件

时间:2018-01-17 00:18:04      阅读:262      评论:0      收藏:0      [点我收藏+]

标签:hicon   插件   inf   需要   使用   val   mda   直接   doctype   

bootstrapValidator——一个很好用的表单验证插件,再也不用手写验证规则啦!

bootstrapValidator官方文档: http://bootstrapvalidator.votintsev.ru/api/

 

一、举个丽子:

写了一个小例子

技术分享图片

 

先来看一下效果吧!

  

二、具体实现步骤如下:

1、下载jquery、bootstrap、bootstrapValidator

bootstrapValidator下载地址: https://github.com/nghuuphuoc/bootstrapvalidator/commit/c023475236f66baab72975887a26e51d65df72f7

在这里下载后,解压bootstrapValidator-master,里面会有jquery、bootstrap、bootstrapValidator。其中bootstrap和jquery在vendor文件夹中,bootstrapValidator在src文件夹中。直接复制过来用就可以了,不用单独一个一个下载。在demo文件夹中有很多例子,可以直接拿过来用。

注意:如果bootstrap或jquery是单独下载的,可能会因为版本不一致,导致验证时,不会实时更新状态,最好使用下载后bootstrapValidator-master中的jquery和bootstrap。

 

2、将jquery、bootstrap、bootstrapValidator引入到文件中(注意引入的顺序)

技术分享图片

 

3、 编写html、css、js

 

三、下面来介绍我自己写的小例子

写了一个注册表单,其中:

1、用户名必须输入汉字;

2、密码和确认输入的必须一致,长度为6-16位;

3、手机号必须为数字,且是正确的手机号。不满足以上条件会有相应的提示。

 

四、代码实现:

1、html 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>bootstrapValidatorDemo</title>

    <link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrapValidator/bootstrapValidator.min.css">
    <script type="text/javascript" src="js/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/bootstrapValidator/bootstrapValidator.min.js"></script>
    
</head>
<body>
    <div class="container">
        <div class="row">
            <h2 class="title">用户注册</h2>
        </div>        
        <form id="infoForm" class="form-horizontal bv-form" enctype="multipart/form-data">
            <div class="row form-group">
                <label>用户名:</label>
                <input type="text" class="form-control" name="username" placeholder="请输入用户名"></input>
            </div>
            <div class="row form-group">
                <label>密码:</label>
                <input type="password" class="form-control" name="password" placeholder="请输入密码"></input>
            </div>
            <div class="row form-group">
                <label>确认密码:</label>
                <input type="password" class="form-control" name="confirmPassword" placeholder="请确认密码"></input>
            </div>
            <div class="row form-group">
                <label>手机号:</label>
                <input type="text" class="form-control" name="tel" placeholder="请输入手机号"></input>
            </div>
            <div class="row form-group" style="display: flex; justify-content: space-around;">
                <button type="submit" class="btn btn-info" id="submit">提 交</button>
                <button class="btn btn-default" id="reset">重 置</button>
            </div>
        </form>        
    </div>
</body>
</html>

 

2、css 

<style type="text/css">
    .container {
        margin-top: 30px;
        width: 500px;
    }
    .title {
        font-weight: 700;
        text-align: center;
        margin-bottom: 30px;
    }
</style>

 

3、js 

<script type="text/javascript">
    $(#reset).click(function(e){
        e.preventDefault();//阻止默认事件
        $(#infoForm input).val(‘‘);
        $(#infoForm).data(bootstrapValidator).resetForm();
    });
    $(#infoForm).bootstrapValidator({
        message : 输入的值无效!,
        feedbackIcons : {
            valid : glyphicon glyphicon-ok,
            invalid: glyphicon glyphicon-remove,
            validating : glyphicon glyphicon-refresh
        },
        fields : {
            username : {
                validators : {
                    notEmpty : {
                        message : 用户名不能为空!
                    },
                    regexp : {
                        regexp : /[\u4E00-\u9FA5]/,
                        message : 请输入汉字!
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: 密码不能为空!
                    },
                    different: {
                        field: username,
                        message: 密码不能与用户名相同!
                    },
                    stringLength: {
                        min: 6,
                        max: 16,
                        message: 密码长度为6~16位!
                    }
                }
            },
            confirmPassword: {
                validators: {
                    notEmpty: {
                        message: 请确认密码!
                    },
                    identical: {
                        field: password,
                        message: 密码和确认密码不一致!
                    }
                }
            },
            tel : {
                validators : {
                    notEmpty : {
                        message : 手机号不能为空!
                    },
                    regexp : {
                        regexp : /^1[34578]\d{9}$/,
                        message : 请输入正确的手机号!
                    },
                    stringLength: {
                        min: 11,
                        max: 11,
                        message: 请输入11位手机号码!
                    }
                }
            }
        }
    }).on("success.form.bv", function(e) {
        e.preventDefault();//阻止默认事件
        alert(用户注册成功!);
    })
</script>

 

五、需要注意的地方:

1、jquery、bootstrap、bootstrapValidator最好使用下载的bootstrapValidator-mastar中的文件,否则可能会导致验证状态不会实时更新

2、表单中需要验证的元素都必须包裹在有类名form-group的父盒子中,否则验证不起作用

3、验证的图标

技术分享图片

这部分是验证时的图标,也可以不加这部分,如果加了,需要将bootstrapValidator-master --> vendor --> fonts文件夹复制到自己的文件目录中,与bootstrap.css的父级同级

技术分享图片

这样图标就会显示出来了。

 

如果对您有帮助,记得点赞哦!需要您的支持与鼓励,同时也欢迎您留下宝贵意见!

 

bootstrapValidator表单验证插件

标签:hicon   插件   inf   需要   使用   val   mda   直接   doctype   

原文地址:https://www.cnblogs.com/-lizi/p/8297914.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!