js简单实现用户注册信息的校验代码

所属分类: 网络编程 / JavaScript 阅读数: 652
收藏 0 赞 0 分享

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">
<div id="DIV_FORM">
<form method="post" action="url" >
 <table id="TABLE">
    <tbody>
        <tr>
           <td>用户名:</td>
           <td>
              <input name="username"  id="USERNAME" type="text" onfocus="showDesc(this)" onblur="checkText(this)"/>
           </td>
        </tr>
        <tr>
           <td>密码:</td>
           <td>
             <input name="password" id="PASSWORD" type="text" onfocus="showDesc(this)" onblur="checkText(this)"/>
           </td>
        </tr>
        <tr>
           <td>确认密码:</td>
           <td>
             <input name="password2" id="PASSWORD2" type="text" onfocus="showDesc(this)" onblur="checkText(this)"/>
           </td>
        </tr>
        <tr>
           <td>身份证号:</td>
           <td>
             <input name="IDNumber" id="IDNUMBER" type="text" onfocus="showDesc(this)" onblur="checkText(this)"/>
           </td>
        </tr>
        <tr>
           <td>电话号码:</td>
           <td>
             <input name="phoneNumber" id="PHONENUMBER" type="text" onfocus="showDesc(this)" onblur="checkText(this)"/>
           </td>
        </tr>
        <tr>
           <td>Email:</td>
           <td>
               <input name="email" id="EMAIL" type="text" onfocus="showDesc(this)" onblur="checkText(this)"/>
           </td>
        </tr>
        <tr>
           <td> </td>
           <td align="right">
             <input type="submit" value="确认提交" />
           </td>
        </tr>
    </tbody> 
    </table>
   <table id="TABLE2" border="0">
       <tr><td><span id="username">请输入用户名</span></td></tr>
       <tr><td><span id="password">请输入密码</span></td></tr>
       <tr><td><span id="password2">请再次输入密码</span></td></tr>
       <tr><td><span id="IDNumber">请输入身份证号码</span></td></tr>
       <tr><td><span id="phoneNumber">请输入电话号码</span></td></tr>
       <tr><td><span id="email">请输入邮箱地址</span></td></tr>
    </table>
</form>
</div>
<script  type="text/javascript"  src="jslib/registerCheck.js">
</script>
</body>
</html>

registerCheck.js

复制代码 代码如下:

//输入框获得焦点时,显示提示内容
function showDesc(obj)

   var id= obj.name;
   document.getElementById(id).style.display="inline";
}

//输入框失去焦点时检验输入内容是否有效
function checkText(obj)
{
   //获取输入框的id值
   var id= obj.name;
   var text=document.getElementById(id.toString().toUpperCase()).value;

   //判断是否为空
   if(text.replace(/\s/g, "")=="")
   {
      document.getElementById(id).innerHTML="输入不能为空";
   }
   else
   {
     //组装方法
     //取首字母转换为大写,其余不变
     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)
     {
         document.getElementById(id).innerHTML="输入有效";
     }
   }

  
}

function checkUsername()
{
    //只简单的判断用户名的长度
    var id = document.getElementById("USERNAME");
    var username=id.value;   
    if(username.length > 10)
    {
      document.getElementById(id.name).innerHTML = "输入的用户名过长";
      return false;
    }
    else
    return true;
}
function checkPassword()
{
    var password = document.getElementById("PASSWORD").value;   
    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)
     {
        document.getElementById(id.name).innerHTML="密码不一致";
        return false;
     }
     return true;   
}
function checkIDNumber()
{
  var id=document.getElementById("IDNUMBER");
  var IDNumber =id.value;
  if(IDNumber.length<18||IDNumber.length>19)
  {
    document.getElementById(id.name).innerHTML="身份证号长度有误";
    return false;
  }
  var expr=/([0]{18}[x|y]?)|([1]{18}[x|y]?)/i;
  if(expr.test(IDNumber))
  {
     document.getElementById(id.name).innerHTML="身份证号不可以全'0'或全'1'";
     return false;
  }
  return true;
}
function checkPhoneNumber()
{
// 利用正则表达式对输入数据匹配
   var id=document.getElementById("PHONENUMBER");
   var phone = id.value;    
//匹配到一个非数字字符,则返回false
   var expr =  /\D/i;
   if(expr.test(phone))
   {
      document.getElementById(id.name).innerHTML="不能输入非数字字符";
      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))
   {
      document.getElementById(id.name).innerHTML="输入的邮箱格式有误";
      return false;
   }
   return true;
}

CSS

复制代码 代码如下:

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

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

更多精彩内容其他人还在看

微信小程序对接七牛云存储的方法

本篇文章主要介绍了小程序对接七牛云存储的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

jquery easyui如何实现格式化列

本篇文章主要介绍了jquery easyui如何实现格式化列 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

关于前后端json数据的发送与接收详解

这篇文章主要给大家介绍了关于前后端json数据发送与接收的相关资料,文中通过示例代码详细介绍了关于flask中的json数据接收和前端发送json数据等内容,需要的朋友可以参考借鉴,下面来一起看看吧。
收藏 0 赞 0 分享

Angular.js中上传指令ng-upload的基本使用教程

这篇文章主要给大家介绍了关于Angular.js中上传指令ng-upload的基本使用方法,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编来一起学习学习吧。
收藏 0 赞 0 分享

利用JavaScript如何查询某个值是否数组内

这篇文章主要给大家介绍了关于利用JavaScript如何查询某个值是否数组内的相关资料,文中通过示例代码分别介绍了实现该问题的一些解决方法是否可行,需要的朋友可以参考借鉴,下面跟着小编来一起学习学习吧。
收藏 0 赞 0 分享

webpack实现热加载自动刷新的方法

本文介绍了webpack实现热加载自动刷新的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Vue的Flux框架之Vuex状态管理器

本文内容主要参考官方教程,为了方便理解,用更加通俗的文字讲解Vuex,也原文内容做一些重点引用。希望会对你有所帮助。
收藏 0 赞 0 分享

Angular.js中$resource高大上的数据交互详解

这篇文章主要给大家介绍了关于Angular.js中$resource高大上的数据交互的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用angular.js具有一定的参考学习价值,需要的朋友们下面跟着小编来一起看看吧。
收藏 0 赞 0 分享

webpack配置sass模块的加载的方法

本篇文章主要介绍了webpack加载sass配置,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Vue框架中正确引入JS库的方法介绍

最近在学习使用vue框架,在使用中遇到了一个问题,查找相关资料终于找了正确的姿势,所以这篇文章主要给大家介绍了关于在Vue框架中正确引入JS库的方法,需要的朋友可以参考借鉴,下面来一起看看吧。
收藏 0 赞 0 分享
查看更多