来源:头歌教学平台
编程要求
在右侧编辑器Begin
至End
之间填充代码,实现对密码的验证。要求如下:
-
在密码为空的情况下,提示信息如下:
密码不能为空
; -
限制密码的长度为
6-16
位,在长度不满足的情况下,提示如下信息:密码必须在6-16位之间
; -
密码正则表达式为
/^[\w_-]{6,16}$/
,不满足正则表达式时的提示信息为:密码只能包含字母、数字、减号(-)和下划线
;
注:本关提示信息统一用单引号:''。
相关知识
为了完成本关任务,你需要掌握:
1.Bootstrap-validator
的引用,
2.基本的页面结构,
3.Js
的初始化。
答案参考:
<!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>
本关重点:
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())
获取验证结果,如果成功,执行下面的语句。