在HTML中使用正则表达式规范输入数据

最近学习了HTML网页的简单制作和如何使用正则表达式规范输入的数据是否符合要求，制作的页面很简陋，但部分知识点都包含在其中：
正则表达式的一部分使用方法：
字符类
[abc] a、b 或 c（简单类）
[^abc] 任何字符，除了 a、b 或 c（否定）
[a-zA-Z] a 到 z 或 A 到 Z，两头的字母包括在内（范围）
[a-d[m-p]] a 到 d 或 m 到 p：[a-dm-p]（并集）
[a-z&&[def]] d、e 或 f（交集）
[a-z&&[^bc]] a 到 z，除了 b 和 c：[ad-z]（减去）
[a-z&&[^m-p]] a 到 z，而非 m 到 p：[a-lq-z]（减去）

预定义字符类
. 任何字符（与行结束符可能匹配也可能不匹配）
\d 数字：[0-9]
\D 非数字： [^0-9]
\s 空白字符：[ \t\n\x0B\f\r]
\S 非空白字符：[^\s]
\w 单词字符：[a-zA-Z_0-9]
\W 非单词字符：[^\w]

Greedy 数量词
X? X，一次或一次也没有
X* X，零次或多次
X+ X，一次或多次
X{n} X，恰好 n 次
X{n,} X，至少 n 次
X{n,m} X，至少 n 次，但是不超过 m 次

具体使用案例：
1.创建用户表
帐号[6~20,数字，字母，下划线]
密码[6~20]
确认密码
qq
邮箱
手机
个人简介

2.创建一个注册页面[reg.html]
3.在注册页面上使用js+正则表达式验证注册数据

<!DOCTYPE html>
<html>
<head>
<title>注册验证正则效果图</title>
<meta http-equiv="content-type" content="text/html;charset=gbk" />
<script type="text/javascript">
	function check() {
		var zhanghao = document.getElementById('zhanghao').value;
		var mima = document.getElementById('mima').value;
		var querenmima = document.getElementById('querenmima').value;
		var qq = document.getElementById('QQ').value;
		var emile = document.getElementById('emile').value;
		var telephone = document.getElementById('telephone').value;
		var jianjie = document.getElementById('jianjie').value;

		var nameText = document.getElementById('nameText');
		if (zhanghao == '') {
			nameText.innerHTML = "<img src='false.gif'/><span style='color:#cc0000'>账号不能为空</span>";
			return false;
		} else if (zhanghao.match('\\w{6,20}') != zhanghao) {
			nameText.innerHTML = "<img src='false.gif'/><span style='color:#cc0000'>帐号必须是6到20位的数字，字母，下划线</span>"
			return false;
		} else {
			nameText.innerHTML = "<img src='right.gif'/><span style='color:#00cc00'>账号ok</span>"
		}

		var pawText = document.getElementById('pawText');
		if (mima == '') {
			pawText.innerHTML = "<img src='false.gif'/><span style='color:#cc0000'>密码不能为空</span>";
			return false;
		} else if (mima.match('\\w{6,20}') != mima) {
			pawText.innerHTML = "<img src='false.gif'/><span style='color:#cc0000'>密码必须是6到20位的数字，字母，下划线</span>"
			return false;
		} else {
			pawText.innerHTML = "<img src='right.gif'/><span style='color:#00cc00'>密码ok</span>"
		}

		var pawText2 = document.getElementById('pawText2');
		if (querenmima != mima) {
			pawText2.innerHTML = "<img src='false.gif'/><span style='color:#cc0000'>两次密码不一致</span>";
			return false;
		} else {
			pawText2.innerHTML = "<img src='right.gif'/><span style='color:#00cc00'>两次密码ok</span>"
		}

		var qqText = document.getElementById('qqText');
		if (qq == '') {
			qqText.innerHTML = "<img src='false.gif'/><span style='color:#cc0000'>QQ账号不能为空</span>";
			return false;
		} else if (qq.match('\\d{5,15}') != qq) {
			qqText.innerHTML = "<img src='false.gif'/><span style='color:#cc0000'>QQ帐号必须是5到15位的数字，字母，下划线</span>"
			return false;
		} else {
			qqText.innerHTML = "<img src='right.gif'/><span style='color:#00cc00'>QQ账号ok</span>"
		}

		var emileText = document.getElementById('emileText');
		if (emile == '') {
			emileText.innerHTML = "<img src='false.gif'/><span style='color:#cc0000'>emile不能为空</span>";
			return false;
		} else if (emile.match('\\w+@\\w+\.\\w+[\.\\w+]+') != emile) {
			emileText.innerHTML = "<img src='false.gif'/><span style='color:#cc0000'>emile必须是[email protected]</span>"
			return false;
		} else {
			emileText.innerHTML = "<img src='right.gif'/><span style='color:#00cc00'>emile ok</span>"
		}

		var telText = document.getElementById('telText');
		if (telephone == '') {
			telText.innerHTML = "<img src='false.gif'/><span style='color:#cc0000'>手机号码不能为空</span>";
			return false;
		} else if (telephone.match('\\d{11}') != telephone) {
			telText.innerHTML = "<img src='false.gif'/><span style='color:#cc0000'>手机是11位数字</span>"
			return false;
		} else {
			telText.innerHTML = "<img src='right.gif'/><span style='color:#00cc00'>手机号码ok</span>"
		}

		var jianjieText = document.getElementById('jianjieText');
		if (jianjie == '') {
			jianjieText.innerHTML = "<img src='false.gif'/><span style='color:#cc0000'>个人简介不能为空</span>";
			return false;
		} else if (jianjie.match('\.+') != jianjie) {
			jianjieText.innerHTML = "<img src='false.gif'/><span style='color:#cc0000'>无上限</span>"
			return false;
		} else {
			jianjieText.innerHTML = "<img src='right.gif'/><span style='color:#00cc00'>个人简介ok</span>"
		}

	}
</script>
</head>

<body>
	<form action="ZhuceServlet" method="post" onsubmit="return check()">
		<pre>
	账 号：   <input type="text" id="zhanghao" name="zhanghao"
				onblur="check()" /><span id="nameText"></span>

	密 码：   <input type="password" id="mima" name="mima" onblur="check()" /><span
				id="pawText"></span>

	确认密码：<input type="password" id="querenmima" name="querenmima"
				onblur="check()" /><span id="pawText2"></span>

	QQ：      <input type="text" id="QQ" name="QQ" onblur="check()" /><span
				id="qqText"></span>

	电子邮件：<input type="text" id="emile" name="emile" onblur="check()" /><span
				id="emileText"></span>

	移动电话：<input type="text" id="telephone" name="telephone" onblur="check()" /><span
				id="telText"></span>

	个人简介：<textarea rows="5" cols="19" id="jianjie" name="jianjie"
				onblur="check()" /></textarea><span id="jianjieText"></span>
			

	<input type="submit" value="注册">
	</pre>
	</form>
</body>
</html>

4.定义一个Servlet接收注册数据

package Servlet;

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;

import dao.ZhuceDAO;
import bean.ZhuCe;

public class ZhuceServlet extends HttpServlet {
	@Override
	public void service(HttpServletRequest request, HttpServletResponse response)
			throws IOException, ServletException {
		
		String zhanghao = request.getParameter("zhanghao");
		String mima=request.getParameter("mima");
		String querenmima=request.getParameter("querenmima");
		String QQ=request.getParameter("QQ");
		String emile=request.getParameter("emile");
		String telephone=request.getParameter("telephone");
		String jianjie=request.getParameter("jianjie");
		
		ZhuCe zhu=new ZhuCe();
		zhu.setZhanghao(zhanghao);
		zhu.setMima(mima);
		zhu.setQuerenmima(querenmima);
		Double qq=Double.parseDouble(QQ);
		zhu.setQQ(qq);
		zhu.setEmile(emile);
		Double tel=Double.parseDouble(telephone);
		zhu.setTelephone(tel);
		zhu.setJianjie(jianjie);
		
		ZhuceDAO zdao=new ZhuceDAO();
		zdao.setZhuce(zhu);
		
//		PrintWriter out = response.getWriter();
//		out.print("Succeed");
//		out.flush();
	//	System.out.println("chenggong"+zhanghao);
		
		// 响应
		PrintWriter out = response.getWriter();
		//out.print("<h2>Succeed</h2>");
		
		out.print("<table border=1><tr><td>Zhanghao</td><td>Mima</td><td>Querenmima</td><td>QQ</td><td>Emile</td><td>Telephone</td><td>Jianjie</td></tr>");
		out.print("<tr><td>" + zhu.getZhanghao() + "</td><td>" + zhu.getMima()
				+ "</td><td>" + zhu.getQuerenmima() + "</td><td>" + zhu.getQQ() 
				+ "</td><td>" + zhu.getEmile() + "</td><td>" + zhu.getTelephone()
				+ "</td><td>" + zhu.getJianjie() + "</td></tr>");

		out.print("</table>");
		out.flush();
	}
}

5.将注册数据保存到数据库

package dao;

import java.sql.Connection;
import java.sql.PreparedStatement;

import bean.ZhuCe;

public class ZhuceDAO {
	
	public void setZhuce(ZhuCe zc) {
		
		try {
			Connection conn = DBUtil.getConn();
			String sql = "insert into zhuce values(?,?,?,?,?,?,?)";
			PreparedStatement pstm = conn.prepareStatement(sql);
			pstm.setString(1, zc.getZhanghao());
			pstm.setString(2, zc.getMima());
			pstm.setString(3, zc.getQuerenmima());
			pstm.setDouble(4, zc.getQQ());
			pstm.setString(5, zc.getEmile());
			pstm.setDouble(6, zc.getTelephone());
			pstm.setString(7, zc.getJianjie());
			int rs = pstm.executeUpdate();
			
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	
	
}

最终结果由图片显示：

在HTML中使用正则表达式规范输入数据

猜你喜欢