首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript实现仿网易通行证表单验证

Posted in Javascript onMay 25, 2015

介绍一下表单验证，不错哦：

如图

JavaScript实现仿网易通行证表单验证

JavaScript实现仿网易通行证表单验证

CSS代码

@charset "gb2312";
/* CSS Document */

body,dl,dt,dd,div,form {padding:0;margin:0;}

#header,#main{
  width:650px;
  margin:0 auto;
  }
.bg{
  background-image:url(../images/register_bg.gif);
  background-repeat:no-repeat;
  width:6px;
  height:6px;
  }
  .bg_top_left{
    background-position:0px 0px;
    }
  .bg_top_right{
    background-position:0px -6px;
    }
  .bg_end_left{
    background-position:0px -12px;
    }
  .bg_end_right{
    background-position:0px -18px;
    }
  .bg_top{
    border-top:solid 1px #666666;
    }
  .bg_end{
    border-bottom:solid 1px #666666;
    }
  .bg_left{
    border-left:solid 1px #666666;
    }
  .bg_right{
    border-right:solid 1px #666666;
    }


.content{
  padding:10px;
  }
  .inputs{
    border:solid 1px #a4c8e0;
    width:150px;
    height:15px;
  }
  
  .userWidth{
    width:110px;
    }
  .content div{
    float:left;
    font-size:12px;
    color:#000;
    }
  dl{
    clear:both;
    }
  dt,dd{
    float:left;
    }
  dt{
    width:130px;
    text-align:right;
    font-size:14px;
    height:30px;
    line-height:25px;
    }
  dd{
    font-size:12px;
    color:#666666;
    width:180px;
    }
/*当鼠标放到文本框时，提示文本的样式*/
.import_prompt{
  border:solid 1px #ffcd00;
  background-color:#ffffda;
  padding-left:5px;
  padding-right:5px;
  line-height:20px;
  }
/*当文本框内容不符合要求时，提示文本的样式*/
.error_prompt{
  border:solid 1px #ff3300;
  background-color:#fff2e5;
  background-image:url(../images/li_err.gif);
  background-repeat:no-repeat;
  background-position:5px 2px;
  padding:2px 5px 0px 25px;
  line-height:20px;
  }
/*当文本框内容输入正确时，提示文本的样式*/
.ok_prompt{
  border:solid 1px #01be00;
  background-color:#e6fee4;
  background-image:url(../images/li_ok.gif);
  background-repeat:no-repeat;
  background-position:5px 2px;
  padding:2px 5px 0px 25px;
  line-height:20px;
  }

js

// JavaScript Document

/*通过ID获取HTML对象的通用方法，使用$代替函数名称*/
function $(elementId){
  return document.getElementById(elementId);
  }
  
/*当鼠标放在通行证用户名文本框时，提示文本及样式*/  
function userNameFocus(){
  var userNameId=$("userNameId");
  userNameId.className="import_prompt";
  userNameId.innerHTML="1、由字母、数字、下划线、点、减号组成<br/>2、只能以数字、字母开头或结尾，且长度为4-18";
  }
  
/*当鼠标离开通行证用户名文本框时，提示文本及样式*/  
function userNameBlur(){
  var userName=$("userName");
  var userNameId=$("userNameId");
  var reg=/^[0-9a-zA-Z][0-9a-zA-Z_.-]{2,16}[0-9a-zA-Z]$/;
  if(userName.value==""){
    userNameId.className="error_prompt";
    userNameId.innerHTML="通行证用户名不能为空，请输入通行证用户名";
    return false;
    }
  if(reg.test(userName.value)==false){
    userNameId.className="error_prompt";
    userNameId.innerHTML="1、由字母、数字、下划线、点、减号组成<br/>2、只能以数字、字母开头或结尾，且长度为4-18";
    return false;
    }
    userNameId.className="ok_prompt";
    userNameId.innerHTML="通行证用户名输入正确";
    return true;
  }

/*当鼠标放在密码文本框时，提示文本及样式*/  
function pwdFocus(){
  var pwdId=$("pwdId");
  pwdId.className="import_prompt";
  pwdId.innerHTML="密码长度为6-16";
  }
  
/*当鼠标离开密码文本框时，提示文本及样式*/  
function pwdBlur(){
  var pwd=$("pwd");
  var pwdId=$("pwdId");
  if(pwd.value==""){
    pwdId.className="error_prompt";
    pwdId.innerHTML="密码不能为空，请输入密码";
    return false;
    }
  if(pwd.value.length<6 || pwd.value.length>16){
    pwdId.className="error_prompt";
    pwdId.innerHTML="密码长度为6-16";
    return false;
    }
    pwdId.className="ok_prompt";
    pwdId.innerHTML="密码输入正确";
    return true;
  }

  
/*当鼠标离开重复密码文本框时，提示文本及样式*/  
function repwdBlur(){
  var repwd=$("repwd");
  var pwd=$("pwd");
  var repwdId=$("repwdId");
  if(repwd.value==""){
    repwdId.className="error_prompt";
    repwdId.innerHTML="重复密码不能为空，请重复输入密码";
    return false;
    }
  if(repwd.value!=pwd.value){
    repwdId.className="error_prompt";
    repwdId.innerHTML="两次输入的密码不一致，请重新输入";
    return false;
    }
    repwdId.className="ok_prompt";
    repwdId.innerHTML="两次密码输入正确";
    return true;
  }
  
/*当鼠标放在昵称文本框时，提示文本及样式*/  
function nickNameFocus(){
  var nickNameId=$("nickNameId");
  nickNameId.className="import_prompt";
  nickNameId.innerHTML="1、包含汉字、字母、数字、下划线以及@!#$%&*特殊字符<br/>2、长度为4－20个字符<br/>3、一个汉字占两个字符";
  }
  
/*当鼠标离开昵称文本框时，提示文本及样式*/  
function nickNameBlur(){
  var nickName=$("nickName");
  var nickNameId=$("nickNameId");
  var k=0;
  var reg=/^([\u4e00-\u9fa5]|\w|[@!#$%&*])+$/;  // 匹配昵称
  var chinaReg=/[\u4e00-\u9fa5]/g;  //匹配中文字符
  if(nickName.value==""){
    nickNameId.className="error_prompt";
    nickNameId.innerHTML="昵称不能为空，请输入昵称";
    return false;
    }
  if(reg.test(nickName.value)==false){
    nickNameId.className="error_prompt";
    nickNameId.innerHTML="只能由汉字、字母、数字、下划线以及@!#$%&*特殊字符组成";
    return false;
    }
  
  var len=nickName.value.replace(chinaReg,"ab").length; //把中文字符转换为两个字母，以计算字符长度
  if(len<4||len>20){
    nickNameId.className="error_prompt";
    nickNameId.innerHTML="1、长度为4－20个字符<br/>2、一个汉字占两个字符";
    return false;
    }
  
    nickNameId.className="ok_prompt";
    nickNameId.innerHTML="昵称输入正确";
    return true;
  }  

/*当鼠标放在关联手机号文本框时，提示文本及样式*/  
function telFocus(){
  var telId=$("telId");
  telId.className="import_prompt";
  telId.innerHTML="1、手机号码以13，15，18开头<br/>2、手机号码由11位数字组成";
  }
  
/*当鼠标离开关联手机号文本框时，提示文本及样式*/  
function telBlur(){
  var tel=$("tel");
  var telId=$("telId");
  var reg=/^(13|15|18)\d{9}$/;
  if(tel.value==""){
    telId.className="error_prompt";
    telId.innerHTML="关联手机号码不能为空，请输入关联手机号码";
    return false;
    }
  if(reg.test(tel.value)==false){
    telId.className="error_prompt";
    telId.innerHTML="关联手机号码输入不正确，请重新输入";
    return false;
    }
    telId.className="ok_prompt";
    telId.innerHTML="关联手机号码输入正确";
    return true;
  }  


/*当鼠标放在保密邮箱文本框时，提示文本及样式*/  
function emailFocus(){
  var emailId=$("emailId");
  emailId.className="import_prompt";
  emailId.innerHTML="请输入您常用的电子邮箱";
  }
  
/*当鼠标离开保密邮箱文本框时，提示文本及样式*/  
function emailBlur(){
  var email=$("email");
  var emailId=$("emailId");
  var reg=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
  if(email.value==""){
    emailId.className="error_prompt";
    emailId.innerHTML="保密邮箱不能为空，请输入保密邮箱";
    return false;
    }
  if(reg.test(email.value)==false){
    emailId.className="error_prompt";
    emailId.innerHTML="保密邮箱格式不正确，请重新输入";
    return false;
    }
    emailId.className="ok_prompt";
    emailId.innerHTML="保密邮箱输入正确";
    return true;
  }  

/*表单提交时验证表单内容输入的有效性*/
function checkForm(){
   var flagUserName=userNameBlur();
   var flagPwd=pwdBlur();
   var flagRepwd=repwdBlur();
   var flagNickName=nickNameBlur();
   var flagTel=telBlur();
   var flagEmail=emailBlur();
   
   userNameBlur();
   pwdBlur();
   repwdBlur();
   nickNameBlur();
   telBlur();
   emailBlur();
   
   if(flagUserName==true &&flagPwd==true &&flagRepwd==true &&flagNickName==true&&flagTel==true&flagEmail==true){
     return true;
     }
    else{
      return false;
      }
  
  }

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=gb2312" />
<title>新用户注册页面</title>
<link type="text/css" rel="stylesheet" href="css/register.css" />
<script type="text/javascript" src="js/register.js"></script>
</head>

<body>
<div id="header"><img src="images/register_logo.gif" alt="logo"/></div>
<div id="main">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
  <td class="bg bg_top_left"></td>
  <td class="bg_top"></td>
  <td class="bg bg_top_right"></td>
 </tr>
 <tr>
  <td class="bg_left"></td>
  <td class="content">
   <form action="" method="post" name="myform" onsubmit="return checkForm()">
    <dl>
     <dt>通行证用户名：</dt>
     <dd><input type="text" id="userName" class="inputs userWidth" onfocus="userNameFocus()" onblur="userNameBlur()" /> @163.com</dd>
     <div id="userNameId"></div>
    </dl>
     <dl>
     <dt>登录密码：</dt>
     <dd><input type="password" id="pwd" class="inputs" onfocus="pwdFocus()" onblur="pwdBlur()"/></dd>
     <div id="pwdId"></div>
    </dl>
     <dl>
     <dt>重复登录密码：</dt>
     <dd><input type="password" id="repwd" class="inputs" onblur="repwdBlur()"/></dd>
     <div id="repwdId"></div>
    </dl>
    <dl>
     <dt>性别：</dt>
     <dd><input name="sex" type="radio" value="" checked="checked"/>男 <input name="sex" type="radio" value="" />女 </dd>
    </dl>
    <dl>
     <dt>真实姓名：</dt>
     <dd><input type="text" id="realName" class="inputs" onblur="aa()" /></dd>
    </dl>
    <dl>
     <dt>昵称：</dt>
     <dd><input type="text" id="nickName" class="inputs" onfocus="nickNameFocus()" onblur="nickNameBlur()"/></dd>
     <div id="nickNameId"></div>
    </dl>
    <dl>
     <dt>关联手机号：</dt>
     <dd><input type="text" id="tel" class="inputs" onfocus="telFocus()" onblur="telBlur()" /></dd>
     <div id="telId"></div>
    </dl>
    <dl>
     <dt>保密邮箱：</dt>
     <dd><input type="text" id="email" class="inputs" onfocus="emailFocus()" onblur="emailBlur()" /></dd>
     <div id="emailId"></div>
    </dl>
    <dl>
     <dt></dt>
     <dd><input name=" " type="image" src="images/button.gif"/></dd>
    </dl>
   </form>
  </td>
  <td class="bg_right"></td>
 </tr>
 <tr>
   <td class="bg bg_end_left"></td>
  <td class="bg_end"></td>
  <td class="bg bg_end_right"></td>
 </tr>
</table>

</div>
</body>
<script type="text/javascript">
  function aa(){
    
    var reg = /^[\u4e00-\u9fa5]$/;
    var name = document.getElementById("realName").value;
    
    if(reg.test(name)==false){
      alert("只能为汉字");
    }else{
      alert("正确");  
    }
      
  }
</script>

</html>

以上所述就是本文的全部内容了，希望大家能够喜欢。

JavaScript实现仿网易通行证表单验证

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript CSS修改学习第三章 修改样式表
Feb 19 Javascript
根据json字符串生成Html的一种方式
Jan 09 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
Jun 15 Javascript
AngularJS入门教程之Hello World!
Dec 06 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
Nov 25 Javascript
js实现上一页下一页的效果【附代码】
Mar 10 Javascript
JS中的数组方法笔记整理
Jul 26 Javascript
js实现数字递增特效【仿支付宝我的财富】
May 05 Javascript
Vue官方文档梳理之全局配置
Nov 22 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
Dec 22 Javascript
微信小程序数据存储与取值详解
Jan 30 Javascript
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
js+cookies实现悬浮购物车的方法
May 25 #Javascript
手机开发必备技巧：javascript及CSS功能代码分享
May 25 #Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
May 25 #Javascript
jquery 构造函数在表单提交过程中修改数据
May 25 #Javascript
js实现鼠标划过给div加透明度的方法
May 25 #Javascript
javascript实现youku的视频代码自适应宽度
May 25 #Javascript
微信WeixinJSBridge API使用实例
May 25 #Javascript
i5 10400(1) React(6) i7 6700(1) R72E(1) win10(43) i5 9400(1) GTX1660(1) ipad(1) 对讲机(1) win11(40)
You might like
smarty模板引擎基础知识入门
2015/03/30 PHP
基于Swoole实现PHP与websocket聊天室
2016/08/03 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
PHP依赖注入原理与用法分析
2018/08/21 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
javascript之函数直接量(function(){})()
2007/06/29 Javascript
直接生成打开窗口代码，不必下载
2008/05/14 Javascript
JavaScript学习点滴 call、apply的区别
2010/10/22 Javascript
基于prototype扩展的JavaScript常用函数库
2010/11/30 Javascript
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
javascript根据时间生成m位随机数最大13位
2014/10/30 Javascript
移动Web中图片自适应的两种JavaScript解决方法
2015/06/18 Javascript
JavaScript字符串常用的方法
2016/03/10 Javascript
深入解析JavaScript中函数的Currying柯里化
2016/03/19 Javascript
在html中引入外部js文件,并调用带参函数的方法
2016/10/31 Javascript
jQuery排序插件tableSorter使用方法
2017/02/10 Javascript
对angular4子路由&amp;辅助路由详解
2018/10/09 Javascript
Layui table field初始化加载时进行隐藏的方法
2019/09/19 Javascript
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
[31:01]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS Orenda
2014/05/23 DOTA
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
Python设计模式之策略模式实例详解
2019/01/21 Python
Python按照list dict key进行排序过程解析
2020/04/04 Python
Python接收手机短信的代码整理
2020/08/02 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
css sprite简单实例
2016/05/23 HTML / CSS
工程测量与监理专业应届生求职信
2013/11/27 职场文书
毕业学生推荐信
2013/12/01 职场文书
入团者的自我评价分享
2013/12/02 职场文书
毕业生实习鉴定
2013/12/11 职场文书
洗发露广告词
2014/03/14 职场文书
元旦促销方案
2014/03/15 职场文书
销售助理岗位职责
2015/02/11 职场文书
关于五一放假的通知
2015/08/18 职场文书
Python 的演示平台支持 WSGI 接口的应用
2022/04/20 Python