第一张
第二张
第三张
第四张
第五张
第六张
第七张（桌面出现文件说明执行了该程序）
第八张（有文件说明执行成功）
第九张(整个程序没有错误)
。
。
。
技术难题：1>jQuery的灵活的运用
2>复选框的选中获取 *****************************采用>$("#id").get(0).checked获取选中
3>焦点的得失
4>html的input属性*********************************详细说明见百度html5的input属性
5>File的使用和字符流写入
6>路径的问题
7>foward()与sendRedirect()区别
8>filter过滤的灵活使用
总结：1.建议采用盒子模型进行设计，不建议采用表格进行设计！
2.采用javabean去设计注册更简洁！ (javabean：就是我们通常说的构造get与set的类不构造有参函数 )
3.用filter去设置字符编码，让代码更简洁！
4.采用foward与sendRedirect让程序更灵活！
最后共享一下核心源码：
<%@ page language="java" import="java.util.*"
contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-store">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="Regit">
<meta http-equiv="description" content="This is my page">
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div style="margin:30px 0px 0px 240px;" id="reg" >
<form action="" method="post" onsubmit="return myForm()" enctype="multipart/form-data">
<div>
<label for="username"><span> </span>用户名 </label>
<input type="text" class="input" name="username" id="username" placeholder="请设置用户名" maxlength="36" onblur="$('#username').removeClass('add')" onclick="$('#username').addClass('add')" style="margin: 60px 0px 0px 0px;" />
<div style="display: none;" id="qq"><img alt="" src="images/tures.gif"></div>
<div style="display:none;" id="mm"><img src='images/error.gif' style="margin:1px 0px 0px 5px;"> <span style="font-size: 14px;">用户名仅支持中英文，不支持其他字符</span></div>
<div style="display:none;" id="nn"><img src='images/error.gif' style="margin:1px 0px 0px 5px;"> <span style="font-size: 14px;">用户名不能超过12个字符</span></div>
<div style="display:none;" id="aa"><span style="color:#A4A4A4;font-size: 12px;">中英文均可，最长12个汉字</span></div>
<div style="display: none;" id="mga"><img src='images/error.gif' style="margin:1px 0px 0px 5px;"> <span style="font-size: 14px;">请您输入用户名</span></div>
</div><br/>
<div>
<label for="password"><span> </span>密 码 </label>
<input type="password" class="input" name="password" id="password" placeholder="请设置登录密码" maxlength="32" onblur="$('#password').removeClass('add')" onclick="$('#password').addClass('add')" style="margin: 0px 0px 0px 7px;" />
<div style="display: none;" id="ll"><img alt="" src="images/tures.gif"></div>
<div style="display: none;margin: 0px 0px 0px 77px;width:222px;height: 72px;border:1px solid #D8D8D8;" id="bb">
<span style="color:#A4A4A4;font-size: 12px; margin:0px 0px 0px 8px;"><img alt="" src="images/errors.jpg" style="display:none;" id="a1"><img alt="" src="images/true.jpg" style="display:none;" id="a2"><p style="display:inline;">○</p> 长度为8~16个字符</span><br/>
<span style="color:#A4A4A4;font-size: 12px; margin:0px 0px 0px 8px;"><img alt="" src="images/true.jpg" style="display:none;" id="b2"><p style="display:inline;">○</p> 支持数字、大小写字母和标点符号</span><br/>
<span style="color:#A4A4A4;font-size: 12px; margin:0px 0px 0px 8px;"><img alt="" src="images/errors.jpg" style="display:none;" id="c1"><img alt="" src="images/true.jpg" style="display:none;" id="c2"><p style="display:inline;">○</p> 不允许有空格</span>
</div>
<div style="display: none;" id="mgb"><img src='images/error.gif' style="margin:1px 0px 0px 5px;"> <span style="font-size: 14px;">请输入密码</span></div>
</div><br/>
<div>
<label for="cellphone"><span> </span>手机号 </label>
<input type="text" class="input" name="cellphone" id="cellphone" placeholder="可用于登录和找回密码" maxlength="36" onkeyup="value=value.replace(/[^\d]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" onblur="$('#cellphone').removeClass('add')" onclick="$('#cellphone').addClass('add')" />
<div style="display: none;" id="rr"><img alt="" src="images/tures.gif"></div>
<div style="display:none;" id="zz"> <img alt="" src="images/error.gif" ><span style="font-size: 14px;margin:1px 0px 0px 5px;">手机号码格式不正确</span></div>
<div style="display:none;" id="cc"><span style="color:#A4A4A4;font-size: 12px;">请输入中国大陆手机号,其他用户不可见</span></div>
<div style="display: none;" id="mgc"><img src='images/error.gif' style="margin:1px 0px 0px 5px;"> <span style="font-size: 14px;">请您输入手机号</span></div>
</div><br/>
<div>
<label for="vercode"><span> </span>验证码 </label>
<input type="text" name="vercode" id="vercode" style="width: 166px; height: 38px;" class="input" placeholder="请输入验证码" maxlength="6"onblur="$('#vercode').removeClass('add')" onclick="$('#vercode').addClass('add')" /> <span style="margin:0px 0px 0px 7px;padding:0;"> <input type="button" class="button" id="button" value="获取短信验证码" onmouseover="$('#button').addClass('app')" onmouseout="$('#button').removeClass('app')" /></span>
<div style="display: none;" id="mgd"><img src='images/error.gif' style="margin:1px 0px 0px 5px;"> <span style="font-size: 14px;">请您输入验证码 </span></div>
</div><br/>
<div>
<input required="required" type="checkbox" id="protocol" name="protocol"/><label for="protocol"><span id="protocols">阅读并接受<a href="page/protocol.html" style="font-size: 12px;">《华海科技用户协议》</a>及<a href="" style="font-size: 12px;">《隐私权保护声明》</a></span></label>
<div style="display: none;" id="mge"><img src='images/error.gif' style="margin:1px 0px 0px 16px;"> <span style="font-size: 14px;"><a style="cursor: pointer;">请勾选"阅读并接受用户协议"</a></span></div>
</div><br/>
<div>
<input type="submit" class="regits" value="注册" />
</div>
</form>
</div>
<script type="text/javascript" src="js/regit.js"></script>
<script type="text/javascript" src="js/reg.js"></script>
</body>
</html>