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

最新推荐文章于 2024-07-16 22:31:12 发布
最新推荐文章于 2024-07-16 22:31:12 发布
阅读量157 收藏 1
点赞数
分类专栏： HTML开发 文章标签： JavaWeb 表单 正则表达式 JavaScript ViewUI 
本次主要利用了正则表达式对控件内容进行验证，验证码的产生还只处于数字阶段，并不是现在主流的图片
显示.
<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 οnlοad="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" οnblur="verifyAccount()" οnfοcus="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" οnblur="verifyPwd()" οnfοcus="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" οnblur="marryPwd()" οnfοcus="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" οnblur="verifyPrompt()" οnfοcus="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" οnblur="verifyEmail()" οnfοcus="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" οnblur="verifyCode()" οnfοcus="clearScreen('codeErr')" /></td>
    <td width="10%"><div id="codeShow" class="errTxt"></div></td>
    <td><input type="button"  name="fre" value="刷新" οnclick="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="提交" οnclick="submitt()" /></td>
    <tr height="0.1" bgcolor="#0000FF">
       <td  colspan="6"  height="0.1" bgcolor="#0000FF"  ></td>

       </tr>
    </tr>
</table>
</form>
</center>

</body>
</html>

 

iteye_146
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Java 正则表达式 之 注册验证
verejava的博客
06-08 604
http://www.verejava.com/?id=16994944659329package com.reg; public class TestReg { public static void main(String[] args) { System.out.println(testTel("+22861232233333")); } /** * 5. 国际电话号码验...
Java使用正则表达式对注册页面进行验证功能实现
10-21
本文给大家分享一段有关java使用正则表达式对注册页面进行验证的代码，代码比较简单，非常不错，感兴趣的朋友一起学习吧
jsp中表单提交注册信息，提交信息之前先进行正则匹配，验证用户输入的信息是否符合规范要求。
凌世宇
05-30 3万+
  今天写了一个jsp的注册页面，用户每次输完一个输入框的内容，就会进行验证用户输入信息的格式是否符合规范，符合规范之后表单才进行提交，不符合规范则提醒用户按要求输入信息。直到用户输入的每个信息都符合要求，表单才提交，才进行验证。避免了提交之后，我还需要对信息提前进行一定的判断，是否符合要求，才进行数据库的插入操作。  说了这么多，还是先说一说我的思路吧。  1.首先我的页面有五个框，第一个框是用...
在js中用正则表达式验证用户注册信息
huangwen123456的博客
01-30 7352
Insert title here function check() { var submitFlg = true; //验证姓名 var regpname={regstr:/^[\u4e00-\u9fa5\w]{1,6}$/,tip:'请输入1-6位的汉字、英文、数字、下划线'}; var pname= document.getElementById("pname").value;
JavaWeb用户注册---邮箱验证码实现注册
09-27
前端部分，我们可以使用AJAX（Asynchronous JavaScript and XML）技术实现无刷新验证。当用户输入邮箱并点击发送验证码按钮时，JavaScript会发送异步请求到后端，请求包含用户邮箱地址。后端接收到请求后，生成一个...
javaweb期末作业--教师学生信息管理系统源码+数据库.zip
06-20
javaweb期末作业--教师学生信息管理系统源码+数据库。网页设计与制作期末作业--html+css，Java设计模式平时作业和期末作业。 javaweb期末作业--教师学生信息管理系统源码+数据库。网页设计与制作期末作业--html+css...
JavaWeb新版教程-EL表达式&JSTL标签库-达式-EL表达式输出复杂的Bean对象.avi
05-18
JavaWeb新版教程-EL表达式&JSTL标签库-达式-EL表达式输出复杂的Bean对象.avi
JavaWeb新版教程-EL表达式&JSTL标签库-达式-EL表达式搜索四个域的顺序.avi
05-18
JavaWeb新版教程-EL表达式&JSTL标签库-达式-EL表达式搜索四个域的顺序.avi
JAVAWeb课程设计--注册登录系统--用SSH框架整合实现注册登录系统.pdf
06-14
【SSH框架整合实现注册登录系统】是JavaWeb课程设计中的一个重要课题。SSH指的是Spring、Struts和Hibernate三个开源框架的首字母缩写，它们分别负责应用程序的依赖注入、MVC模式实现以及对象关系映射。在JavaWeb开发...
Web程序设计（第三版）课后习题答案
热门推荐
qq_43742692的博客
06-18 5万+
Web程序设计（第三版）课后习题答案 第一章 一、填空题： 1、NET Framework 主要包括 CLR和.NET Framework类库 2、ASP.NET网站在编译时，首先将语言代码编译成 微软中间语言MSIL 3、一台IIS Web服务器为211.78.60.19，网站端口号为8000，则要访问Web应用程序User中Default.aspx的URL为http://211.78.60.1...
Java简单注册格式验证（正则表达式）
山东大叔的专栏
09-08 1万+
一、用正则表达式写的简单的注册验证，具体要求如下：用户注册验证（用户名，密码，昵称，中文名字，手机号，邮箱）所有信息符合以下条件才允许注册：1.用户名格式：由字母数字下划线组成且开头必须是字母，不能超过16位；2.密码格式：字母和数字构成，不能超过16位；3.昵称：字母和数字构成长度大于6小于10；4.手机号：全数字，长度为11位；5.邮箱：必须包含@符号；必须包含点；点和@之间必须有字符；所有信息
Js基础学习之-- 利用正则表达式验证 模拟注册界面
freesky的专栏
07-27 4297
注册界面 要求：用户名只能是字母或者数字或者下划线，不能以数字开头，用户名长度在6到20之间 密码两次验证必须一致，用户名密码不能为空。 模拟注册 *{margin:0; padding:0; font-size:14px; font-famliy:"微软雅黑"; font-style:normal; } body{backgr
利用JS及正则表达式验证创建一个简单的注册界面
weixin_43885123的博客
12-01 1464
利用JS及正则表达式验证创建一个简单的注册界面 思路： ★作为初学者还没有完全学完，改进的地方还有很多很多，望各位网友提出宝贵意见，共同学习！ 1.利用for循环在一个div里添加3个input节点； 2.添加两个div节点 ，当输入的信息不符合正则表达式的规则时用来显示错误信息； 3.当输入框失去焦点时，验证正则表达式，如果结果为false，则输出错误信息，提醒重新并按格式输入； 4.当输入框获...
【JavaScript小项目】正则表达式实现用户注册输入信息验证（包含弹窗和innerHTML验证）
小黄皇的博客
07-01 3845
本博主要是运用正则表达式，登陆界面进行出生日期选择，用到年月日的三级联动，第一种验证方式用到innerHTML动态验证输入信息，第二种验证方式利用数组弹窗验证。效果：图1.1图1.2图1.3图1.4要求：代码：登录页面login.html , 主要是年月日三级联动 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=...
Java正则表达式实现web端输入验证
纸上得来终觉浅，绝知此事要躬行
02-18 6268
1、Java正则表达式基础                                                                                                   常用的规则符号 .                                          表示任意一个字符
python 正则表达式
最新发布
qq_41122834的博客
07-16 138
match从字符串开头匹配，如果开头位置没有匹配成功就算失败；而search会跳过开头，继续向后寻找是否有匹配的字符串。**split切片函数，**使用指定的正则规则在目标字符串中查找匹配的字符串，用他们作为分界，返回一个被切完的字符串列表。sub返回一个被替换的字符串。subn返回一个元组。
基于javaweb的城乡居民基本医疗信息管理系统论文-java-文档-基于javaweb的城乡居民基本医疗信息管理系统文档
02-22
本论文详细探讨了如何利用JavaWeb技术设计并实现一个城乡居民基本医疗信息管理系统，旨在提高医疗信息管理的效率和安全性。系统采用B/S架构和MVC模式，开发语言为Java，利用SpringBoot框架，集成Mybatis作为持久层...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值