添加4位随机数验证码验证功能
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>{$webname} - 注册</title>
<link rel="stylesheet" href="/static/assets/css/font.css">
<link rel="stylesheet" id="css-main" href="/static/assets/css/oneui.min.css">
<link rel="stylesheet" href="/static/assets/css/themes/city.min.css">
<pre><code> <style>
</code></pre>
<p>td,th{
white-space: nowrap;
}
</style>
</head></p>
<body class="bg-image" style="background-image: url('/static/assets/images/bj.png');">
<div id="page-container">
<pre><code> <main id="main-container">
<!-- Page Content -->
<div class="hero-static">
<div class="content">
<div class="row justify-content-center">
<div class="col-md-8 col-lg-6 col-xl-4">
<!-- Sign Up Block -->
<div class="block block-themed block-fx-shadow mb-0">
<div class="block-header bg-success">
<h3 class="block-title">用户注册</h3>
<div class="block-options">
<a class="btn-block-option" href="/login" data-toggle="tooltip" data-placement="left" title="用户登录">
<i class="fa fa-sign-in-alt"></i>
</code></pre>
<p>用户登录
</a>
</div>
</div>
<div class="block-content">
<div class="p-sm-3 px-lg-4 py-lg-5">
<h1 class="mb-2">{$webname} - 注册</h1>
<p>欢迎您的加入！</p>
<form>
<div class="py-3"></p>
<pre><code> <div class="form-group">
<input type="text" name="userName" class="form-control form-control-lg form-control-alt font-size-sm" placeholder="请输入昵称">
</div>
<div class="form-group">
<input type="text" name="userUser" class="form-control form-control-lg form-control-alt font-size-sm" placeholder="请输入账号">
</div>
<div class="form-group">
<input type="password" name="userPwd" class="form-control form-control-lg form-control-alt font-size-sm" placeholder="请输入密码">
</div>
<div class="form-group">
<input type="text" name="userQq" class="form-control form-control-lg form-control-alt font-size-sm" placeholder="请输入QQ">
</code></pre>
</div>
<div class="form-group">
<input type="email" name="userMail" class="form-control form-control-lg form-control-alt font-size-sm" placeholder="请输入邮箱">
</div>
<div class="form-group">
<label>验证码：</label>
<input type="text" name="verifyCode" class="form-control form-control-lg form-control-alt font-size-sm" placeholder="请输入验证码">
<img src="/verify" alt="验证码" onclick="this.src='/verify?'+Math.random();">
</div>
</div>
<div class="form-group row">
<div class="col-md-12 col-xl-12">
<button type="submit" class="btn btn-block btn-success">
<i class="fa fa-fw fa-plus mr-1"></i> 注册
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content content-full font-size-sm text-muted text-center">
<strong> <a class="font-w600" href="/" target="_blank">{$webname}</a></strong> © <span data-toggle="year-copy">2023</span>
</div>
</div>
</main>
</div>
<script src="/static/assets/js/oneui.core.min.js"></script>
<script src="/static/assets/js/oneui.app.min.js"></script>
<script src="/static/assets/js/plugins/bootstrap-notify/bootstrap-notify.min.js"></script>
</body>
</html>
<script>
$("form").submit(function (){
var login = $("button[type='submit']");
var userName = $("input[name='userName']").val();
var userUser = $("input[name='userUser']").val();
var userPwd = $("input[name='userPwd']").val();
var userMail = $("input[name='userMail']").val();
var userQq = $("input[name='userQq']").val();
var verifyCode = $("input[name='verifyCode']").val();
<pre><code> if(userName.length < 1 || userUser.length < 1 || userPwd.length < 1 || userMail.length < 1 || userQq.length < 1 || verifyCode.length < 1){
One.helpers('notify', {type: 'danger', message: '请确保必填项不为空', delay:2000});
return false;
}
login.attr('disabled', 'true');
One.helpers('notify', {type: 'warning', message: '正在注册，请稍后...', delay:2000});
$.ajax({
type:'POST',
url:'',
data:{
name:userName,
user:userUser,
password:userPwd,
mail:userMail,
qq:userQq,
verifyCode:verifyCode,
},
dataType:'json',
success:function (data){
if(data.code == 1){
setTimeout(function (){
location.href = '/login'
},1000);
One.helpers('notify', {type: 'success', message: data.msg, delay:2000});
}else{
login.removeAttr('disabled');
One.helpers('notify', {type: 'danger', message: data.msg, delay:2000});
}
}
});
return false;
});
</code></pre>
</script>
<p>在表单中添加了一个验证码输入框和一个验证码图片，点击图片可以刷新验证码。在提交表单时，会一起提交验证码，后端接口需要对验证码进行验证。</p>
原文地址: https://www.cveoy.top/t/topic/oPGp 著作权归作者所有。请勿转载和采集!