灵感来自GOOGLE--Gmail的注册表单,这是结合XMLHTTP和servlet以及客户端脚本Javascript来实现的一个给死板的表单程序增加亲和力的一个小玩意。
下午看到遂花了几小时模仿着写了一个。前端代码均来自GMAIL的表单注册那里,后段验证密码强度的servlet是自己做的,算法有待商戳不过效果算是出来了。
程序演示地址:http://club.gamvan.com/club/userReg.jsp
原文地址:http://club.gamvan.com/club/clubPage.jsp?ccStyle=0&tID=8663&ccID=8
先来看客户端的JS代码,命名为 gvUserReg.js
程序代码:
程序代码:
要引入刚才那个JS文件
程序代码:
下面这个是强度验证的servlet用到的一个正则表达式工具类,这里我只把我们这篇文章用到的其中一个方法贴出来给大家
程序代码:
地球人都知道servlet需要部署才能用我这里这个应用在web.xml是这么部署的!大家可以根据需要自己改。
程序代码:
下午看到遂花了几小时模仿着写了一个。前端代码均来自GMAIL的表单注册那里,后段验证密码强度的servlet是自己做的,算法有待商戳不过效果算是出来了。
程序演示地址:http://club.gamvan.com/club/userReg.jsp
原文地址:http://club.gamvan.com/club/clubPage.jsp?ccStyle=0&tID=8663&ccID=8
先来看客户端的JS代码,命名为 gvUserReg.js
程序代码:
// this code powered by google
var agt = navigator.userAgent.toLowerCase();
var is_op = (agt.indexOf("opera") != -1);
var is_ie = (agt.indexOf("msie") != -1) && document.all && !is_op;
var is_ie5 = (agt.indexOf("msie 5") != -1) && document.all && !is_op;
function CreateXmlHttpReq(handler) {
var xmlhttp = null;
if (is_ie) {
// Guaranteed to be ie5 or ie6
var control = (is_ie5) ? "Microsoft.XMLHTTP" : "Msxml2.XMLHTTP";
try {
xmlhttp = new ActiveXObject(control);
xmlhttp.onreadystatechange = handler;
} catch (ex) {
// TODO: better help message
alert("You need to enable active scripting and activeX controls");
}
} else {
// Mozilla
xmlhttp = new XMLHttpRequest();
xmlhttp.onload = handler;
xmlhttp.onerror = handler;
}
return xmlhttp;
}
alert();
// XMLHttp send POST request
function XmlHttpPOST(xmlhttp, url, data) {
try {
xmlhttp.open("POST", url, true);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
xmlhttp.send(data);
} catch (ex) {
// do nothing
}
}
// XMLHttp send GEt request
function XmlHttpGET(xmlhttp, url) {
try {
xmlhttp.open("GET", url, true);
xmlhttp.send(null);
} catch (ex) {
// do nothing
}
}
var myxmlhttp;
var isBrowserCompatible;
var hidePasswordBar;
ratingMsgs = new Array(6);
ratingMsgColors = new Array(6);
barColors = new Array(6);
ratingMsgs[0] = "未评级";
ratingMsgs[1] = "太短";
ratingMsgs[2] = "弱";
ratingMsgs[3] = "一般";
ratingMsgs[4] = "很好";
ratingMsgs[5] = "极佳"; //If the password server is down
ratingMsgColors[0] = "#808080";
ratingMsgColors[1] = "#da5301";
ratingMsgColors[2] = "#ccbe00";
ratingMsgColors[3] = "#1e91ce";
ratingMsgColors[4] = "#0000FF";
ratingMsgColors[5] = "#ff0000";
barColors[0] = "#e0e0e0";
barColors[1] = "#da5301";
barColors[2] = "#f0e54b";
barColors[3] = "#1e91ce";
barColors[4] = "#0000FF";
barColors[5] = "#ff0000";
hidePasswordBar = false;
function CreateRateUserPassReq(formKey) {
if (!isBrowserCompatible) {
return;
}
var passwd = document.forms[formKey].gvUserPass.value;
var min_passwd_len = 6;
var passwdKey = "passwd";
if (passwd.length < min_passwd_len) {
DrawBar(1);
}else{
//We need to escape the password now so it won't mess up with length test
passwd = escape(passwd);
var params = passwdKey + "=" + passwd
myxmlhttp = CreateXmlHttpReq(RateUserPassXmlHttpHandler);
XmlHttpPOST(myxmlhttp, "/club/rateUserPass.gv", params);
}
}
function getElement(name) {
if (document.all) {
return document.all(name);
}
return document.getElementById(name);
}
function RateUserPassXmlHttpHandler() {
// Can't check status since safari doesn't support it
if (myxmlhttp.readyState !=4 ) {
return;
}
rating = parseInt(myxmlhttp.responseText);
DrawBar(rating);
}
function DrawBar(rating) {
var posbar = getElement('posBar');
var negbar = getElement('negBar');
var passwdRating = getElement('passwdRating');
var barLength = getElement('passwdBarDiv').width;
if (rating >= 0 && rating <= 5) { //We successfully got a rating
posbar.style.width = barLength / 5 * rating;
negbar.style.width = barLength / 5 * (5 - rating);
} else {
posbar.style.width = 0;
negbar.style.width = barLength;
rating = 5; // Not rated Rating
}
posbar.style.background = barColors[rating]
passwdRating.innerHTML = "<font color='" + ratingMsgColors[rating] +
"'>" + ratingMsgs[rating] + "</font>";
}
表单部分只是列出密码选框部分程序代码:
要引入刚才那个JS文件
<script language="javascript" src="gvUserReg.js"></script>
<form action="userRegPost.jsp" method="post" name="Gforms" onSubmit="return CheckForm();">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="100"><input style="width:200 px" onKeyUp="CreateRateUserPassReq('Gforms')" name="gvUserPass" type="password" id="gvUserPass" size="30" maxlength="30" /> </td>
<td width="10"></td><td>
<TABLE width="200" border=0 cellPadding=0 cellSpacing=0 >
<TBODY><TR><TD vAlign=top noWrap width=0>
<A href="#">密码强度:</A>
</TD>
<TD><DIV id="passwdRating">太短</DIV>
</TD></TR><TR><TD height=3></TD></TR>
<TR><TD colSpan=2>
<TABLE id="passwdBarDiv" cellSpacing=0 cellPadding=0 width="200" bgColor="#ffffff" border=0>
<TBODY><TR>
<TD id="posBar" width="0%" bgColor="#e0e0e0" height="4"></TD>
<TD id="negBar" width="100%" bgColor="#e0e0e0" height="4"></TD>
</TR></TBODY>
</TABLE>
</TD></TR>
</TBODY></TABLE> </td>
</tr>
</table>
<script language="javascript">
<!--
/* Checks Browser Compatibility */
//document.getElementById("passwdBarDiv").style.display = "block";
var agt = navigator.userAgent.toLowerCase();
var is_op = (agt.indexOf("opera") != -1);
var is_ie = (agt.indexOf("msie") != -1) && document.all && !is_op;
var is_mac = (agt.indexOf("mac") != -1);
var is_gk = (agt.indexOf("gecko") != -1);
var is_sf = (agt.indexOf("safari") != -1);
function gff(str, pfx) {
var i = str.indexOf(pfx);
if (i != -1) {
var v = parseFloat(str.substring(i + pfx.length));
if (!isNaN(v)) {
return v;
}
}
return null;
}
function Compatible() {
if (is_ie && !is_op && !is_mac) {
var v = gff(agt, "msie ");
if (v != null) {
return (v >= 6.0);
}
}
if (is_gk && !is_sf) {
var v = gff(agt, "rv:");
if (v != null) {
return (v >= 1.4);
}else{
v = gff(agt, "galeon/");
if (v != null) {
return (v >= 1.3);
}
}
}
if (is_sf) {
var v = gff(agt, "applewebkit/");
if (v != null) {
return (v >= 124);
}
}
return false;
}
/* We also try to create an xmlhttp object to see if the browser supports it */
myxmlhttp = CreateXmlHttpReq(RateUserPassXmlHttpHandler);
isBrowserCompatible = Compatible() && myxmlhttp;
if (!isBrowserCompatible || hidePasswordBar) {
document.getElementById("passwdBarDiv").style.display = "none";
}
//-->
</script>
</form>
Servlet部分,验证密码强度的JAVA类
程序代码:
/*
* 2005-12-14
* Made in GamVan
*/
package com.gamvan.club.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 com.gamvan.tools.EncodeString;
/**
* @author GamVan by 我容易么我
* Powered by GamVan.com
*/
public class RateUserPass extends HttpServlet {
private static final long serialVersionUID = 1L;
private int rate = 0;
/**
* 口令强弱等级判定,强度算法有待商戳,功能基本实现
* @param pass
* @return
* 2005-12-14 16:55:03 Made In GamVan
* com.gamvan.club.servlet
*/
public int rateUserPass(String pass){
/*
* i 值指示口令等级
* 0 不合法口令
* 1 太短
* 2 弱
* 3 一般
* 4 很好
* 5 极佳
*/
int i = 0;
if(pass==null || pass.length()==0){
return 0;
}
int hasLetter = EncodeString.matcherStr(pass,"[a-zA-Z]","").length();
int hasNumber = EncodeString.matcherStr(pass,"[0-9]","").length();
int passLen = pass.length();
if(passLen>=6){
/* 如果仅包含数字或仅包含字母 */
if((passLen-hasLetter)==0 || (passLen-hasNumber)==0){
if(passLen<8){
i = 2;
}else {
i = 3;
}
}
/* 如果口令大于6位且即包含数字又包含字母 */
else if(hasLetter>0 && hasNumber>0){
if(passLen>=10){
i = 5;
}else if(passLen>=8){
i = 4;
}else{
i = 3;
}
}
/* 如果既不包含数字又不包含字母 */
else if(hasLetter==0 && hasNumber==0){
if(passLen>=7){
i = 5;
}else{
i = 4;
}
}
/* 字母或数字有一方为0 */
else if(hasNumber==0||hasLetter==0){
if((passLen-hasLetter)==0 || (passLen-hasNumber)==0){
i = 2;
}
/*
* 字母数字任意一种类型小于6且总长度大于等于6
* 则说明此密码是字母或数字加任意其他字符组合而成
*/
else{
if(passLen>8){
i = 5;
}else if(passLen==8){
i = 4;
}else{
i = 3;
}
}
}
}else{ //口令小于6位则显示太短
if(passLen>0){
i = 1; //口令太短
}else{
i = 0;
}
}
return i;
}
public void service(HttpServletRequest request,HttpServletResponse response)
throws ServletException, IOException
{
String userPass = request.getParameter("passwd");
rate = rateUserPass(userPass);
response.setContentType("text/HTML;charset=UTF-8");
PrintWriter out = response.getWriter();
out.print(rate);
out.close();
if(true)return;
return ;
}
}
下面这个是强度验证的servlet用到的一个正则表达式工具类,这里我只把我们这篇文章用到的其中一个方法贴出来给大家
程序代码:
/*
* Made in GamVan
*/
package com.gamvan.tools;
import java.io.UnsupportedEncodingException;
import java.security.MessageDigest;
import sun.misc.BASE64Encoder;
import java.util.regex.*;
import com.gamvan.tools.MD5;
/**
* 字符串操作集合类
* @author GamVan by 我容易么我
* Powered by GamVan.com
*/
public class EncodeString{
/**
* 循环找出匹配内容
* @param str
* @param cp
* @param s
* @return
* 2005-12-11 18:45:25 Made In GamVan
* com.gamvan.tools
*/
public static String matcherStr(String str, String cp, String s){
if(str==null || str.equals("")){
return "";
}
String txt = new String();
txt = str;
if(str!=null && !str.equals("")){
txt = str;
Pattern p = Pattern.compile(cp,2); //参数2表示大小写不区分
Matcher m = p.matcher(txt);
StringBuffer sb = new StringBuffer();
int i=0;
boolean result = m.find();
//使用循环将句子里所有匹配的内容找出并替换再将内容加到sb里
while(result) {
i++;
sb.append(m.group());
sb.append(s);
//继续查找下一个匹配对象
result = m.find();
}
txt = String.valueOf(sb);
}else{
txt = "";
}
return txt;
}
}
地球人都知道servlet需要部署才能用我这里这个应用在web.xml是这么部署的!大家可以根据需要自己改。
程序代码:
<servlet>
<servlet-name>RateUserPass</servlet-name>
<servlet-class>com.gamvan.club.servlet.RateUserPass</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>RateUserPass</servlet-name>
<url-pattern>/club/rateUserPass.gv</url-pattern>
</servlet-mapping>