首页
所有分类
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 相关文章推荐
封装好的省市地区联动控件附下载
Aug 13 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
Jan 10 Javascript
input链接页面、打开新网页等等的具体实现
Dec 30 Javascript
jQuery中:not选择器用法实例
Dec 30 Javascript
程序员必知35个jQuery 代码片段
Nov 05 Javascript
ES6概念 Symbol toString()方法
Dec 25 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
Jun 01 Javascript
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
vue2.0 和 animate.css的结合使用
Dec 12 Javascript
JS性能优化实现方法及优点进行
Aug 30 Javascript
js面试题之异步问题的深入理解
Sep 20 Javascript
JS前端宏任务微任务及Event Loop使用详解
Jul 23 Javascript
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
脚本(1) hook(1) 数据备份(2) expdp(1) 外键约束(1) dict(1) callback(1) 热力图(1) 字符画(1) Vite(1)
You might like
如何使用Linux的Crontab定时执行PHP脚本的方法
2011/12/19 PHP
PHP输出时间差函数代码
2013/01/28 PHP
PHP异常Parse error: syntax error, unexpected T_VAR错误解决方法
2014/05/06 PHP
PHP curl使用实例
2015/07/02 PHP
Docker 如何布置PHP开发环境
2016/06/21 PHP
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
iScroll中事件点击触发两次解决方案
2015/03/11 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
AngularJS基础 ng-readonly 指令简单示例
2016/08/02 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
javascript 跨域问题以及解决办法
2017/07/17 Javascript
基于bootstrap实现多个下拉框同时搜索功能
2017/07/19 Javascript
浅谈vue,angular,react数据双向绑定原理分析
2017/11/28 Javascript
node内置调试方法总结
2018/02/22 Javascript
Nodejs使用Mongodb存储与提供后端CRD服务详解
2018/09/04 NodeJs
vue移动端项目缓存问题实践记录
2018/10/29 Javascript
小程序指纹验证的实现代码
2018/12/04 Javascript
javascript实现前端input密码输入强度验证
2020/06/24 Javascript
python中pygame模块用法实例
2014/10/09 Python
python中使用mysql数据库详细介绍
2015/03/27 Python
Python随机生成数模块random使用实例
2015/04/13 Python
在Django中同时使用多个配置文件的方法
2015/07/22 Python
Python使用遗传算法解决最大流问题
2018/01/29 Python
Python编写合并字典并实现敏感目录的小脚本
2019/02/26 Python
Python3.5迭代器与生成器用法实例分析
2019/04/30 Python
Python Django基础二之URL路由系统
2019/07/18 Python
新手入门学习python Numpy基础操作
2020/03/02 Python
五种Python转义表示法
2020/11/27 Python
迪斯尼假期（欧洲、中东及非洲）：Disney Holidays EMEA
2021/02/15 全球购物
体育学院毕业生自荐信
2013/11/03 职场文书
写求职信有什么意义
2014/02/17 职场文书
低碳环保倡议书
2014/04/14 职场文书
影子教师研修方案
2014/06/14 职场文书
与美同行演讲稿
2014/09/13 职场文书
小学生交通安全寄语
2015/02/27 职场文书
详解NumPy中的线性关系与数据修剪压缩
2022/05/25 Python