JavaScript中Form表单技术汇总(推荐)(3)

package cn.hncu.user; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class RegServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8");//设置编码 String name = request.getParameter("userName");//userName为提交过来的表单中的一个input的name属性 String pwd = request.getParameter("pwd"); //System.out.println(name); request.setAttribute("uName", "hncu---"+name); request.setAttribute("pwd", "pwd---"+pwd); request.getRequestDispatcher("/dhtml/6formsubmit/jsps/show.jsp").forward(request, response); //输出,导向另外的页面显示 } }

web.xml

<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee "> <display-name></display-name> <servlet> <description>This is the description of my J2EE component</description> <display-name>This is the display name of my J2EE component</display-name> <servlet-name>RegServlet</servlet-name> <servlet-class>cn.hncu.user.RegServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>RegServlet</servlet-name> <url-pattern>/servlet/RegServlet</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>

360浏览器8.1 演示图片:

JavaScript中Form表单技术汇总(推荐)

当格式都填写正确时,点注册按钮,自动跳转到另外的页面。

JavaScript中Form表单技术汇总(推荐)


有一个格式错误时,点注册按钮不会有反应的。

JavaScript中Form表单技术汇总(推荐)

JavaScript中Form表单技术汇总(推荐)

注册表单的验证且控制提交–前端校验–最终版本:

代码演示:

<html> <head> <title>DHTML技术演示---注册表单的验证且控制提交--前端校验--最终版本</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <script type="text/javascript"> function check(name,reg,spanId,okInfo,errInfo){ var value = document.getElementsByName(name)[0].value; //用正则检验 var oSpanNode = document.getElementById(spanId); if(reg.test(value)){ oSpanNode.innerHTML=okInfo.fontcolor("green"); return true; }else{ oSpanNode.innerHTML=errInfo.fontcolor("red"); return false; } } function checkUserName(){ var reg = new RegExp("[a-z]{4}","i");//包含4个连续的字母,注意"i"中的双引号不能省略 return check("userName",reg,"userNameSpan","用户名格式正确","用户名格式错误"); } function checkPwd(){ var reg = new RegExp("^[\\w\\d]{6,9}$"); return check("pwd",reg,"userPwdSpan","密码格式符合要求","密码长度必须是6-9位的数字字母或下划线"); } function checkPwd2(){ var flag; var pwd = document.getElementsByName("pwd")[0].value; var pwd2 = document.getElementsByName("pwd2")[0].value; var oSpanNode = document.getElementById("userPwd2Span"); if(pwd==pwd2){ oSpanNode.innerHTML="两次密码一致".fontcolor("green"); flag = true; }else{ oSpanNode.innerHTML="两次密码不一致".fontcolor("red"); flag = false; } return flag; } function checkMail(){ var reg = /^\w+@\w+(\.\w+)+$/i; return check("mail",reg,"userMailSpan","邮箱格式正确","邮箱格式不正确"); } function checkUser(){//控制表单的提交 if(checkUserName() && checkPwd() && checkPwd2() && checkMail() ){ return true; }else{ return false; } } </script> </head> <body> <form action="/myDhtmlProj/servlet/RegServlet" onsubmit="return checkUser();"> 用户名:<input type="text" onblur="checkUserName()" /> <span></span> <br/> 输入密码:<input type="text" onblur="checkPwd()" /> <span></span> <br/> 确认密码:<input type="text" onBlur="checkPwd2()"/> <span></span> <br/> 邮件地址:<input type="text" onblur="checkMail()" /> <span></span> <br/> <input type="submit" value="注册"> </form> </body> </html>

360浏览器8.1 演示结果:

JavaScript中Form表单技术汇总(推荐)

只有全部格式填写正确后再点注册按钮才会有响应。

JavaScript中Form表单技术汇总(推荐)


全部格式填写正确后,点注册按钮后的页面,其实就是跳到show.jsp页面了。(自己可以随便定位到哪的)

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzsdjy.html