代码拉取完成,页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<title>原生js版本</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="shortcut icon" href="#"/>
<link rel="stylesheet" type="text/css" href="dist/layout.css" />
<script type="text/javascript" src="dist/captcha.pure.min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/captcha.css" />
</head>
<script>
//提交验证
function form_chk(divid)
{
let username = divid.username.value;
if(!username || username == ''){
alert('用户名不能为空');
return false;
}
let captcha = divid.captcha.value;
if(!captcha || captcha == ''){
alert('验证码不能为空');
return false;
}
return true;
}
</script>
<style>
.form {width:600px; max-width:92%; margin:150px auto 0;}
.form div {padding-bottom:10px;}
.form input, .form button {width:100%; height:30px; box-sizing:border-box; border:1px solid #ccc;}
.bform {padding-top:15px;}
.a1 {font-size:15px;}
.aon {color:cornflowerblue;}
</style>
<body>
<div class="form">
<a class="a1" href="index.html">Jq版本</a> <a class="a1 aon" href="javascript:void(0)">原生js版本</a>
<form id="bform" class="bform" action="form.php" method="post" onsubmit="return form_chk(this);">
<div><input type="text" name="username" /></div>
<div><button class="captcha_submit" type="button">提交</button></div>
</form>
</div>
<script>
new Captcha({
el: '#bform',
clicks: 3,
url: 'captcha.php',
tip: '请依次点击图中的',
callback: function(){
alert('表单提交');
},
});
</script>
</body>
</html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。