社会YOU樊哥 2023-02-11 14:29 采纳率: 100%
浏览 23
已结题

数据库如何获取设置了阻止表单提交的输入框内的值?

我是一个学生,在写毕业设计的时候出现了个问题求各位朋友帮忙看一下。在编写一个注册模块的时候需要验证输入框内邮箱格式是否正确,两次密码是否一致等问题,我在表单上设置了阻止表单提交的代码,即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"这个,只要把它删除,数据库获取的值就显示正常,但是这个代码又不能没有,要不然前端输入框即使不输入数据点击注册按钮都会直接提交表单,我想知道为什么会冲突?这个问题该怎么解决?

  • 写回答

1条回答 默认 最新

  • 文盲老顾 WEB应用领新星创作者 2023-02-11 14:39
    关注

    onsubmit 只能阻止用户的提交行为,你可以在 js 里验证后,用 js 进行 submit,这样就可以传递值了,location.href 修改无法传递值得

    // check 结束后
    document.forms[0].submit();
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 2月19日
  • 已采纳回答 2月11日
  • 创建了问题 2月11日

悬赏问题

  • ¥20 机器学习能否像多层线性模型一样处理嵌套数据
  • ¥20 西门子S7-Graph,S7-300,梯形图
  • ¥50 用易语言http 访问不了网页
  • ¥50 safari浏览器fetch提交数据后数据丢失问题
  • ¥15 matlab不知道怎么改,求解答!!
  • ¥15 永磁直线电机的电流环pi调不出来
  • ¥15 用stata实现聚类的代码
  • ¥15 请问paddlehub能支持移动端开发吗?在Android studio上该如何部署?
  • ¥20 docker里部署springboot项目,访问不到扬声器
  • ¥15 netty整合springboot之后自动重连失效