引用的css和js下载
链接：https://pan.baidu.com/s/1OoFZHdjkGNY90dp_3Hv1dw 密码：5g3x
页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
<link href="jfp/framework/css/verify.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
</head>
<body>
<div class="total">
<div class="register-content register-content_j">
<div class="register-text" id="register-two">
<div class="text-tilie">登录系统</div>
<div class="text-reg text-reg_j">
<div>用户名<input id="loginName" type="text" placeholder="请输入用户名"></div>
<div>密 码<input id="password" type="password" placeholder="请输入密码"></div>
<div>验证码
<div class="con">
<div id="mpanel"></div>
</div>
</div>
</div>
<div class="reg-btn" id="login">登 录</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="jfp/framework/js/verify.js"></script>
<script type="text/javascript">
$(function() {
$('#mpanel').codeVerify({
type: 1,
width: '80px',
height: '27px',
fontSize: '18px',
codeLength: 4,
btnId: 'login', // 登陆按钮ID
ready: function() {},
success: function() {
// 验证成功之后调用登陆方法
},
error: function() {
alert("验证码错误");
}
});
});
</script>
</html>页面效果
