<html> <head> <title>DHTML技术演示---注册表单的验证且控制提交--前端校验</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript"> function checkUserName(){ var oUserNameNode = document.getElementsByName("userName")[0]; var userName = oUserNameNode.value; //用正则检验 var reg = new RegExp("[a-z]{4}","i");//包含4个连续的字母就可以，注意"i"的双引号不能省略 //i---表示忽略大小写 //var regg =new RegExp("^[a-z]{4}$","i") ;//只含4个连续的字母,注意"i"中的双引号不能省略 //^代表开始 $代表结束 var oUserNameSpan = document.getElementById("userNameSpan"); if(reg.test(userName)){ oUserNameSpan.innerHTML="用户名格式正确".fontcolor("green"); return true; }else{ oUserNameSpan.innerHTML="用户名格式错误".fontcolor("red"); return false; } } function checkPwd(){ var oUserPwdNode = document.getElementsByName("pwd")[0]; var pwd = oUserPwdNode.value; var reg2 = new RegExp("^[\\w\\d]{6,9}$"); if(reg2.test(pwd)){ document.getElementById("userPwdSpan").innerHTML="密码格式符合要求".fontcolor("green"); return true; }else{ document.getElementById("userPwdSpan").innerHTML="密码长度必须是6-9位的数字字母或下划线".fontcolor("red"); return false; } } function checkUser(){ if(checkUserName() && checkPwd() ){//如果还有其他项需要在提交前验证，直接把那个验证函数写这里就行 return true; }else{ return false; } } </script> </head> <body> <!--通过注册onsubmit事件响应来控制表单的提交，如果return false则不会提交，而return true则会提交。如果不注册onsubmit事件即是return true onsubmit 当表单将要被提交时触发。 <form action="/myDhtmlProj/servlet/RegServlet" onsubmit="return true;"> --> <form action="/myDhtmlProj/servlet/RegServlet" onsubmit="return checkUser();"> 用户名：<input type="text" onblur="checkUserName()" /> <span></span> <!--为了演示清楚，密码这里也用type="text"了，其实应该用type="password"的--> 密码：<input type="text" onblur="checkPwd()" /> <span></span> <br/> <input type="submit" value="注册"/> </form> <hr/> <!--表单提交方式2---自己写个按钮来代替form自带的提交按钮--> <form action="/dhtmlProj/servlet/RegServlet" > 用户名:<input type="text" onBlur="checkUserName2()"/> <span></span><br/> 密码:<input type="text" onBlur="checkPwd2()"/> <span></span> <br/> </form> <input type="button" value="注册" /> <script type="text/javascript"> function mySubmit(){ var oFormNode = document.getElementById("userinfo"); if(checkUserName2()&&checkPwd2()){ oFormNode.submit();//submit 提交表单。 } } function checkUserName2(){ var oUserNameNode = document.getElementsByName("userName")[1]; var userName = oUserNameNode.value; //用正则检验 var reg = new RegExp("[a-z]{4}","i");//包含4个连续的字母就可以，注意"i"的双引号不能省略 //i---表示忽略大小写 //var regg =new RegExp("^[a-z]{4}$","i") ;//只含4个连续的字母,注意"i"中的双引号不能省略 //^代表开始 $代表结束 var oUserNameSpan = document.getElementById("userNameSpan2"); if(reg.test(userName)){ oUserNameSpan.innerHTML="用户名格式正确".fontcolor("green"); return true; }else{ oUserNameSpan.innerHTML="用户名格式错误".fontcolor("red"); return false; } } function checkPwd2(){ var oUserPwdNode = document.getElementsByName("pwd")[1]; var pwd = oUserPwdNode.value; var reg2 = new RegExp("^[\\w\\d]{6,9}$"); if(reg2.test(pwd)){ document.getElementById("userPwdSpan2").innerHTML="密码格式符合要求".fontcolor("green"); return true; }else{ document.getElementById("userPwdSpan2").innerHTML="密码长度必须是6-9位的数字字母或下划线".fontcolor("red"); return false; } } </script> </body> </html>
show.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>这是注册后的显示页面</title> </head> <body> <% out.println(request.getAttribute("uName")); out.println(request.getAttribute("pwd")); %> <% for(int i=0;i<3;i++){ //这个下面可以写html代码 %> <div>欢迎</div> <% //这个上面可以写html代码 } %> </body> </html>
RegServlet.Java
这个是new一个Servlet。
会自动给我们配好web.xml