js实现表单验证常用JS表单验证

CSS代码

@charset "gb2312";

/* CSS Document */

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

#header,#main{

    width:650px;

    margin: 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 #;

        }

    .bg_end{

        border-bottom:solid 1px #;

        }

    .bg_left{

        border-left:solid 1px #;

        }

    .bg_right{

        border-right:solid 1px #;

        }

.content{

    padding:10px;

    }

    .inputs{

        border:solid 1px #a4c8e0;

        width:150px;

        height:15px;

    }

    .userWidth{

        width:110px;

        }

    .content div{

        float:left;

        font-size:12px;

        color:#;

        }

    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:#;

        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;

    }

// 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=/^[-9a-zA-Z][-9a-zA-Z_.-]{,}[-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< || pwd.value.length>){

        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=;

    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<||len>){

        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=/^(||)\d{}$/;

    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]{,}){,}$/;

    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;

            }

    }

!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="data:images/register_logo.gif" alt="logo"/></div>

<div id="main">

 <table width="100%" border="" cellspacing="" cellpadding="">

  <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()" /> @.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="data: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>

/*

输入：str

返回：

如果全是空返回true,否则返回false

*/

function isNull(str) {

if (str == "") return true;

var regu = "^[ ]+$";

var re = new RegExp(regu);

return re.test(str);

}

/*

检查输入字符串是否只由英文字母和数字和下划线组成

输入：

s：字符串

返回：

如果通过验证返回true,否则返回false

*/

function isNumberOr_Letter(s) {//判断是否是数字或字母

var regu = "^[0-9a-zA-Z\_]+$";

var re = new RegExp(regu);

if (re.test(s)) {

return true;

} else {

return false;

}

}

/*

检查输入对象的值是否符合E-Mail格式

输入：str 输入的字符串

返回：如果通过验证返回true,否则返回false

*/

function isEmail(str) {

var myReg = /^[-_A-Za-z0-]+@([_A-Za-z0-]+\.)+[A-Za-z0-]{,}$/;

if (myReg.test(str)) return true;

return false;

}

/*

检查输入手机号码是否正确

输入：

s：字符串

返回：

如果通过验证返回true,否则返回false

*/

function checkMobile(s) {

var regu = /^[][-][-]{}$/;

var re = new RegExp(regu);

if (re.test(s)) {

return true;

} else {

return false;

}

}

/*

检查输入字符串是否是数字

输入：

str：字符串

返回：

如果通过验证返回true,否则返回false

*/

function isNumber(str)

{

    var reg = /^\d+$/;

    if (reg.test(str))

       return true;

    else

       return false;

}

/*

检查输入字符串是否符合正整数格式

输入：

s：字符串

返回：

如果通过验证返回true,否则返回false

*/

function isNumber(s) {

var regu = "^[0-9]+$";

var re = new RegExp(regu);

if (s.search(re) != -) {

return true;

} else {

return false;

}

}

/* 检查输入字符串是否符合国内固话或者传真格式

输入： s：字符串  格式例如：020-87110252

返回： 如果通过验证返回true,否则返回false */

function isTel(s){

  var reg=/^((\d{,})-)?(\d{,})(-(\d{,}))?$/;

  if(!reg.test(s))    return   false  ；

  return   true 

｝

/*检查输入字符串是否符合身份证格式

输入： s：字符串

返回： 如果通过验证返回true,否则返回false */

function isIDno(strIDno) {      var aCity={:"北京",:"天津",:"河北",:"山西",:"内蒙古",:"辽宁",:"吉林",:"黑龙江",:"上海",:"江苏",:"浙江",:"安徽",:"福建",:"江西",:"山东",:"河南",:"湖北",:"湖南",:"广东",:"广西",:"海南",:"重庆",:"四川",:"贵州",:"云南",:"西藏",:"陕西",:"甘肃",:"青海",:"宁夏",:"新疆",:"台湾",:"香港",:"澳门",:"国外"};  

    var iSum = ;

    var info = "";  

   //var strIDno = obj.value;  

   var idCardLength = strIDno.length;  

    if(!/^\d{}(\d|x)$/i.test(strIDno)&&!/^\d{}$/i.test(strIDno))      {     

    //alert("非法身份证号");     

    return false;     }  

    //在后面的运算中x相当于数字10,所以转换成a

    strIDno = strIDno.replace(/x$/i,"a");      

if(aCity[parseInt(strIDno.substr(,))]==null)     {       

  //alert("非法地区");      

   return false;     }        

  if (idCardLength==)     {   

      sBirthday=strIDno.substr(,)+"-"+Number(strIDno.substr(,))+"-"+Number(strIDno.substr(,));  

       var d = new Date(sBirthday.replace(/-/g,"/"))   

      if(sBirthday!=(d.getFullYear()+"-"+ (d.getMonth()+) + "-" + d.getDate()))         {          

          //alert("非法生日");          

   return false;         }    

       for(var i = ;i>=;i --)          

        iSum += (Math.pow(,i) % ) * parseInt(strIDno.charAt( - i),);    

       if(iSum%!=)         {    

         //alert("非法身份证号");      

       return false;         }   

  }     else if (idCardLength==)     {   

      sBirthday = "" + strIDno.substr(,) + "-" + Number(strIDno.substr(,)) + "-" + Number(strIDno.substr(,));   

      var d = new Date(sBirthday.replace(/-/g,"/"))    

     var dd = d.getFullYear().toString() + "-" + (d.getMonth()+) + "-" + d.getDate();     

       if(sBirthday != dd)         {          

   //alert("非法生日");           

  return false;         }  

   }    

return true; }

/*

校验ip地址的格式

输入：strIP：ip地址

返回：如果通过验证返回true,否则返回false；

*/

function isIP(strIP) {

if (isNull(strIP)) return false;

var re = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/g //匹配IP地址的正则表达式

if (re.test(strIP)) {

if (RegExp.$ <  && RegExp.$ <  && RegExp.$ <  && RegExp.$ < ) return true;

}

return false;

}

/* 检查开始日期是否小于等于结束日期

输入： s：字符串 开始日期 格式：2014-3-23

e：字符串 结束日期 格式：2014-3-25

返回： 如果通过开始日期小于等于结束日期返回true,否则返回false */

function data_compare(s,e) {  

var arr=s.split("-");

 var starttime=new Date(arr[],arr[],arr[]);

 var starttimes=starttime.getTime();  

 var arrs=e.split("-");  

var endtime=new Date(arrs[],arrs[],arrs[]);

 var endtimes=endtime.getTime();  

 if(starttimes>=endtimes)  {

  //alert('开始时间大于离开时间，请检查');  

return false;  

}  else

  return true;

}

/* 检查输入字符串是否只由汉字组成

输入： s：字符串

返回： 如果通过验证返回true,否则返回false */

function isZh(str){

 var reg = /^[\u4e00-\u9fa5]+$/;

 if (reg.test(str)) return true;

 return false;

}

/*

检查输入字符串是否符合金额格式

格式定义为带小数的正数，小数点后最多三位

输入：

s：字符串

返回：

如果通过验证返回true,否则返回false

*/

function isMoney(s) {

var regu = "^[0-9]+[\.][0-9]{0,3}$";

var re = new RegExp(regu);

if (re.test(s)) {

return true;

} else {

return false;

}

}

/*

用途：检查输入对象的值是否符合端口号格式

输入：str 输入的字符串

返回：如果通过验证返回true,否则返回false

*/

function isPort(str) {

return (isNumber(str) && str < );

}

 /*

用途：字符1是包含字符串2

输入：str1：字符串；str2：被包含的字符串

返回：如果通过验证返回true,否则返回false

*/

function isMatch(str1, str2) {

var index = str1.indexOf(str2);

if (index == -) return false;

return true;

}

js实现表单验证常用JS表单验证的更多相关文章

表单：!!!常用JS： form 表单代码
手机(文本框): <input type="text" name="" maxlength="11" placeholder=&quo ...
js 常用正则表达式表单验证代码
正则表达式使用详解简介简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.其作用如下:测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一 ...
js常用正则表达式表单验证代码
方法一: var re=/正则表达式/; re.test($("txtid").val()) 方法二: $("txtid").val.match(/正则 ...
★★★【卡法常用js库】： js汇合表单验证 cookie设置日期格式电话手机号码 email 整数小数金额检查参数长度
[卡法常用js库]: js汇合表单验证 cookie设置日期格式电话手机号码 email 整数小数金额检查参数长度 // +---------------------- ...
自制“低奢内”CSS3注册表单，包含JS验证哦。请别嫌弃,好吗？。
要求必备知识基本了解CSS语法,初步了解CSS3语法知识.和JS/JQuery基本语法. 开发环境 Adobe Dreamweaver CS6 演示地址演示地址预览截图(抬抬你的鼠标就可以看到 ...
ajax和servlet交互，表单日历插件，表单验证，form.js
我的index.jsp <body> <a>点我获取数据</a> <table border=1px> <tr> <td>ID& ...
Js表单验证控件-02 Ajax验证
在<Js表单验证控件(使用方便,无需编码)-01使用说明>中,写了Verify.js验证控件的基本用法,基本可以满足大多数验证需求,如果涉及服务端的验证,则可以通过Ajax. Ajax验证 ...
利用JS提交表单的几种方法和验证(必看篇)
第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <scr ...
Form表单提交，js验证
Form表单提交,js验证 1, Onclick() 2, Onsubmit() Button标签 input (属性 submit button )标签 Input type=button ...

随机推荐

pvoid64 pvoid
如果需要某一个结构体,既在kernel space用,又在user space用,如 typedef struct { PVOID data; int size; }binary,pbinary; 上 ...
3-HOP: A High-Compression Indexing Scheme for Reachability Query
title: 3-HOP: A High-Compression Indexing Scheme for Reachability Query venue: SIGMOD'09 author: Ruo ...
【性能诊断】StackOverflow引发的“网络”及系统稳定性问题
背景描述: 最近一个项目的系统管理员和业务运维人员分别反馈问题: 1.应用系统每个月会有一两次宕机,需要管理员手工重启IIS: 2.财务模块一个功能经常报网络错误“网络异常,请检查网络连接”“Unab ...
Netty系列之Netty百万级推送服务设计要点
1. 背景 1.1. 话题来源最近很多从事移动互联网和物联网开发的同学给我发邮件或者微博私信我,咨询推送服务相关的问题.问题五花八门,在帮助大家答疑解惑的过程中,我也对问题进行了总结,大概可以归纳为 ...
VR定制开发、AR定制开发（长年承接虚拟现实、增强现实应用、VR游戏定制开发，北京公司，可签合同）
Cardboard SDK for Unity的使用上一篇文章作为系列的开篇,主要是讲了一些虚拟现实的技术和原理,本篇就会带领大家去看一看谷歌的Cardboard SDK for Unity,虽然目 ...
Android线程间通信更新UI的方法（重点分析EventBus）
Android的UI更新只能在UI线程中,即主线程.子线程中如果要进行UI更新,都是要通知主线程来进行. 几种实现方式总结如下,欢迎补充. 1.runOnUiThread() 子线程中持有当前Acti ...
SQLite 函数大全
http://blog.sina.com.cn/s/blog_48e2ea3401012031.html
MFC ADO连接Sql Server数据库报无效指针的问题
相关症状: Win7sp1上编译的ADO程序无法在低版本系统上运行,创建ADO时提示错误:0x80004002 解决办法如下: 1.下载: http://download.microsoft.c ...
修改eclipse中包的显示结构为树形
Node.js的process.nextTick(callback)理解
Node.js是单线程的,基于事件循环,非阻塞 IO的.事件循环中使用一个事件队列,在每个时间点上,系统只会处理一个事件,即使电脑有多个CPU核心,也无法同时并行的处理多个事件.因此,node.js适 ...

js实现表单验证 常用JS表单验证

js实现表单验证 常用JS表单验证的更多相关文章

随机推荐

热门专题

js实现表单验证常用JS表单验证

js实现表单验证常用JS表单验证的更多相关文章