如何利用Bootstrap-validator实现表单验证

最新推荐文章于 2022-11-04 17:06:23 发布

Andone_hsx

最新推荐文章于 2022-11-04 17:06:23 发布

阅读量1.5k

点赞数 1

分类专栏： JavaScript基础文章标签： Bootstrap-validator Bootstrap jQuery 表单验证

本文链接：https://blog.csdn.net/Andone_hsx/article/details/85047337

版权

JavaScript基础专栏收录该内容

19 篇文章 7 订阅

订阅专栏

任务描述

本关任务：用Bootstrap-validator来验证表单。
效果图如下：

相关知识

为了完成本关任务，你需要掌握：

1.Bootstrap-validator的引用，

2.基本的页面结构，

3.Js的初始化。

Bootstrap-validator的引用

Bootstrap-validator是依赖 Bootstrap 和 jQuery 的，所以要保证有这样的环境。

Bootstrap-validator的使用需要引入bootstrapValidator.css和bootstrapValidator.js，代码如下：

<link href="https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.css" rel="stylesheet">

<script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>

这里提供一个CDN下载地址：Boottrap-validator

基本的页面结构

<form>
<div class="form-group">
<input type="text" class="form-control" name="username" placeholder="昵称">
</div>
<button type="submit" name="submit" id="submit" class="btn btn-primary btn-block">立即注册</button>
</form>

注意：表单里面的元素都有name属性，它的值和下面初始化的js 中的值相对应。

Js的初始化

Js初始化代码如下：

$(function () {
$('form').bootstrapValidator({
　　　　　　　 message: 'This value is not valid',
　feedbackIcons: {
　　　　　　　　valid: 'glyphicon glyphicon-ok',
　　　　　　　　invalid: 'glyphicon glyphicon-remove',
　　　　　　　　validating: 'glyphicon glyphicon-refresh'
　　　　　　　　 },
fields: {
username: {
message: '用户名验证失败',
validators: {
notEmpty: {
message: '用户名不能为空'
},
stringLength: {
min: 6,
max: 18,
message: '用户名长度必须在6到18位之间'
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: '用户名只能包含大写、小写、数字和下划线'
}
}
}
}
$("#submit").on("click", function(){
$("form").bootstrapValidator('validate');
if($("form").data('bootstrapValidator').isValid()){
alert("注册成功");
}
});
});

效果图如下：

说明（从上依次往下）：

message: 为每个字段指定的错误提示语。这里只有一个字段 username；
feedbackIcons：根据验证结果显示的各种图标。在input标签的右边；
fields：表单域配置；
- username：表示配置name="username"的input标签；
  - message：错误提示信息；
  - validators：定义每个验证规则；
    - notEmpty：检测内容非空；
      - message：内容为空时的提示信息；
    - stringLenght：检测长度；
      - min：最小长度；
      - max：最大长度；
      - message：长度不在这个范围时的提示信息；
    - regexp：可定义正则表达式；
      - regexp：正则表达式；
      - message：不符合正则表达式时的提示信息；

这里用的是手动验证表单。用到的方法如下：

获取validator对象：$('form').bootstrapValidator(methodName, parameters);
需要传入方法名和参数名，可以链式调用。
获取validator实例：var bootstrapValidator = $('form').data('bootstrapValidator');
bootstrapValidator.methodName(parameters)
可以直接调用方法。
validate()：手动对表单进行校验，可用在需要点击按钮或者链接的时候。
isValid()返回当前需要验证的所有字段是否都合法，调用此方法前需先调用validate()来进行验证。

这样提交表单就一目了然了。

$("form").bootstrapValidator('validate'); 表示提交验证；
if($("form").data('bootstrapValidator').isValid())获取验证结果，如果成功，执行下面的语句。

编程要求

根据提示，在右侧编辑器Begin至End之间填充代码，实现对密码的验证。要求如下：

在密码为空的情况下，提示信息如下：密码不能为空；
限制密码的长度为 6-16位，在长度不满足的情况下，提示如下信息：密码必须在6-16位之间；
密码正则表达式为/^[\w_-]{6,16}$/，不满足正则表达式时的提示信息为：密码只能包含字母、数字、减号（-）和下划线；

注：本关提示信息统一用单引号：’’。

效果图如下：

<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>登陆注册</title>
		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css">
		<link href="https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.css" rel="stylesheet">
		
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
		<script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>
		<style>
    	.login{
    		width: 100%;
    		background: #fff;
		    padding: 10px 20px 20px 20px;
		    border: 1px solid #000;
		    margin-top: 40px;	
    	}
        </style>
	</head>

	<body>
		<div class="container">
				<div class="col-lg-4 col-md-4 col-ld-offset-4 col-md-offset-4">
					<div class="login">
						<h4>Educoder</h4>
						<p>一个帮助你提升自我的网站</p>
						<form>
							<div class="form-group">
								<input type="text" class="form-control" name="username" placeholder="昵称">
							</div>
							<div class="form-group">
								<input type="text" class="form-control" name="telephone" placeholder="手机">
							</div>
							<div class="form-group">
								<input type="password" class="form-control" name="password" placeholder="密码">
							</div>
							
							<button type="submit" name="submit" id="submit" class="btn btn-primary btn-block">立即注册</button>
						</form>
					</div>
			</div>
			
</div>
	</body>

    <script>
    	
    	$(function () {
        $('form').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    message: '用户名验证失败',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 18,
                            message: '用户名长度必须在6到18位之间'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_]+$/,
                            message: '用户名只能包含大写、小写、数字和下划线'
                        }
                    }
                },
                telephone: {
                    validators: {
                        notEmpty: {
                        message: '手机号码不能为空'
                     },
                    stringLength: {
                        min: 11,
                        max: 11,
                        message: '请输入11位手机号码'
                     },
                    regexp: {
                        regexp: /^1[3|5|8]{1}[0-9]{9}$/,
                        message: '请输入正确的手机号码'
                     }
                 }
                },
                password: {
                	validators: {
                		//------------- Begin --------------
                         notEmpty: {
                         message: '密码不能为空'
                         },
                        stringLength: {
                        	min: 6,
                            max: 16,
                            message:'密码必须在6-16位之间'
                        }
                        regexp: {
                        	regexp: /^[\w_-]{6,16}$/,
                            message: '密码只能包含字母、数字、减号（-）和下划线'
                        }
                        
                        
                        //------------- End ----------------
                		
                	}
                }
            }
        });
        
        $("#submit").on("click", function(){
        	$("form").bootstrapValidator('validate');
        	if($("form").data('bootstrapValidator').isValid()){
        		alert("注册成功");
        	}
});
    });
    </script>
</html>

Andone_hsx

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何利用Bootstrap-validator实现表单验证

任务描述本关任务：用Bootstrap-validator来验证表单。效果图如下：相关知识为了完成本关任务，你需要掌握：1.Bootstrap-validator的引用，2.基本的页面结构，3.Js的初始化。Bootstrap-validator的引用Bootstrap-validator是依赖 Bootstrap 和 jQuery 的，所以要保证有这样的环境...
复制链接

扫一扫