JavaWeb第三周-利用JS中正则表达式实现注册的信息验证。 -

GyFireI

浏览: 5838 次
性别:

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JavaWeb第三周-利用JS中正则表达式实现注册的信息验证。

博客分类：

HTML开发

JavaWeb 表单正则表达式 JavaScript

本次主要利用了正则表达式对控件内容进行验证，验证码的产生还只处于数字阶段，并不是现在主流的图片
显示.

<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&nbsp; 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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</td>
    <td colspan="3"><input type="checkbox" id="check" />我已阅读并接受<a href="">服务条款</a></td>
    <td>&nbsp;</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>

0
顶

1
踩

分享到：

JavaWeb这三周-FrameSet框架实现新闻后台 ... | Java第三周-利用集合实现员工信息管理

2015-09-11 08:28
浏览 977
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JavaWeb第三周-利用JS中正则表达式实现注册的信息验证。

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JavaWeb第三周-利用JS中正则表达式实现注册的信息验证。

评论

发表评论

相关推荐

JavaWeb这三周-FrameSet框架实现新闻后台管理系统

利用JS实现WEB前端计算器功能

最近访客更多访客>>