我是一个学生,在写毕业设计的时候出现了个问题求各位朋友帮忙看一下。在编写一个注册模块的时候需要验证输入框内邮箱格式是否正确,两次密码是否一致等问题,我在表单上设置了阻止表单提交的代码,即onsbmit="return false",下面是HTML代码:
<form action="01.注册验证.jsp" method="get" align="center" onsubmit="return false">
<h1 style="color: white; margin: 0; text-align: center">账号注册</h1>
<label>
<input name="username" id="username" placeholder="请输入您的用户名">
<span id="tishiUsername"></span>
</label>
<label>
<input name="email" id="email" placeholder="请输入您的电子邮箱">
<span id="tishiEmail"></span>
</label>
<label>
<input name="phone" id="phone" placeholder="请输入您的联系方式">
<span id="tishiPhone"></span>
</label>
<label>
<input type="password" name="userpwd" id="pwd" placeholder="请输入密码">
<span id="tishiPwd"></span>
</label>
<label>
<input type="password" name="cuserpwd" id="repwd" placeholder="请确认密码">
<span id="tishiRepwd"></span>
</label>
<div align="center">
<div id="your-dom-id" class="nc-container"></div>
</div>
<br>
<center><a href="01.樊氏集团股份有限公司官网.html" target="_parent" class="button1">返回首页</a></center>
<input type="submit" value="注册" onclick="checkUser()">
</form>
然后JS代码如下:
<script>
function checkUser(){
var username = document.getElementById("username").value;//文本框中的值,var是各种变量类型的集合
if(username == ""){
document.getElementById("tishiUsername").style.color="red";
document.getElementById("tishiUsername").innerHTML ="×用户名不能为空!";
return;//必须要写return跳出
}else{
document.getElementById("tishiUsername").style.color="green";
document.getElementById("tishiUsername").innerHTML ="同户名可用√";
}
var email = document.getElementById("email").value;
var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])/;//邮箱格式包括_-两个符号
if(!reg.test(email)){
document.getElementById("tishiEmail").style.color="red";
document.getElementById("tishiEmail").innerHTML ="×邮箱格式错误!";
return;
}else{
document.getElementById("tishiEmail").style.color="green";
document.getElementById("tishiEmail").innerHTML ="邮箱格式正确√";
}
var phone = document.getElementById("phone").value;
if(pwd == ""){
document.getElementById("tishiPhone").style.color="red";
document.getElementById("tishiPhone").innerHTML ="×联系方式不能为空!";
return;
}else{
document.getElementById("tishiPhone").style.color="green";
document.getElementById("tishiPhone").innerHTML ="联系方式可用√";
}
var pwd = document.getElementById("pwd").value;
if(pwd == ""){
document.getElementById("tishiPwd").style.color="red";
document.getElementById("tishiPwd").innerHTML ="×密码不能为空!";
return;
}else{
document.getElementById("tishiPwd").style.color="green";
document.getElementById("tishiPwd").innerHTML ="密码可用√";
}
var repwd = document.getElementById("repwd").value;
if(pwd != repwd){
document.getElementById("tishiRepwd").style.color="red";
document.getElementById("tishiRepwd").innerHTML ="×两次密码不一样!";
return;
}else{
document.getElementById("tishiRepwd").style.color="green";
document.getElementById("tishiRepwd").innerHTML ="密码验证成功√";
}
window.location.href="01.注册验证.jsp";//全部通过则定位至链接
}
</script>
单单从前端来看是可以达到效果的,但是在我编写后端时遇到了问题,我用JSP链接Mysql数据库,需要验证注册账户在数据库中是否存在,并且如果不存在需要把注册信息插入到数据库。JSP代码如下:
<%
String username=request.getParameter("username");
String email=request.getParameter("email");
String phone=request.getParameter("phone");
String userpwd=request.getParameter("userpwd");
String cuserpwd=request.getParameter("cuserpwd");
String driverClass = "com.mysql.jdbc.Driver";
String url = "jdbc:mysql://111.67.192.235:3306/sfydb_6549435?useUnicode=true&characterEncoding=utf8";
String uname = "sfydb_6549435";
String upwd = "FanYu20001220";
Class.forName(driverClass);//加载驱动
Connection conn = DriverManager.getConnection(url,uname,upwd);//得到连接
PreparedStatement pStmt = conn.prepareStatement("select * from customer where 电子邮箱 = '"+email+"' or 联系方式 = '"+phone+"'");
ResultSet rs = pStmt.executeQuery();
if(rs.next()){
out.println("<script language='javascript'>alert('该账户已存在,请直接登录!');window.location.href='04.樊氏集团账号登录.html';</script>");
}else{
PreparedStatement tmt = conn.prepareStatement("insert into customer(用户名,电子邮箱,联系方式,用户密码) value ('"+username+"','"+email+"','"+phone+"','"+userpwd+"')");
int rst = tmt.executeUpdate();
if (rst != 0){
out.println("<script language='javascript'>alert('用户注册成功!');window.location.href='03.注册成功登录跳转页面.html';</script>");
}else{
out.println("<script language='javascript'>alert('用户注册失败!');window.location.href='02.樊氏集团账号注册.html';</script>");
}
}
%>
在JSP获取输入框内的值的时候出问题了,插入到数据库的值全部显示为null,经过排查确认是阻止表单提交代码的原因,就是onsubmit="return false"这个,只要把它删除,数据库获取的值就显示正常,但是这个代码又不能没有,要不然前端输入框即使不输入数据点击注册按钮都会直接提交表单,我想知道为什么会冲突?这个问题该怎么解决?