java获取手机验证码接口 javaweb手机验证码

转载

mob64ca14101b2f 2023-08-21 17:25:28

文章标签 java获取手机验证码接口 eclipse 验证码 html css 文章分类 Java 后端开发

一、验证码 1.为什么需要验证码？随着网络的发达，会有些人恶意注册网站，但是有了验证码之后就可以有效防止这一现象，对于网站运营商家来说，少了这些无效的注册，也更有利于管理，降低网站运营管理的难度。

对于用户来说，当账户出现异常和高风险操作都会触发验证码，验证码发到个人手机上，很好的保护了个人信息安全。

2.利用javaweb技术设置验证码第一步：定义接收验证码的容器

第二步：封装验证的生成方法，利用随机数的原理，随机出现四个数

第三步：验证输入的验证码是否匹配

第四步：重置验证码

二、项目演示 1.项目需求分析

Javaweb新闻发布系统项目分析根据模板分析，可以分为前端和后台 1.前端后端功能分析前端功能： 1.用户登录 2.用户注册 3.新闻分类显示 4.新闻信息显示 5.分页功能（首页，下一页，上一页，尾页） 6.历史记录功能 7.评论模块后台功能： 1.管理员登录 2.主页默认显示所有新闻+分页 3.发布新闻 4.修改新闻 5.新闻分类模块：增删改查模块 6.评论模块：增删改查 7.普通用户管理：增删改查 8.分页功能 2.数据表分析从模板中分析到有以下数据表：用户表（普通用户+管理员），新闻分类标，新闻信息表，评论表用户信息表：字段名中文说明数据类型约束备注 Userid 编号 Number 主键 Username 用户名 Varchar2 Password 密码 Varchar2 sex 性别 Varchar2 Hobby 爱好 Varchar2 address 地址 Varchar2 urole 权限 number 0管理员 1普通用户（默认） udate 注册时间 date 新闻分类表|新闻主题表字段名中文说明数据类型约束备注 Tid 分类编号 Nunber 主键 tname 分类名称 Varchar2 新闻信息表：字段名中文说明数据类型约束备注 Nid 新闻编号 Number 主键 nTid 新闻分类编号 Number 外键 Ntitle 标题 Varchar2 Nauthor 作者 Varchar2 nsummary 摘要 Varchar2 ncontent 内容 Varchar2 nimage 图片 Varchar2 ncount 点击量 number ndate 发布时间 date css布局:

body {
    margin: 0;
    padding: 0;
    font-size: 9pt;
}
 
#login {
    margin: auto;
    width: 975px;
    height: 368px;
    margin-top: 120px;
}
 
#top_left {
    width: 691px;
    height: 89px;
    float: left;
}
 
#top_left img {
    margin-left: 33px;
}
 
#top_center {
    width: 248px;
    height: 89px;
    background: url(../images/login_05.gif);
    float: left;
}
 
#center_left {
    width: 691px;
    height: 190px;
    background: url(../images/login_09.gif);
    float: left;
}
 
#center_middle {
    width: 248px;
    height: 190px;
    float: left;
    background: url(../images/login_13.gif) repeat-y;
}
 
#center_right {
    width: 36px;
    height: 190px;
    float: right;
    background: url(../images/login_11.gif);
}
 
#down_left {
    width: 691px;
    height: 89px;
    float: left;
    margin-top: 15px;
}
 
#down_center {
    width: 248px;
    height: 89px;
    background: url(../images/login_16.gif);
    float: left;
}
 
#inf {
    width: 691px;
    height: 38px;
    background: url(../images/login_18.gif) no-repeat;
}
 
.inf_text {
    display: block;
    width: 100px;
    height: 20px;
    font-size: 16px;
    font-weight: bolder;
    color: #fff;
    margin-left: 17px;
    margin-top: 12px;
    float: left;
}
 
.copyright {
    display: block;
    float: left;
    margin-left: 17px;
    margin-top: 15px;
}
#user{
    width:248px;
    height:40px;
    line-height: 40px;
    text-align: center;
}
 
#pwd{
    width:248px;
    height:40px;
    line-height: 40px;
    text-align: center;
}
 
 
#yzm{
    width:248px;
    height:40px;
    line-height: 40px;
    text-align: left;
    /* 左缩进 */
    text-indent: 2em;
}
 
#yzm input{
    width:80px;
}
 
#yzm span{
    font-size: 18px;
    font-weight: bold;
    color: red;
    cursor: pointer;
    padding-left: 20px
}
 
 
#mdl{
    width:248px;
    height:30px;
    line-height: 30px;
    text-align: center;
    color: green;
}
 
#btn{
    width:248px;
    height:40px;
    line-height: 40px;
    text-align: center;
}
登录界面呈现：
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<!-- 引入login.css -->
<link rel="stylesheet" type="text/css" href="css/login.css"/>
<!-- javascript表单验证 -->
<script type="text/javascript">
    
    var code = ""; 
    var arr = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','l','m','o','p','q','r','s','k','u','y','w','x','y','z'];
    
    
    function $(id){
        return document.getElementById(id);
    }
    
    //加载函数
    window.onload = function(){
        //用户名焦点事件
        $("username").onblur = function(){
                var usernameValue = this.value;
                if(!usernameValue){
                    alert('用户名不能为空')
                    return false;
                }
                return true;
            }
        //密码的焦点事件
        $("password").onblur = function(){
            var passwordValue = this.value;
            if(!passwordValue){
                alert('密码不能为空')
                return false;
            }
            return true; 
        }
        //阻止提交
        myFrom
        $("myFrom").onsubmit = function(){
            if(!$("username").onblur() || !$("password").onblur() || !$("code").onblur()){
                return false;
            }
            return true;
        }
        //验证验证码
        $("code").onblur = function(){
            var inputCode = this.value;
            var spanCode = $("code_val").innerHTML;
            if(!inputCode){
                alert('验证码不能为空');
                return false;
            }else{
                if(inputCode!=spanCode){
                    alert('验证码输入错误');
                    this.value = "";
                    return false;
                }
            }
            return true;
        };
        setCode();
        //点击更换验证码
        $("code_val").onclick = function(){
            setCode();
        }
    };
    //编写生成验证码
    function setCode(){
        code = "";
        for(var i = 0;i<4;i++){
            var sj = Math.floor(Math.random()*arr.length);
            code+=arr[sj];
        }
        $("code_val").innerHTML = code;
    }
 
    </script>
    
</head>
    <body>
        <!-- 登录大容器 -->
        <div id="login">
            <!-- 上 -->
            <div id="top">
                <div id="top_left"><img src="images/login_03.gif" /></div>
                <div id="top_center"></div>
            </div>
            <!-- 中 -->
            <div id="center">
                <div id="center_left"></div>
                <div id="center_middle">
                    <!-- 表单 -->
                    <form id="myFrom" action = "doLogin.jsp" method="post">
                    <div id="user">用 户
                        <input type="text" name="username" id="username"/>
                    </div>
                    <div id="pwd">密 码
                        <input type="password" name="password" id="password"/>
                    </div>
                    <div id = "yzm">
                        验证码 <input type ="text" name = "code" id = "code"/><span id = "code_val">okok</span>
                    </div>
                    <div id = "mdl">
                        用户七天免登陆哦~
                    </div>
                    <div id="btn">
                    <input type="submit" value="登录" class="opt_sub" />
                    <input type="reset" value="重置" class="opt_sub" />
                    </div>
                    </form>    
                </div>
                <div id="center_right">
                </div>
            </div>
            <!-- 下 -->
            <div id="down">
                <div id="down_left">
                    <div id="inf">
                        <span class="inf_text">版本信息</span>
                        <span class="copyright">管理信息系统 2008 v2.0</span>
                    </div>
                </div>
                <div id="down_center"></div>
            </div>
 
        </div>
    </body>
</html>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。