利用js实现用户注册检验 改进版（nm360浏览器不兼容）

最新推荐文章于 2018-08-04 17:13:35 发布
最新推荐文章于 2018-08-04 17:13:35 发布
阅读量2.3k 收藏
点赞数 1
文章标签： 浏览器 360 function email string stylesheet
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Test_LD/article/details/7421062
版权

//index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
  </head>
 
  <body>
    <a href="register.html">用户注册</a><br>
  </body>
</html>

//register.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用户注册</title>
<style type="text/css">
  @import "css/userRegister.css";
</style>
</head>
<body id="BODY" οnlοad="pageLoad()">
<div id="DIV_FORM">
<form method="post" action="registerSuccess.jsp" >
 <table id="TABLE" >
    <tbody>
        <tr>
           <td>用户名：</td>
           <td>
              <input name="username"  class="cls_inpt" type="text"  id="USERNAME" οnfοcus="showDesc(this)"
              οnblur="isNull(this);setBackground(this);"  οnkeyup="checkText(this,event)" οnclick="active(this)"/>
           </td>
        </tr>
        <tr>
           <td>密码：</td>
           <td>
             <input name="password" class="cls_inpt" id="PASSWORD" type="password" οnfοcus="showDesc(this)"
              οnblur="isNull(this);setBackground(this);"  οnkeyup="checkText(this,event)" οnclick="active(this)" maxlength="20"/>
           </td>
        </tr>
        <tr>
           <td>确认密码：</td>
           <td>
             <input name="password2" type="password" class="cls_inpt" id="PASSWORD2" οnfοcus="showDesc(this)"  disabled="disabled"
              οnblur="isNull(this);setBackground(this);"  οnkeyup="checkText(this,event)"  οnclick="active(this)" maxlength="20"/>
           </td>
        </tr>
        <tr>
           <td>身份证号：</td>
           <td>
             <input name="IDNumber" type="text" class="cls_inpt"id="IDNUMBER" οnfοcus="showDesc(this)"
              οnblur="isNull(this);setBackground(this);"  οnkeyup="checkText(this,event)" οnclick="active(this)" maxlength="19"/>
           </td>
        </tr>
        <tr>
           <td>电话号码：</td>
           <td>
             <input name="phoneNumber" type="text" class="cls_inpt" id="PHONENUMBER" οnfοcus="showDesc(this)"
              οnblur="isNull(this);setBackground(this);"  οnkeyup="checkText(this,event)" οnclick="active(this)" maxlength="20"/>
           </td>
        </tr>
        <tr>
           <td>Email：</td>
           <td>
               <input name="email"  class="cls_inpt" id="EMAIL" type="text" οnfοcus="showDesc(this)"  οnblur="isNull(this);setBackground(this)"
               οnkeyup="checkText(this,event)" οnclick="active(this)"/>
           </td>
        </tr>
        <tr>
           <td> </td>
           <td align="right">
             <input  id="SUBMIT" type="submit" value="确认提交"  disabled="disabled"   οnmοuseοver="lastCheck()"/>
           </td>
        </tr>
    </tbody>  
    </table>
   <table id="TABLE2" border="0">
       <tr><td><span id="username" active="0">请输入用户名</span></td></tr>
       <tr><td><span id="password" active="0">请输入密码</span></td></tr>
       <tr><td><span id="password2" active="0">请再次输入密码</span></td></tr>
       <tr><td><span id="IDNumber"  active="0">请输入身份证号码</span></td></tr>
       <tr><td><span id="phoneNumber" active="0">请输入电话号码</span></td></tr>
       <tr><td><span id="email" active="0">请输入邮箱地址</span></td></tr>
    </table>
</form>
</div>
<script  type="text/javascript"  src="jslib/registerCheck.js">
</script>
</body>
</html>

//registerCheck.js


// JavaScript Document
//
//在页面加载时初始化页面必要信息
function pageLoad()
{
    document.getElementById("USERNAME").value="";
    document.getElementById("PASSWORD").value="";
    document.getElementById("PASSWORD2").value="";
    document.getElementById("PASSWORD2").setAttribute("disabled","disabled");
    document.getElementById("IDNUMBER").value="";
    document.getElementById("PHONENUMBER").value="";
    document.getElementById("EMAIL").value="";
    
    document.getElementById("username").setAttribute("active", "0");
    document.getElementById("password").setAttribute("active", "0");
    document.getElementById("password2").setAttribute("active", "0");
    document.getElementById("IDNumber").setAttribute("active", "0");
    document.getElementById("phoneNumber").setAttribute("active", "0");
    document.getElementById("email").setAttribute("active", "0");
}

//输入框获得焦点时，显示提示内容
function showDesc(obj)
{  
   var id= obj.name;
   document.getElementById(id).style.display="inline";
}
//判断输入框内容是否为空
function isNull(obj)
{
   //获取输入内容
   var id= obj.name;
   var text=document.getElementById(id.toString().toUpperCase()).value;
   
   //判断是否为空
   if(text.replace(/\s/g, "")=="")
   {
     var id_span=document.getElementById(id);
     id_span.innerHTML="* 输入不能为空";
     id_span.style.color="#F00";
     id_span.setAttribute("active","0");
     return true;
   }

}
//输入时检验输入内容是否有效
function checkText(obj,e)
{
    //如果输入的是退格键，判断下内容是否为空
    if(8==e.which&&isNull(obj))
        {
          isSuccess();
          return;
        }
    //输入框的name属性名与span 标签id 名一致
    var id= obj.name;
     //组装方法
     //取首字母转换为大写,其余不变
     var firstChar=id.charAt(0).toString().toUpperCase();
     //
     var strsub=id.substring(1,id.length);
     var strMethod="check"+firstChar+strsub+"()";
     var isTrue = eval(strMethod);
     //判断输入数据是否有效
     if(isTrue)
     {
         var id_span=document.getElementById(id);
         id_span.innerHTML="输入有效";
         id_span.style.color="#060";
         id_span.setAttribute("active","1");
        
         //判断注册信息是否全部有效
         isSuccess();
        
     }
 
   
}

function checkUsername()
{
    //只简单的判断用户名的长度
    var id = document.getElementById("USERNAME");
    var username=id.value;    
    if(username.length > 10)
    {
      var id_span=document.getElementById(id.name);
      id_span.innerHTML = "*输入的用户名过长";
      id_span.style.color="#F00";
      
      id_span.setAttribute("active","0");
      return false;
    }
    else
    return true;
}
function checkPassword()
{
    var password = document.getElementById("PASSWORD").value;
    //当在password输入时，password2先清空
    document.getElementById("PASSWORD2").value="";
    document.getElementById("PASSWORD2").removeAttribute("disabled");
    return true;
}
function checkPassword2()
{
     var id=document.getElementById("PASSWORD");
     var id2=document.getElementById("PASSWORD2");
     var password = id.value;    
     var password2 = id2.value;
     if(password!=password2)
     {
        var id_span=document.getElementById(id2.name);
        id_span.innerHTML="* 密码不一致";
        id_span.style.color="#F00";
        
        id_span.setAttribute("active","0");
        return false;
     }
     return true;    
}
function checkIDNumber()
{
  var id=document.getElementById("IDNUMBER");
  var IDNumber =id.value;
  if(IDNumber.length<18||IDNumber.length>19)
  {
    var id_span=document.getElementById(id.name);
    id_span.innerHTML="* 身份证号长度有误";
    id_span.style.color="#F00";
    
    id_span.setAttribute("active","0");
    return false;
  }
  var expr=/([0]{18}[x|y]?)|([1]{18}[x|y]?)/i;
 
  //检验前18位是否有非数字字符
  var expr2=/\D/i;
 
 
  var subID=IDNumber.substring(0,IDNumber.length);
  //输入到第18位时检验是否存在非数字字符
  if(expr2.test(subID)&&IDNumber.length==18)
  {
     var id_span=document.getElementById(id.name);
     id_span.innerHTML="* 身份证号前18不可以为非数字字符";
     id_span.style.color="#F00";
     id_span.setAttribute("active","0");
     return false;
  }

  else
  {
      //如果存在19位检测第19位是否是x或y
     if(IDNumber.length==19)
     {
       if(IDNumber.charAt(IDNumber.length-1)!="x"&&IDNumber.charAt(IDNumber.length-1)!="y")
       {
           var id_span=document.getElementById(id.name);
           id_span.innerHTML="* 身份证号长度有误";
           id_span.style.color="#F00";
    
           id_span.setAttribute("active","0");
           return false;
       }
     }
  }
  //
  if(expr.test(IDNumber))
  {
     var id_span=document.getElementById(id.name);
     id_span.innerHTML="* 身份证号不可以全'0'或全'1'";
     id_span.style.color="#F00";
    
     id_span.setAttribute("active","0");
     return false;
  }
  return true;
}
function checkPhoneNumber()
{
// 利用正则表达式对输入数据匹配
   var id=document.getElementById("PHONENUMBER");
   var id_span=document.getElementById(id.name);
   var phone = id.value;
   if(phone.length>20)
   {
      id_span.innerHTML="* 电话号码太长";
      id_span.style.color="#F00";
      
      id_span.setAttribute("active","0");
      return false;
   }    
//匹配到一个非数字字符，则返回false
   var expr =  /\D/i;
   if(expr.test(phone))
   {
      id_span.innerHTML="* 不能输入非数字字符";
      id_span.style.color="#F00";
      
      id_span.setAttribute("active","0");
      return false;
   }
   return true;
   
}
function checkEmail()
{
// 利用正则表达式对输入数据匹配
   var id =  document.getElementById("EMAIL");
   var email = id.value;    
//以字母或数字开头，跟上@,字母数字以.com结尾
   var expr =  /^([0-9]|[a-z])+@([0-9]|[a-z])+(\.[c][o][m])$/i;
   if(!expr.test(email))
   {
      var id_span=document.getElementById(id.name);
      id_span.innerHTML="* 输入的邮箱格式有误";
      id_span.style.color="#F00";
      
      id_span.setAttribute("active","0");
      return false;
   }
   return true;
}

//点击输入框时激活该输入框
function active(obj)
{
  var id=document.getElementById(obj.id);
  id.style.backgroundColor="#FFF";
}

function lastCheck()
{
    //判断注册信息是否全部有效
         if(isSuccess())
         {
            document.getElementById("SUBMIT").removeAttribute("disabled");
         }
         else
         {
             document.getElementById("SUBMIT").setAttribute("disabled","disabled");
         }

}

//判断注册信息是否全部有效
function isSuccess()
{
   var username=document.getElementById("username").getAttribute("active");
   var password2=document.getElementById("password2").getAttribute("active");
   var IDNumber=document.getElementById("IDNumber").getAttribute("active");
   var phoneNumber=document.getElementById("phoneNumber").getAttribute("active");
   var email=document.getElementById("email").getAttribute("active");
   if(username==0|password2==0|IDNumber==0|phoneNumber==0|email==0)
   {
       //禁止注册
       document.getElementById("SUBMIT").setAttribute("disabled","disabled");
       return false;
   }
   else
       {
         //允许注册
            document.getElementById("SUBMIT").removeAttribute("disabled");
            return true;
       }
}

//当失去焦点时设置背景
function setBackground(obj)
{
   var id=obj.name;
   document.getElementById(id.toString().toUpperCase()).style.backgroundColor="#EEE";
}

//registerSuccess.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%
      String username=request.getParameter("username");
      String password=request.getParameter("password");
      String IDNumber=request.getParameter("IDNumber");
      String phoneNumber=request.getParameter("phoneNumber");
      String email=request.getParameter("email");
 %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>registerSuccess</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
   <!--  
    <link rel="stylesheet" type="text/css" href="css/userRegister.css">
   -->
  </head>
 
  <body>
  registerSuccess!!!!!! <br>
   <table id="TABLE" >
    <tbody>
        <tr>
           <td>用户名：</td>
           <td>
                 <%=username %>
           </td>
        </tr>
        <tr>
           <td>密码：</td>
           <td>
               <%=password %>
           </td>
        </tr>
       
        <tr>
           <td>身份证号：</td>
           <td>
              <%= IDNumber%>
           </td>
        </tr>
        <tr>
           <td>电话号码：</td>
           <td>
              <%=phoneNumber %>
           </td>
        </tr>
        <tr>
           <td>Email：</td>
           <td>
               <%=email %>
           </td>
        </tr>
    </tbody>  
    </table>
    <br>
  </body>
</html>


//CSS


@charset "utf-8";
/* CSS Document */
#BODY{
    text-align:center;
}

#TABLE{
    text-align:right;
    margin: auto;
    float:left;
}
#DIV_FORM{
    margin-left:300px;
}
#TABLE2{
    text-align:left;
    width:290px;
    height:240px;
}
#TABLE2 tr
{
    
    height:24px;
}
#TABLE2 span{
    display:none;
}

.cls_inpt
{
   height:30px;
   width:200px;
   background-color: #EEE;
   border-style: groove;
}

#SUBMIT{
    height:50px;
    width:90px;
    font-family: "微软雅黑", "新宋体";
    font-size: 18px;
}


不是很完善，还存在一些问题没处理，360浏览器下发起访问时，js代码不起作用，出不来效果？？火狐，谷歌，ie8试过都可正常运行。

Test_LD
关注
有关360浏览器对JS的不兼容解决办法
chuanao8829的博客
05-20 2078
昨天修改了FFB的验证脚本，IE、safari、firefox、chorme、QQ浏览器全数通过，唯独使用360浏览器测试时发生了问题。进一步测试，发现只有在360浏览器的极速模式下才会发生不兼容的状况。 通过查阅360浏览器的官网得知，该浏览器采用两个内核，分别是IE9和基于Webkit的...
JavaScript实现注册功能
weixin_45747067的博客
10-15 3871
1：直接效果图 当页面上所有input输入框内的内容全部符合正则表达式时，才可以注册成功 1.1当所有内容全部正确是 1.2：当所有内容全部正确时，并注册成功 1.3：当所有内容输入后，并且至少有一个没有成功后，注册页面失败后 2：代码 2.1：html代码 <body id="body"> <br /><br /><br /><br...
bootstrap与360浏览器不兼容问题
weixin_33857679的博客
01-17 376
我自己做了一个网站，使用的是bootstrap技术作为设计界面，但是使用360浏览器的时候，出现了图片不兼容的问题，总的来说是网页出现了不兼容的问题。 我的网站解决方法：在页面中加入了一个meta的标签<meta name="renderer" content="webkit">就把问题解决了。 转载于:https://www.cnblogs.com/fengj...
基于TSMC12nm的GPU低功耗设计与物理实现.pdf基于TSMC12nm的GPU低功耗设计与物理实现.pdf
最新发布
10-27
基于TSMC 12nm 的GPU 低功耗设计与物理实现 本资源摘要信息主要介绍基于TSMC 12nm工艺的GPU低功耗设计与物理实现的研究论文。论文的主要工作包括：完成了GPU模块的低功耗设计与物理实现、宏单元布局的优化设计、...
NM360钢与16Mn钢的焊接 (2012年)
05-07
NM360钢与16Mn钢的焊接技术主要集中在如何提升掘进机装载机构中部运输槽的耐磨性，由16Mn钢更换为具有更高耐磨性的NM360钢。NM360是经过微量合金元素调整后的新材料，具有较高的抗粘着磨损性能和抗冲蚀磨损性能。16...
具有“良品率意识”的IC实现流程瞄准65nm设计
12-09
Cadence设计系统公司承认,大批设计师不会购买其高端Encounter GXL系列工具，这种具有“良品率意识”的IC实现流程主要瞄准65nm及以下的设计。但是一小部分超大型设计加在一起也可以产生一笔不菲的收入。 Cadence前...
利用有机材料将摩尔定律扩展到7nm以下节点
01-19
透明的软性电子产品是今年欧洲半导体展(SEMICON Europa 2015)的重要主题之一...　“有机半导体将成为信息时代的‘原油’，届时，摩尔定律也将在7nm节点达到极限，”TU Dresden有机组件研究主席Stefan Mansfield表示，
Selenium 控制浏览器完成动态爬虫或者测试
liurenfeng007的博客
08-04 381
简介 Seleninm: 能控制你的浏览器, 有模有样地学人类”看”网页 安装 Selenium  因为 Selenium 需要操控你的浏览器, 所以安装起来比传统的 Python 模块要多几步. 先在 terminal 或者 cmd 用 pip 安装 selenium. 在pycharm中直接安装即可。 使用插件Katalon Recorder  有一个非常好用的插件——Katalo...
让360等双核浏览器默认使用极速模式
dianpinxiao7850的博客
02-06 2390
声明HTML5 <!DOCTYPE HTML> 使用官方配置 <meta name="renderer" content="webkit"> 浏览器内核控制Meta标签说明文档 背景介绍 由于众所周知的情况，国内的主流浏览器都是双核浏览器：基于Webkit内核用于常用网站的高速浏览。基于IE的内核用于兼容网银、旧版网站。以360...
击败Facebook Infer！360火线大起底
wpyily的专栏
06-05 1557
静态代码扫描领域风起云涌十余载，各个扫描工具拥趸众多，其中Facebook开源的Infer异军突起，独领风骚。然而360火线作为新的入场者凭什么能够击败Infer？是真有实力还是噱头吹捧？ Facebook 开源静态分析工具InferInfer是 Facebook 旗下开源的静态分析工具，至今已在Github上获得6700+ Star。Infer可以扫描JAVA、Objective-C和 C/C++
freemarker模板引擎
爱码士 的博客
10-26 553
在互联网软件内容网站中 一般首页的访问量大，为了提供首页的访问效率，一般 首页的内容以及其中的新闻等信息都可以实现html静态化 浏览器访问时 设置浏览器的缓存策略和生成静态页面的周期一致 可以使访问效率大大提升 同时配合cdn处理图片 js css等资源 可以在首页访问时 理论完全脱离数据库 降低应用压力
document.getElementById(i).style.display ='block';
热门推荐
受惊的牛冲向村里的牛棚
08-30 3万+
document.getElementById(i).style.display ='block';   //获取当前页面里面id为i的标签，改变该标签的样式，使其满眶显示。 document.getElementById(i).style.display ='none';   //获取当前页面里面id为i的标签，改变该标签的样式，使其不显示。 document.getElementById(
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值