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


Posted in Javascript onNovember 15, 2013

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;
}
Javascript 相关文章推荐
高性能web开发 如何加载JS,JS应该放在什么位置?
May 14 Javascript
treepanel动态加载数据实现代码
Dec 15 Javascript
使用jquery hover事件实现表格的隔行换色功能示例
Sep 03 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
May 12 Javascript
JavaScript设计模式之抽象工厂模式介绍
Dec 28 Javascript
JavaScript中boolean类型之三种情景实例代码
Nov 21 Javascript
js生成随机数方法和实例
Jan 17 Javascript
canvas 实现中国象棋
Feb 17 Javascript
jquery实现左右轮播切换效果
Jan 01 jQuery
微信小程序登陆注册功能的实现代码
Dec 10 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
Jan 08 Javascript
微信小程序实现日历签到
Sep 21 Javascript
jquery slibings选取同级其他元素的实现代码
Nov 15 #Javascript
jquery实现手风琴效果实例代码
Nov 15 #Javascript
jquery中插件实现自动添加用户的具体代码
Nov 15 #Javascript
用jquery中插件dialog实现弹框效果实例代码
Nov 15 #Javascript
javascript禁制后退键(Backspace)实例代码
Nov 15 #Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 #Javascript
当json键为数字时的取值方法解析
Nov 15 #Javascript
You might like
PHP 中的类
2006/10/09 PHP
利用php来自动调用不同服务器上的flash
2006/10/09 PHP
PHP 输出简单动态WAP页面
2009/06/09 PHP
工厂模式在Zend Framework中应用介绍
2012/07/10 PHP
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
jQuery 学习6 操纵元素显示效果的函数
2010/02/07 Javascript
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
原生JavaScript实现连连看游戏(附源码)
2013/11/05 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
jQuery获取单击节点对象的方法
2016/06/02 Javascript
jQuery复制节点用法示例(clone方法)
2016/09/08 Javascript
vue项目中用cdn优化的方法
2018/01/03 Javascript
详解如何构建一个Angular6的第三方npm包
2018/09/07 Javascript
vue项目中实现缓存的最佳方案详解
2019/07/11 Javascript
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
python pandas 对时间序列文件处理的实例
2018/06/22 Python
django使用LDAP验证的方法示例
2018/12/10 Python
python设定并获取socket超时时间的方法
2019/01/12 Python
使用NumPy读取MNIST数据的实现代码示例
2019/11/20 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
记录一下scrapy中settings的一些配置小结
2020/09/28 Python
python 使用cycle构造无限循环迭代器
2020/12/02 Python
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
世界著名的顶级牛排:Omaha Steak(奥马哈牛排)
2016/09/20 全球购物
美国知名的摄影器材销售网站:Adorama
2017/02/01 全球购物
职业道德模范事迹材料
2014/08/24 职场文书
平面设计师岗位职责
2014/09/18 职场文书
介绍信怎么写
2015/01/30 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
节约用电倡议书
2015/04/28 职场文书
三方合作意向书范本
2015/05/09 职场文书
山楂树之恋观后感
2015/06/11 职场文书
python 三边测量定位的实现代码
2021/04/22 Python
JavaScript实例 ODO List分析
2022/01/22 Javascript
十大最强格斗系宝可梦,超梦X仅排第十,第二最重格斗礼仪
2022/03/18 日漫