首页
所有分类
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 相关文章推荐
js判断选择的时间是否大于今天的代码
Aug 20 Javascript
通过JS来判断页面控件是否获取焦点
Jan 03 Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 Javascript
JavaScript代码复用模式详解
Nov 07 Javascript
本地存储localStorage用法详解
Jul 31 Javascript
JS实现的简单四则运算计算器功能示例
Sep 27 Javascript
vue结合Echarts实现点击高亮效果的示例
Mar 17 Javascript
vue动态路由配置及路由传参的方式
May 23 Javascript
详解react native页面间传递数据的几种方式
Nov 07 Javascript
vue中的适配px2rem示例代码
Nov 19 Javascript
小程序实现订单倒计时功能
Apr 23 Javascript
vue 出现data-v-xxx的原因及解决
Aug 04 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
C/C++(1) ctypes(1) python-pcl(1) dll(1) 公共键(1) Anaconda(2) 历史记录(1) 遍历文件夹(1) 有序排列(1) html标准库(1)
You might like
php扩展ZF――Validate扩展
2008/01/10 PHP
PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
2019/05/06 PHP
QQ邮箱的一个文本编辑器代码
2007/03/14 Javascript
疯掉了,尽然有js写的操作系统
2007/04/23 Javascript
随窗体滑动的小插件sticky源码
2013/06/21 Javascript
jQuery级联操作绑定事件实例
2014/09/02 Javascript
初始Nodejs
2014/11/08 NodeJs
jQuery实现自动与手动切换的滚动新闻特效代码分享
2015/08/27 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
Javascript 基础---Ajax入门必看
2016/07/06 Javascript
jQuery右下角悬浮广告实例
2016/10/17 Javascript
js 打开新页面在屏幕中间的实现方法
2016/11/02 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
2017/03/25 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
2018/01/30 Javascript
laypage+SpringMVC实现后端分页
2019/07/27 Javascript
js回调函数原理与用法案例分析
2020/03/04 Javascript
基于p5.js 2D图像接口的扩展（交互实现）
2020/11/30 Javascript
[02:52]2014DOTA2西雅图国际邀请赛 CIS战队巡礼
2014/07/07 DOTA
深入理解python中的atexit模块
2017/03/07 Python
基于python3 OpenCV3实现静态图片人脸识别
2018/05/25 Python
Python中应该使用%还是format来格式化字符串
2018/09/25 Python
kafka-python批量发送数据的实例
2018/12/27 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
详解Python Matplotlib解决绘图X轴值不按数组排序问题
2019/08/05 Python
pycharm创建scrapy项目教程及遇到的坑解析
2019/08/15 Python
python字符串下标与切片及使用方法
2020/02/13 Python
Python3 mmap内存映射文件示例解析
2020/03/23 Python
python 实现客户端与服务端的通信
2020/12/23 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
2021/02/07 Python
行政前台岗位职责
2013/12/04 职场文书
学校七一活动方案
2014/01/19 职场文书
对公司合理化的建议书
2014/03/12 职场文书
唐山大地震的观后感
2015/06/05 职场文书
省级三好学生主要事迹材料
2015/11/03 职场文书
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python