目录
1.验证码的实现 jQuery 加 js 实现
2.jQuery表单验证与jQuery 的表单阻止e.preventDefault(); //jQery防止表单提交
3.css 的一些属性 方法 与五种跳转方式
css的一些属性设置
1.验证码的实现 jQuery 加 js 实现
var cns = ['q','w','e','r','t','y','u','i','o','p','a','s','d','f','g','h','j','k','l','z','x','c','v','b','n',
'm','M','N','B','V','C','X','Z','A','S','D','F','G','H','J','K','L','P','O','I','U','Y','T','R','E','W','Q',
'0','1','2','3','4','5','6','7','8','9'];
function setAutoCode() {
var str="";
for(var i=0;i<4;i++){
var index=Math.floor(Math.random()*cns.length);
str+=cns[index];
}
$("#yz").html(str); 这里也可以使用js获取标签设置
}
2.jQuery表单验证与jQuery 的表单阻止e.preventDefault(); //jQery防止表单提交
<%@ 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" />
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<style type="text/css">
.error{
color: red;
text-align: left;
}
</style>
<script type="text/javascript">
$(function() {
// 密码验证正则表达式 添加插件
jQuery.validator.addMethod("regexPassword", function(value, element) {
return this.optional(element) || /^(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$/.test(value);
}, "一个大写，一个小写，一个符号");
$("#formset").validate({
rules:{
user:{
required: true,
rangelength:[2,16]
},
password:{
required: true,
rangelength:[3,14],
// regexPassword: true
}
},
messages: {
user: {
required: "*必填",
rangelength: "2-16*"
},
password: {
required: "*必填",
rangelength: "3-14*"
}
}
})
使用提交按钮设置点击事件
$("#buttonDiv>input:submit").click(function (e) {
var nul=$("#code").val();
if(!nul){
alert("验证码不可为空");
e.preventDefault();
}else{
var yz=$("#yz").html();
if(nul != yz){
alert("验证码错误");
e.preventDefault(); //jQery防止表单提交
}
}
})
setAutoCode();
$("#yz").click(function () {
setAutoCode();
})
})
var cns = ['q','w','e','r','t','y','u','i','o','p','a','s','d','f','g','h','j','k','l','z','x','c','v','b','n',
'm','M','N','B','V','C','X','Z','A','S','D','F','G','H','J','K','L','P','O','I','U','Y','T','R','E','W','Q',
'0','1','2','3','4','5','6','7','8','9'];
function setAutoCode() {
var str="";
for(var i=0;i<4;i++){
var index=Math.floor(Math.random()*cns.length);
str+=cns[index];
}
$("#yz").html(str);
}
</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 -->
<div id="center_middle">
<form id="formset" action="dologin.jsp" method="post">
<!-- 用户输入框 -->
<div id="username">
<label>账号：</label><input id="user" name="user" type="text">
</div>
<!-- 密码输入框 -->
<div id="passwordDiv">
<label>密码：</label> <input type="password" id="password"
name="password">
</div>
<!-- 验证码输入框 -->
<div id="codeDiv">
<label>验证码：</label> <input type="text" id="code" name="code">
<span id="yz">BTNt</span>
</div>
<!-- 自动登录 -->
<div id="outoLoginDiv"></div>
<!-- 登录和重置按钮 -->
<div id="buttonDiv">
<input type="submit" value="登录" /> <input type="reset" value="重置" />
</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>
<%
String i=request.getParameter("i");
if(i!=null){
out.print("<script>$(function() {alert('账号或密码错误');location.href='login.jsp'})</script>");
}
%>
</body>
