本次主要利用了正则表达式对控件内容进行验证,验证码的产生还只处于数字阶段,并不是现在主流的图片
显示.
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>网站注册</title> <!--本次主要实现网站注册的各控件内容验证功能, 通过JS中的正则表达式来验证各控件内容,根据 鼠标离开焦点和处于焦点的方法来调用相应的验证--> <style> #title{ background:#069; font-weight:bold; } .hui{ color:#999; font-size:small; } <!--定义出错提示样式--> .errTxt{ color:#F00; font-size:15px; font-family:"华文行楷"; } </style> <script> <!--用户名验证--> function verifyAccount(){ var reg=/^[a-z|A-Z][a-z|A-Z|0-9|_]{5,19}$/; var str=document.getElementById("account").value; if(reg.test(str)){ return true; }else{ document.getElementById("accErr").innerHTML="用户名格式有误,请按要求输入"; return false; } } <!--密码验证--> function verifyPwd(){ var reg=/^[a-z|A-Z|0-9]{6,20}$/; var str=document.getElementById("password").value; if(reg.test(str)){ return true; }else{ document.getElementById("pwdErr").innerHTML="用户密码格式有误,请按要求输入"; return false; } } <!--密码确认--> function marryPwd(){ var pwd=document.getElementById("password").value; var apwd=document.getElementById("apassword").value; if(pwd!=apwd){ document.getElementById("apwdErr").innerHTML="两次密码不同"; return false; } else{ return true; } } <!--密码提示答案验证--> function verifyPrompt(){ var str=document.getElementById("prompt").value; if(str==""){ document.getElementById("promptErr").innerHTML="密码提示答案不能为空"; return false; }else{ return true; } } <!--邮箱验证--> function verifyEmail(){ var str=document.getElementById("email").value; var reg=/^([a-z|A-Z|0-9|_])+@([a-z|A-Z|0-9|_])+\.com|edu|cn|net$/; if(reg.test(str)){ return true; }else{ document.getElementById("emailErr").innerHTML="邮箱格式有误,请按要求输入"; return false; } } <!--验证码验证--> function verifyCode(){ var str1=document.getElementById("codeShow").innerHTML; var str2=document.getElementById("code").value; if(str1==str2){ return true; }else{ document.getElementById("codeErr").innerHTML="验证码输入错误"; return false; } } function verifyCheck(){ if(document.getElementById("check").checked!=true){ alert("请阅读协议同意后再提交!"); return false; }else{ return true; } } <!--验证码刷新--> function fresh(){ var str=Math.round(Math.random()*10000); document.getElementById("codeShow").innerHTML=str; } <!--当控件成为焦点时,清除提示错误信息--> function clearScreen(nameval){ document.getElementById(nameval).style="none"; document.getElementById(nameval).innerHTML=""; } function submitt(){ if(verifyAccount()&&verifyPwd()&&marryPwd()&&verifyPrompt()&&verifyEmail()&&verifyCode()&&verifyCheck()){ alert("提交成功!"); }else{ alert("提交失败!请按提示改正再提交!") } } </script> </head> <body onload="fresh()"> <center> <form name="form" id="form1" method="get" action="http://www.sina.com.cn/"> <table width="86%" height="302" align="center"> <tr> <td id="title" colspan="6"><center>HP—EPM XX公司用户注册</center></td> </tr> <tr height="0.1" bgcolor="#0000FF"> <td colspan="6" height="0.1" bgcolor="#0000FF" ></td> </tr> <tr> <td width="13%" align="right">用户名:</td> <td width="20%" colspan="3"><input name="account" id="account" type="text" onblur="verifyAccount()" onfocus="clearScreen('accErr')"/></td> <td width="27%"><div id="accErr" class="errTxt"></div></td> <td width="40%"><span class="hui">英文字母阿拉伯数字下划线组合,长度为6—20位,只能以字母开头</span></td> </tr> <tr> <td width="13%" align="right">输入密码:</td> <td width="20%" colspan="3"><input name="password" id="password" type="password" onblur="verifyPwd()" onfocus="clearScreen('pwdErr')" /></td> <td><div id="pwdErr" class="errTxt"></div></td> <td rowspan="2"><span class="hui">英文字母或阿拉伯数字组合,英文区分大小写,长度为6—20位</span></td> </tr> <tr> <td width="13%" align="right">密码验证:</td> <td width="20%" colspan="3"><input name="apassword" id="apassword" type="password" onblur="marryPwd()" onfocus="clearScreen('apwdErr')" /></td> <td><div id="apwdErr" class="errTxt"></div></td> <tr height="0.1" bgcolor="#0000FF"> <td colspan="6" height="0.1" bgcolor="#0000FF" ></td> </tr> </tr> <tr> <td width="13%" align="right">密码提示问题:</td> <td colspan="3"><select name="select1"> <option>你的学号?</option> <option>你的出生地?</option> </select> </td> <td> </td> <td rowspan="2"><span class="hui">当您忘记密码时,可以通过密码问题和答案来查询。密码提示答案3—32位之间,不能包含特殊字符</span></td> </tr> <tr> <td width="13%" align="right">密码提示答案:</td> <td width="20%" colspan="3"><input name="prompt" id="prompt" onblur="verifyPrompt()" onfocus="clearScreen()" /></td> <td><div id="promptErr" class="errTxt"></div></td> </tr> <tr> <td width="13%" align="right">出生日期:</td> <td colspan="3"><select name="select2"> <option selected="selected">1990</option> <option>1991</option> <option>1992</option> <option>1993</option> <option>1994</option> </select>年 <select name="select3"> <option selected="selected">1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option> <option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option> </select>月 <select name="select4" > <option selected="selected">1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option> <option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option> <option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option> <option>19</option><option>20</option><option>21</option><option>22</option><option>23</option><option>24</option> <option>25</option><option>26</option><option>27</option><option>28</option><option>29</option><option>30</option> <option>31</option> </select>日 </td> <td> </td> <td rowspan="2"><span class="hui">为了方便您的使用,请填写真是信息</span></td> </tr> <tr> <td width="13%" align="right">性别:</td> <td colspan="3"><input type="radio" name="sex" checked="checked"/>男 <input type="radio" name="sex" />女</td> <td> </td> </tr> <tr> <td width="13%" align="right">常用邮箱:</td> <td colspan="3"><input type="text" name="email" id="email" onblur="verifyEmail()" onfocus="clearScreen('emailErr')"/></td> <td><div id="emailErr" class="errTxt"></div></td> <td><span class="hui">方便你取得邮箱账号相关的重要信息,包括找回密码</td> <tr height="0.1" bgcolor="#0000FF"> <td colspan="6" height="0.1" bgcolor="#0000FF" ></td> </tr> </tr> <tr> <td width="13%" align="right">请输入验证码:</td> <td><input type="text" name="code" id="code" onblur="verifyCode()" onfocus="clearScreen('codeErr')" /></td> <td width="10%"><div id="codeShow" class="errTxt"></div></td> <td><input type="button" name="fre" value="刷新" onclick="fresh()"/></td> <td><div id="codeErr" class="errTxt"></div></td> <td><span class="hui">请将系统产生的四位验证码数字输入到系统验证码的输入框中</span></td> <tr height="0.1" bgcolor="#0000FF"> <td colspan="6" height="0.1" bgcolor="#0000FF" ></td> </tr> </tr> <tr> <td> </td> <td colspan="3"><input type="checkbox" id="check" />我已阅读并接受<a href="">服务条款</a></td> <td> </td> <td><span class="hui">选择HT—EPM服务前,请仔细阅读服务条款</span></td> </tr> <tr> <td align="center" colspan="6"><input type="submit" id="submit" value="提交" onclick="submitt()" /></td> <tr height="0.1" bgcolor="#0000FF"> <td colspan="6" height="0.1" bgcolor="#0000FF" ></td> </tr> </tr> </table> </form> </center> </body> </html>
相关推荐
JAVAWeb课程设计--注册登录系统--用SSH框架整合实现注册登录系统.pdfJAVAWeb课程设计--注册登录系统--用SSH框架整合实现注册登录系统.pdfJAVAWeb课程设计--注册登录系统--用SSH框架整合实现注册登录系统.pdfJAVAWeb...
javaweb期末作业--教师学生信息管理系统源码+数据库。网页设计与制作期末作业--html+css,Java设计模式平时作业和期末作业。 javaweb期末作业--教师学生信息管理系统源码+数据库。网页设计与制作期末作业--html+css...
JavaWeb-11 JSP&EL表达式
JAVAWeb课程设计报告--注册登录系统--用SSH框架整合实现注册登录系统.doc
超全面javaweb教程28天-day3_超全面javaweb第4天-_01_案例一在末尾添加节点
基于javaweb的课程设计--奶茶销售管理系统源码+数据库.zip 95分以上高分必过项目,下载即用无需修改,项目完整确保可以运行。 基于javaweb的课程设计--奶茶销售管理系统源码+数据库.zip 95分以上高分必过项目,...
javaweb实训项目-基于JavaWeb的仿小米在线商城ShoppingMall源码.zip。基于JavaWeb的在线商城项目是我们专业大三上学期期末实训的项目。javaweb实训项目-基于JavaWeb的仿小米在线商城ShoppingMall源码.zip。基于...
最后,很感谢网上热心的朋友的文章和我的同桌。 如果有何异议,希望不吝分享。谢谢您的浏览!
利用新浪微博开放平台开发javaweb应用----用户授权.pdf
利用新浪微博开放平台开发javaweb应用----用户授权参照.pdf
利用新浪微博开放平台开发javaweb应用----用户授权借鉴.pdf
JavaWeb课程设计---客户管理系统.pdf
JavaWeb学习资料---PDF格式,希望能够学习者提供帮助,文档中包含多个JavaWeb学习环节,循序渐渐地介绍了JavaWeb的相关知识
javaweb期末作业--JavaWeb 学生信息管理系统.zip
JSP+servlet+javabean学习 ...JavaWeb07-javaWeb模式.rar JavaWeb08-DBUtil.rar JavaWeb09-EL与JSTL.rar JavaWeb10-分页应用.rar JavaWeb11-图片验证码.rar JavaWeb12-文件上传.rar JavaWeb13-过滤器与监听器.rar
JavaWeb课程设计--客户信息管理系统
Javaweb图书管理系统--完整项目,整个项目完整打包。
JavaWeb课程设计---客户管理系统方案.doc
湖科大javaweb课程设计--图书管理系统,基于mybatis,jsp,servlet,jquery,echarts,bootstrap 代码简单易懂,快速上手,基于MVC架构分模块设计
基于javaweb的管理系统-航空管理系统源码+数据库(课程设计大作业).zip 90分以上高分项目,必过啊。本项目基于javaweb的管理系统-航空管理系统源码,主要针对计算机相关专业的正在做毕设的学生和需要项Java学习者。...