一、验证码
实现简单的验证码思路:假设验证码是四位由数字和英文字母组成
1.首先我们需要一个数组来装下这个随机数,此处没有i和o,更好的用户体验
//下标:0-33
var arr = new Array(0,1,2,3,4,5,6,7,8,9
'A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','U','V','W','X','Y','Z');//所有候选组成验证码的字符,当然也可以用中文的
2.然后我们根据随机下标拿到对应的值在循环四次就可以拿到我们想要的4位组成的验证码
var str = "";//用来拼接
for(var i=0;i<4;i++){
//随机数 无限逼近0-33 四舍五入
var a=Math.round(Math.random()*33);//下标
//console.info(arr[a]);//根据下标取元素
str+=arr[a];
}
3.最后给我们装验证码的容器赋值即可,我这里用的是span标签
//给span赋值
$("#yzm").html(str);//innerHTML
4.实现点击验证码就自动切还(给这个验证码容器添加点击事件即可)
//这里我用的是js的函数
$(function(){
myf();
//给验证码添加点击事件
$("#yzm").click(function(){
myf();//刷新验证码
});
})
5.若大家想要实现大小写都可用可以把输入内容转为全大写或者全小写
二、登录
要实现登录首先我们需要有在数据库有一个用户表来装用户名及密码
其次就要先在登录页面判断用户名密码验证码是否正确
//这里我只判断了不能为空及验证码要正确
//验证登录
function yzLogin(){
//依次获取用户名、密码、用户输入的验证码、随机产生的验证码 不能为空
var name=$("#xx").val();
var pwd=$("#yy").val();
var yzm1=$("#zz").val();
var yzm2=$("#yzm").html();
if(name==""){
alert("用户名不能为空");
return false;
}
if(pwd==""){
alert("密码不能为空");
return false;
}
if(yzm1==""){
alert("验证码不能为空");
return false;
}
else{//当验证码不为空的情况下
//作业1:要求验证码不区分大小写
if(yzm1!=yzm2){//不一致的时候 提示
alert("验证码有误");
myf();//刷新验证码
$("#zz").val("");//清空文本框
return false;
}
}
return true;
}
<body>
<form action="dologin.jsp" method="post" οnsubmit="return yzLogin()">
<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">
<div id="user">用 户
<input type="text" name="aa" id="xx"/>
</div>
<div id="password">密 码
<input type="password" name="bb" id="yy" />
</div>
<div id="password">验证码
<input id="zz" style="width: 40px;" type="text" name="cc" />
<span id="yzm" style="color:red;font-size:20px;cursor:pointer;">XXXX</span>
</div>
<div id="btn">
<!-- <a href="#">登录</a>
<a href="#">清空</a> -->
<input type="submit" value="登录"/>
<input type="reset" value="清空"/>
</div>
</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>
</form>
</body>
若符合以上条件则跳到dologin页面进行判断数据库是否存在
//设置编码方式
request.setCharacterEncoding("utf-8");
//接收表单提交过来的值:用户名 密码 根据name值取value值
String name=request.getParameter("aa");
String pwd=request.getParameter("bb");
//jdbc连接Oracle做判断
String URL="jdbc:oracle:thin:@localhost:1521:orcl";
String CNAME="oracle.jdbc.driver.OracleDriver";
//加载驱动
Class.forName(CNAME);
//创建连接
Connection con=DriverManager.getConnection(URL, "scott", "tiger");
//定义sql语句
String sql="select * from tb_0325 where sname=? and spwd=?";
//获得执行对象
PreparedStatement ps=con.prepareStatement(sql);
//给占位符赋值
ps.setString(1, name);
ps.setString(2, pwd);
//开始执行
ResultSet rs=ps.executeQuery();
//判断 遍历
if(rs.next()){
//说明登录成功 跳转到新闻发布系统的管理员界面
//重定向
//response.sendRedirect("news/admin.jsp");
//转发
request.getRequestDispatcher("news/admin.jsp").forward(request, response);
}
else{
//说明登录失败
out.print("<script>alert('用户名或者密码有误');location.href='login.jsp';</script>");
}
//关闭资源
if(con!=null&&!con.isClosed()){
con.close();
}
if(ps!=null){
ps.close();
}
if(rs!=null){
rs.close();
}