<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getcontextpath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'Region.jsp' starting page</title> <Meta http-equiv="pragma" content="no-cache"> <Meta http-equiv="cache-control" content="no-cache"> <Meta http-equiv="expires" content="0"> <Meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <Meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript" src="js/my.js"></script> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/address.js"></script> <script type="text/javascript" src="js/China.js"></script> <script type="text/javascript"> //如果两次密码 不相同那么就会返回false 如果false就不会提交 function count() { var one = $("#onepas").val(); var two = $("#twopas").val(); var name = $("#username").val(); var namefont = $("#namefont").val(); if (name == "") { alert("用户名不能为空"); return false; } else if (namefont == "用户名已存在") { alert("用户名已存在"); return false; } else if (namefont == "用户名不能包含中文") { alert("用户名不能包含中文"); return false; } else if (one == "" || two == "") { alert("密码或者确认密码不能为空"); return false; } else if ($("#yzmtext").val() == "") { alert("验证码不能为空"); return false; } else if ($("#yzmfont").text() == "验证码输入错误") { alert("验证码输入错误"); return false; } else if (one == two) { $("#warning").html() = ""; return true; } else { $("#warning").html("两次密码输入不一致"); alert("两次密码输入不一致"); return false; } } //动态判断用户名是否可用 function nameChange() { //获取xmlhttprequest对象 var xmlhttp = getXMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { //做任意事情 //获取到相应的内容 var namefont = $("#namefont"); var str = xmlhttp.responseText; if (str == 1) { namefont.css("color","red"); namefont.html("用户名已存在"); } else if (str == 2) { namefont.css("color","red"); namefont.html("用户名不能包含中文"); } else { namefont.css("color","green"); namefont.html("用户名可用"); } } }; //定义访问的网址 var url = "${pageContext.request.contextpath}/servlet/judgeUserNameServlet?username=" + $("#username").val(); xmlhttp.open("get",url); //发送请求 xmlhttp.send(); } //刷新验证码 var i = 0; function noSee() { $("#yzm").attr("src","${pageContext.request.contextpath}/servlet/YZM?id=" + i); //document.getElementById("yzm").src= i++; } //动态判断验证码是否正确 function yzmChange() { //获取xmlhttprequest对象 var xmlhttp = getXMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var str = xmlhttp.responseText; //var msg=document.getElementById("yzmfont"); if (str == 0) { $("#yzmfont").css("color","red"); $("#yzmfont").html("验证码输入错误"); } else { $("#yzmfont").css("color","green"); $("#yzmfont").html("验证码正确"); } } }; //定义访问的网址 var url = "${pageContext.request.contextpath}/servlet/JudgeCode?yzm=" + $("#yzmtext").val(); xmlhttp.open("get",url); //发送请求 xmlhttp.send(); } //图片预览 function fileChange() { //获取xmlhttp var xmlhttp = getXMLHttpRequest(); //获取工程路径 var conPath = "${pageContext.request.contextpath}"; xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var str = xmlhttp.responseText; //alert(conPath+str); $("#icon").val(str); $("#img").attr("src",conPath + str); } }; var file = document.getElementById("file"); xmlhttp.open("post",file.action); xmlhttp.send(new FormData(file)); } function adre() { $("#addressAll").val(""); } </script> <script type="text/javascript"> window.onload = function() { //默认省 $("#provice").html(getProBegin()); //显示默认的市 $("#city").html(getCityBegin(0)); //显示默认的区 $("#area").html(getAreaBegin(0,0)); } //当省改变时 自动改变该省的市 function changePro() { //当前的省的value var provalue = $("#provice").val(); //获取返回的更新后的市，区列表 var html = onProChange(provalue); $("#city").html(html[0]); $("#area").html(html[1]); } //当市改变时 区自动变为该市的区 function changeCity() { //获取当前的市的value var cityValue = $("#city").val(); $("#area").html(onCityChange(cityValue)); } </script> <style type="text/css"> #ns { position: relative; top: 500px; left: 520px; } #yzm { position: absolute; top: 380px; left: 260px; } #ns { position: absolute; top: 430px; left: 260px; } #regPage { position: absolute; top: 2px; left: 500px; } #attention { position: absolute; top: 60px; left: 240px; } #img { position: absolute; top: -200px; left: 400px; } #submit { position: relative; top: 70px; } #addresdiv { position: relative; top-10px; } #file { position: relative; top: -80px; } #yzmdiv { position: relative; top: 50px; } #addfont { position: relative; top: -60px; } </style> </head> <body> <h1 id="regPage" color="red">欢迎注册</h1> <br> <br> <br> <!-- <form action="${pageContext.request.contextpath }/servlet/RegionServlet" enctype="multipart/form-data" method="post" > --> <form action="${pageContext.request.contextpath }/servlet/RegionServlet" method="post"> 用户名：<input type="text" id="username" name="username" onchange="nameChange()" /> <font id="attention" color="red">用户名只能有数字，字母，下划线组成</font><br> <font id="namefont"></font><br> <br> 密码：<input type="password" id="onepas" name="password" /><br> <br> 确认密码：<input type="password" id="twopas" name="repassword" /> <font id="warning" color="red"></font><br> <br> <input id="icon" type="hidden" name="icon" value=""> <div id="addressdiv"> 选择省：<select id="provice" name="pro" onchange="changePro()"></select> 选择市：<select id="city" name="city" onchange="changeCity()"></select> 选择区：<select id="area" name="area"></select><br> <br> <font id="addfont"> 详细地址：</font> <textarea id="addressAll" name="addressAll" rows=5 cols=35 onclick="adre()" onclick="">乡/镇/街道</textarea> <br> <br> </div> <div id="yzmdiv"> 验证码:<input type="text" id="yzmtext" name="yzm" onchange="yzmChange()" /><br> <font id="yzmfont"></font><br> <br> </div> <input type="submit" id="submit" value="提交" onclick="return count()" /> </form> <form id="file" action="${pageContext.request.contextpath}/servlet/ImageFileServlet" enctype="multipart/form-data" method="post"> 头像:<input type="file" name="photo" onchange="fileChange()" /> <img id="img" width="300px" height="300px" src="img/moren.png"> </form> <img id="yzm" onclick="noSee()" src="${pageContext.request.contextpath }/servlet/YZM"> <font id="ns" onclick="noSee()" color="red">看不清楚点我</font> <br> <font color="green">登录请点击这里</font> <br> <button> <a href="${pageContext.request.contextpath}/Login.jsp">登录</a> </button> </body> </html>