ovsexia-captcha
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Jq版本</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="https://cdn.staticfile.org/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="dist/captcha.min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/captcha.css" />
</head>
<script>
//提交验证
function form_chk(divid)
{
  let username = $(divid).find('input[name="username"]').val();
  if(!username){
    alert('用户名不能为空');
    return false;
  }

  let captcha = $(divid).find('input[name="captcha"]').val();
  if(!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 aon" href="javascript:void(0)">Jq版本</a> &nbsp; <a class="a1" href="index.pure.html">原生js版本</a>
  <form 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>
$('.bform').captcha({
  clicks: 3,
  url: 'captcha.php',
  tip: '请依次点击图中的',
  callback: function(){
    alert('表单提交');
  },
});
</script>

</body>
</html>