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 相关文章推荐
JavaScript 模拟类机制及私有变量的方法及思路
Jul 10 Javascript
js实现倒计时(距离结束还有)示例代码
Jul 24 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
Jan 27 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 Javascript
angularjs点击图片放大实现上传图片预览
Feb 24 Javascript
JS实现简单短信验证码界面
Aug 07 Javascript
微信小程序实现联动选择器
Feb 15 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
Apr 28 Javascript
jquery插件开发模式实例详解
Jul 20 jQuery
vue路由拦截器和请求拦截器知识点总结
Nov 08 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 Javascript
js回到页面指定位置的三种方式
Dec 17 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
thinkphp中memcache的用法实例
2014/11/29 PHP
php实现用手机关闭计算机(电脑)的方法
2015/04/22 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
PHP实现二叉树的深度优先与广度优先遍历方法
2015/09/28 PHP
php similar_text()函数的定义和用法
2016/05/12 PHP
thinkphp实现分页显示功能
2016/12/03 PHP
浅谈laravel5.5 belongsToMany自身的正确用法
2019/10/17 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
js实现省市联动效果的简单实例
2014/02/10 Javascript
常用的jQuery前端技巧收集
2014/12/24 Javascript
浅谈jQuery中replace()方法
2015/05/13 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
2016/03/09 Javascript
JS模拟的Map类实现方法
2016/06/17 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
Bootstrap轮播图的使用和理解4
2016/12/14 Javascript
HTML5开发Kinect体感游戏的实例应用
2017/09/18 Javascript
详解小程序原生使用ES7 async/await语法
2018/08/06 Javascript
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
浅析JavaScript异步代码优化
2019/03/18 Javascript
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
vue element upload实现图片本地预览
2019/08/20 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
2020/02/24 Javascript
Python爬虫实例_利用百度地图API批量获取城市所有的POI点
2018/01/10 Python
利用python实现汉字转拼音的2种方法
2019/08/12 Python
tesserocr与pytesseract模块的使用方法解析
2019/08/30 Python
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
西式婚礼主持词
2014/03/13 职场文书
共产党员公开承诺书
2014/03/25 职场文书
《埃及的金字塔》教学反思
2014/04/07 职场文书
六一儿童节活动总结
2014/08/27 职场文书
计算机实训报告总结
2014/11/05 职场文书
学校2014年度工作总结
2014/12/06 职场文书
病危通知书样本
2015/04/17 职场文书
2016年“我们的节日·清明节”活动总结
2016/04/01 职场文书
mysql自增长id用完了该怎么办
2022/02/12 MySQL