HTML页面,登陆验证码功能

引用的css和js下载
链接:https://pan.baidu.com/s/1OoFZHdjkGNY90dp_3Hv1dw 密码:5g3x

页面代码


<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>

页面效果
HTML页面,登陆验证码功能_第1张图片

你可能感兴趣的:(HTML)