Bootstrapvalidator 用户后端实时检查
https://www.bootcdn.cn/jquery.bootstrapvalidator/0.5.3/
表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册</title>
<link rel="stylesheet" type="text/css" href="./css/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="./css/bootstrapvalidator-0.5.3/css/bootstrapValidator.min.css">
<script type="text/javascript" src="./js/jQuery_v3.5.1.js"></script>
<script type="text/javascript" src="./css/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./css/bootstrapvalidator-0.5.3/js/bootstrapValidator.min.js"></script>
</head>
<body>
<div class="caption margin">
<h3 class="text-center">用户注册</h3>
<form action="" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-md-3 control-label">用户名</label>
<div class="col-md-6">
<input type="text" class="form-control" name="username" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Email</label>
<div class="col-md-6">
<input type="text" class="form-control" name="email" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">密码</label>
<div class="col-md-6">
<input type="text" class="form-control" name="pwd" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">确认密码</label>
<div class="col-md-6">
<input type="text" class="form-control" name="pwd1" />
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-3">
<button id="btn" type="submit" class="btn btn-primary btn-block active">提交</button>
</div>
</div>
</form>
</div>
</body>
</html>
<script type="text/javascript">
$(function() {
$('form').bootstrapValidator({
//默认提示
message: 'This value is not valid',
// 表单框里右侧的icon
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
submitHandler: function(validator, form, submitButton) {
// 表单提交成功时会调用此方法
// validator: 表单验证实例对象
// form jq对象 指定表单对象
// submitButton jq对象 指定提交按钮的对象
},
fields: {
username: {
message: '用户名验证失败',
validators: {
notEmpty: { //不能为空
message: '用户名不能为空'
},
remote: { //后台验证，比如查询用户名是否存在
type: 'POST',
url: 'user_check.php',
message: '此用户名已存在',
delay: 1000
// url: 'student/verifyUsername',
// message: '此用户名已存在'
}
}
},
email: {
message: 'Email验证失败',
validators: {
notEmpty: {
message: 'Email不能为空'
},
emailAddress: { //验证email地址
message: '不是正确的email地址'
},
remote: {
type: 'POST',
url: 'user_check.php',
message: 'The email is not available',
delay: 2000
}
}
},
pwd: {
message: '密码验证失败',
validators: {
notEmpty: {
message: '密码不能为空'
},
stringLength: { //检测长度
min: 6,
message: '密码小于6个字符'
},
}
},
pwd1: {
message: '密码验证失败',
validators: {
notEmpty: {
message: '密码不能为空'
},
stringLength: { //检测长度
min: 6,
message: '密码小于6个字符'
},
identical: { //与指定控件内容比较是否相同，比如两次密码不一致
field: 'pwd', //指定控件name
message: '两次密码不一致'
}
}
}
}
});
$("#btn").click(function() {
//非submit按钮点击后进行验证，如果是submit则无需此句直接验证
$("form").bootstrapValidator('validate'); //提交验证
if ($("form").data('bootstrapValidator').isValid()) {
//获取验证结果，如果成功，执行下面代码
alert("yes"); //验证成功后的操作，如ajax
}
});
})
</script>
后端PHP
<?php
//user_check.php
include "conn.php";
header('Content-type: application/json');
$valid = true;//用户名可用
// 查询用户是否存在
if(isset($_POST['username'])){
$sql = "SELECT * FROM crm_users WHERE username='{$_POST['username']}'";
//查到数据返回false，bool取反；
$valid = !(bool) $db->read_one($sql);
// var_dump($valid);
// $valid = false;
}
if(isset($_POST['email'])){
$sql = "SELECT * FROM crm_users WHERE email='{$_POST['email']}'";
$valid = !(bool) $db->read_one($sql);
}
echo json_encode(
array(
'valid' => $valid,
)
);
?>
万水千山总是情，给个打赏行不行。
打赏
