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

JS实现的通用表单验证插件完整实例

Posted in Javascript onAugust 20, 2015

本文实例讲述了JS实现的通用表单验证插件。分享给大家供大家参考。具体如下：

这里演示一个通用的JS表单验证插件代码。使用方法：第一步：需设定表单项数据类型，第二步：实例表单验证，验证错误提示说明（程序有自带相关错误提示，可自定义每项验证错误提示时文本，只需添加msg）。

运行效果截图如下：

JS实现的通用表单验证插件完整实例

在线演示地址如下：

具体代码如下：

<!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> 
body,td{font:12px Verdana;color:#333}
input,textarea,select,td,th{font:12px Verdana;color:#333;border:1px solid #999;background:#fff}
table{border-collapse:collapse;}
th{font:bold 12px Verdana; text-align:right;padding:5px;}
td{padding:3px;line-height:1.8;}
input{height:20;}
textarea{width:80%;height:50px;overfmin:auto;}
form{display:inline}
/*输入框样式*/
input[type=text],input[type=password],textarea{border:1px solid #ccc;padding:2px;border-radius:1px;box-shadow:0 1px 2px rgba(0,0,0,0.1) inset;outline:medium none;line-height:25px;
-webkit-transition:all 0.15s ease-in 0s;
-moz-transition:all 0.15s ease-in 0s;
-o-transition:all 0.15s ease-in 0s;
font-family:"Microsoft YaHei",Verdana,Arial;
font-size:14px;
vertical-align:top;
}
input[type=text],input[type=password]{height:25px;}
input[type=text]:focus,input[type=password]:focus,textarea:focus{/*border-color:rgba(82,168,236,0.8);*/border-color:#52a8ec;box-shadow:0 1px 2px rgba(0,0,0,0.1) inset,0 0 5px rgba(82,168,236,0.6);outline:0 none;}
</style>
</head>
<body>
<h2>使用方法</h2>
<p>第一步：需设定表单项数据类型</p>
<p style="padding:10px;border:2px dashed #ea0; background-color:#ffe;"><input type="text" name="name" <strong style="color:#f00;">dataType="chinese[2,8]"</strong> /></p>
<p>第二步：实例表单验证</p>
<p style="padding:10px;border:2px dashed #ea0; background-color:#ffe;"><script type="text/javascript"><strong style="color:#f00;">new ValidatorForm(表单对象);</strong> </script></p>
<h3>dataType可选参数</h3>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <th colspan="3" style="text-align:left; background-color:#eee;">基础验证</th>
 </tr>
 <tr>
  <th>email</th>
  <td>Email地址</td>
  <td rowspan="11"><strong>均可配合中括号使用</strong>，例如<br />
  长度验证：chinese[1,10]　为限制只能输入1-10个全角字符，<strong>注：一个全角字符长度为2</strong><br />
  数字大小验证：number[18,26]　为限制只能输入18-26的数字<br />
  日期范围验证：date[1970-1-1,2012-12-12]　为限制1970-1-1至2012-12-12日期<br />
  <strong>上限及下限设定</strong><br />
  下限设定：chinese[1,]　至少输入1个或以上有效字符<br />上限设定：chinese[,6]　最多输入6个有效字符<br />number和date格式也类式</td>
 </tr>
 <tr>
  <th>tel</th>
  <td>电话：支持手机/固话，识别区号及全半角逗号分隔多项</td>
 </tr>
 <tr>
  <th>mobile</th>
  <td>手机号码</td>
 </tr>
 <tr>
  <th>url</th>
  <td>网址</td>
 </tr>
 <tr>
  <th>number</th>
  <td>数字</td>
 </tr>
 <tr>
  <th>english</th>
  <td>英文字母</td>
 </tr>
 <tr>
  <th>chinese</th>
  <td>全角字符</td>
 </tr>
 <tr>
  <th>username</th>
  <td>帐号：字母开头4-20位的字母数字加下划线组合</td>
 </tr>
 <tr>
  <th>password</th>
  <td>密码：4-20位字母数字或@!#$%^&*.~组合</td>
 </tr>
 <tr>
  <th>date</th>
  <td>日期</td>
 </tr>
 <tr>
  <th>length</th>
  <td>长度：格式“length[最小长度,最大长度]”</td>
 </tr>
 <tr>
  <th colspan="3" style="text-align:left; background-color:#eee;">其它验证</th>
 </tr>
 <tr>
  <th>Compare</th>
  <td colspan="2">值对比：格式“Compare[比较符比较对象,比较类型]”<br />
  比较符包括[>,>=,<,<=,!=,=]<br />
  比较对象为表单项name,当表单有同名name值多项时取第一项<br />
  比较类型可选值[text,number,date]分别为[字符比较,数字比较,日期比较]，留空时对当前项值自动识别后对比<br />
  例如Compare[=password]</td>
 </tr>
 <tr>
  <th>exec</th>
  <td colspan="2">自定义函数：格式“exec[函数名]” <br />
  传入当前输入框对象，返回json格式“{stat:结果[true/false],msg:提示文本,msgCss:样式[className],inCss:输入框样式[className]}”，stat为验证结果是否正确为必须返回项，其它项留空使用默认设置[inCss暂时未使用]
  <br /></td>
 </tr>
</table>
<h3>验证错误提示说明</h3>
<p>程序有自带相关错误提示，可自定义每项验证错误提示时文本，只需添加msg</p>
<p style="padding:10px;border:2px dashed #ea0; background-color:#ffe;"><input type="text" name="name" dataType="chinese[2,8]" <strong style="color:#f00;">msg="姓名必需填写1-4个汉字"</strong> /></p>
<form name="theForm" id="theForm" action="" method="get">
 <h2>表单验证示例</h2>
 <table align="center" width="100%">
 <tr>
  <td>真实姓名：</td><td><input type="text" name="Name" dataType="chinese[1,]" /><span msgbox="1">请输入真实姓名</span>
  <span id="vfMsgBox_Name"></span>
  </td>
 </tr>
 <tr>
  <td>英文名：</td><td><input type="text" name="Nick" dataType="english[1,10]" /></td>
 </tr>
 <tr>
  <td>主页：</td><td><input type="text" name="Homepage" dataType="url" /></td>
 </tr>
 <tr>
  <td>密码：</td><td><input name="password" type="text" dataType="password" /></td>
 </tr>
 <tr>
  <td>重复：</td><td><input name="password2" type="text" dataType="Compare[=password'密码]" /></td>
 </tr>
 <tr>
  <td>信箱：</td><td><input type="text" name="email" dataType="email[1,]" /></td>
 </tr>
 <tr>
  <td>信箱：</td><td><input type="text" name="email2" dataType="email Compare[=email'信箱]" /></td>
 </tr>
 <tr>
  <td>邮编：</td><td><input type="text" name="QQ" dataType="number[100000,999999]" /></td>
 </tr>
 <tr>
  <td>日期：</td><td><input type="text" name="date" dataType="date" />
  <input type="text" name="date2" dataType="Compare[>date'起始日期,date]" />
  </td>
 </tr>
 <tr>
  <td>年龄：</td><td><input type="text" name="Year" dataType="number[18,28]" /></td>
 </tr>
 <tr>
  <td>年龄1：</td><td><input type="text" name="Year1" dataType="number[,18]" /></td>
 </tr>
 <tr>
  <td>电话：</td><td><input type="text" name="Phone" dataType="tel" /></td>
 </tr>
 <tr>
  <td>手机：</td><td><input type="text" name="mobile" dataType="mobile" /></td>
 </tr>
 <tr>
  <td>生日：</td><td><input type="text" name="Birthday" dataType="date[1980-1-1,2012-5-20]" /></td>
 </tr>
 <tr>
  <td>自我介绍：</td><td><textarea name="Description" style="width:99%;" dataType="length[0,150] exec[testFunction]">中文是一个字</textarea>
  <span>自定义验证程序,长度大于50触发自定义错误及样式，长度大于150系统自带错误</span>
  </td>
 </tr>
 <tr>
  <td colspan="2"><input name="Submit" type="submit" value="确定提交"></td>
 </tr>
 </table>
</form>
<style type="text/css"> 
/*输入项样式*/
input.vf_inCorrect,textarea.vf_inCorrect{box-shadow:0 1px 2px rgba(3,139,0,0.2) inset;border-color:#90b983;color:#2d7c14;}
input.vf_inError,textarea.vf_inError{box-shadow:0 1px 2px rgba(139,23,0,0.2) inset,0 0 5px rgba(139,23,0,0.6);border-color:#d46060;color:#b40000;}
.vf_Normal,.vf_Correct,.vf_Error,.vf_Focus{vertical-align:middle;display:inline-block;padding:3px;font-size:12px;margin-left:5px; background:#eee;}
.vf_Normal{color:#777;}
.vf_Focus{color:#000;}/*提示*/
.vf_Correct{color:#20800d;display:none;}/*验证通过*/
.vf_Error{color:#f00;}/*错误*/
/*自定义样式*/
input.inTestClass,textarea.inTestClass{box-shadow:0 0 2px rgba(0,0,0,0.3) inset,0 0 5px rgba(139,23,0,0.6);border-color:#00f;color:#eee;background-color:#333;}
.TestClass_OK{color:#fff;background-color:#080;}
.TestClass_Err{color:#fff;background-color:#c00;}
</style>
<script type="text/javascript"> 
//添加事件
function addEvent(o,e,f){
 if(window.attachEvent){o.attachEvent("on"+e,f)}else if(window.addEventListener){o.addEventListener(e,f,false);}else{o["on"+e]=f;}
}
//取消事件
function removeEvent(o,e,f){
 if(window.detachEvent){o.detachEvent("on"+e,f);}else if(window.removeEventListener){o.removeEventListener(e,f,false);}else{o["on"+e]=null;}
}
// class是否存在
function hasClass(obj,sClass){var reg = new RegExp("(^|\\s)" + sClass + "(\\s|$)");return reg.test(obj.className)}
//阻止浏览器的默认行为
function stopDefault(e){if(e&&e.preventDefault){e.preventDefault();}else{window.event.returnValue=false;}return false;}
//阻断事件冒泡
function stopBubble(e){if(e&&e.stopPropagation){e.stopPropagation();}else{window.event.cancelBubble=true;}}
function GetID(s){return document.getElementById(s);}
//创建元素
function creElm(o,pN,t){
 var tmp=document.createElement(t||'div'),p;
 for(p in o){tmp[p]=o[p];}
 return pN?pN.appendChild(tmp):document.body.appendChild(tmp);
}
//计算字符串长度[全角算2长度]
function strLength(str){return str.replace(/[^\x00-\xff]/g,"**").length;}
function SetCss(o,k,s){
 var c=o.className.split(' '),n=0,nCSS='';
 for(var i=0;i<c.length;i++)
 {
  if(c[i]!=k){nCSS+=(nCSS=='')?c[i]:' '+c[i];}
  else{n=1;}
 }
 if(s=='add'){nCSS+=(nCSS=='')?k:' '+k;}
 o.className=nCSS;
}
//自定义验证函数
function testFunction(o){
 var val=o.value,len=Math.floor(strLength(val));
 return {stat:len<50,msg:'已输入<strong>'+len+'</strong>个字符；',msgCss:(len<50?'TestClass_OK':'TestClass_Err'),inCss:null};
}
function ValidatorForm(f,Stat,Validator){
 var vf=this;
 //正则,最小值,最大值,提示消息
 this.Validator={
  email:[/^(\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*)?$/,0,0,'Email地址填写错误'],
  tel:[/^((0?1[358]\d{9})[,，]?|((0(10|2[0-9]{1}|[3-9]{1}\d{2})[-_－—]?)?\d{7,8})[,，]?)*$/,0,0,'电话号码填写错误'],
  mobile:[/^(0?1[358]\d{9})*$/,0,12,'手机号码填写错误'],
  url:[/^(http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*)?$/,0,0,'网址填写错误'],
  number:[/^\d*$/,0,0,'只能填写数字格式'],
  english:[/^[A-Za-z]*$/,0,0,'只能输入半角英文字母'],
  chinese:[/^[\u0391-\uFFE5]*$/,0,0,'只能输入全角中文'],
  username:[/^[a-zA-Z]{1}\w*$/,4,20,'帐号需由字母开头的4-20位字母、数字或下划线组成'],
  password:[/^[\@A-Za-z0-9\!\#\$\%\^\&\*\.\~]*$/,4,20,'密码长度4-20,请勿输入特殊字符'],
  date:[/^((\d{4})[\-|\.|\/](\d{1,2})[\-|\.|\/](\d{1,2}))?$/,'','','请填写如2012-1-1格式日期！'],
  Compare:[/^[\s\S]*$/,0,0,''],
  length:[/^[\s\S]*$/,0,0,''],
  exec:[/^[a-zA-Z]{1}\w*$/,0,0,'']
 }
 //消息Box样式及框入框样式
 this.Stat={
  tag:'span',     //提示文本标签
  msgNormal:'vf_Normal',  //正常样式
  msgCorrect:'vf_Correct', //正确
  msgError:'vf_Error',  //错误
  msgFocus:'vf_Focus',  //焦点
  inCorrect:'vf_inCorrect', //文本框正确
  inError:'vf_inError',  //错误
  inFocus:'vf_inFocus'  //焦点
 }
 if(Validator){for(var i in this.Validator){this.Validator[i]=Validator[i]!==undefined?Validator[i]:this.Validator[i];}}
 if(Stat){for(var i in this.Stat){this.Stat[i]=Stat[i]!==undefined?Stat[i]:this.Stat[i];}}
 this.Form=f;
 var fn=f.elements.length,i,j,_dataType;
 for(i=0;i<fn;i++){
  _dataType=f.elements[i].getAttribute('dataType');
  _dataType=_dataType?_dataType.split(' '):[];
  for(j=0;j<_dataType.length;j++)
  {
   if(this.Validator[_dataType[j].split('[')[0]]){
    f.elements[i].onblur=(function(o){return function(){vf.CheckData(o);}})(f.elements[i]);
    if(f.elements[i].tagName.toUpperCase()=='TEXTAREA'){
     f.elements[i].onkeyup=(function(o){
      return function(){
       var MsgTag=vf.GetMsgBox(o);
       MsgTag.innerHTML='已输入<strong>'+Math.floor(strLength(o.value))+'</strong>个字符；';
      }
     })(f.elements[i]);
    }
   }
  }
 }
 //提交表单
 this.submit=function(e){
  var fn=vf.Form.elements.length,i,j,_Err=0,_Focus,_Msg='',t,_dataType;
  for(i=0;i<fn;i++){
   _dataType=f.elements[i].getAttribute('dataType');
   _dataType=_dataType?_dataType.split(' '):[];
   for(j=0;j<_dataType.length;j++)
   {
    if(vf.Validator[_dataType[j].split('[')[0]]){
     t=vf.CheckData(f.elements[i]);
     if(t&&t[0]==false){
      _Err++;
      if(!_Focus){_Focus=f.elements[i];}
      _Msg+='\n'+f.elements[i].name+' '+t[1];
      break;
     }
    }
   }
  }
  if(_Err>0){
   e&&stopDefault(e);
   //_Msg //提示文本不完善，未使用，直接提示错误数量
   alert('共有'+_Err+'项填写错误！');
   _Focus.focus();
  }
 }
 addEvent(f,'submit',vf.submit);
}
ValidatorForm.prototype={
 //验证内容是否正确
 CheckData:function(o){
  var _dataType=o.getAttribute('dataType'),i,s=true,_Msg='',_msgCss,_inCss,_mdt,min,max,_dt;
  _dataType=_dataType?_dataType.split(' '):[];
  for(i=0;s&&i<_dataType.length;i++){
   if(this.Validator[_dataType[i].split('[')[0]]){
    _dt=_dataType[i].split('[')[0];
    //自定义验证函数
    if(_dt=='exec'){
     _mdt=_dataType[i].match(/^exec\[([a-zA-Z]{1}\w*)\]$/);
//     alert(typeof(eval(_mdt[1])))
     if(_mdt==null){return false;}
     try 
     { 
      if(typeof(eval(_mdt[1]))=="function") 
      {
       /*
       自定义函数返回json
       stat:结果[true/false],msg:提示文本,msgCss:样式[className],inCss:输入框样式[className]
       */
       var _exec=eval(_mdt[1])(o);
       s=s&&_exec.stat;
       var MsgTag=this.GetMsgBox(o);
       _Msg=_exec.msg||'';
       if(_exec.msgCss){_msgCss=_exec.msgCss;}
//       if(_mdt.inCss){_inCss=_mdt.inCss;}
      }
     }
     catch(e)
     {
      alert('not function');
      return false;
     } 
    }
    //值对比
    else if(_dt=='Compare'){
     _mdt=_dataType[i].match(/^Compare\[(=|!=|>|>=|<|<=)([^,]+),?(number|text|date)?\]$/);
     if(_mdt==null){return false;}
 //    alert(_mdt);
     _mdt[2]=(_mdt[2]+'\'').split('\'');
     if(_mdt[2][1]==''){_mdt[2][1]=_mdt[2][0];}
     if(!this.Form[_mdt[2][0]]||this.Form[_mdt[2][0]].value==''){return false;}
     var v2=this.Form[_mdt[2][0]].length>1?this.Form[_mdt[2][0]][0].value:this.Form[_mdt[2][0]].value;
     s=s&&this.Check_Compare(o.value,_mdt[1],v2,_mdt[3]);
     //生成提示文本
     var cc;
     switch (_mdt[1]){
     case ">": cc='大于';break;
     case ">=": cc='大于或等于';break;
     case "<": cc='小于';break;
     case "<=": cc='小于或等于';break;
     case "!=": cc='不一至';break;
     default: cc='一至';
     }
     if(!s){_Msg=(_mdt[1]=='='||_mdt[1]=='!=')?'必须和'+_mdt[2][1]+cc:'必须'+cc+_mdt[2][1];}
    }
    //日期格式验证
    else if(_dt=='date'){
     _mdt=_dataType[i].match(/^date\[(\d{4}[\-|\.|\/]\d{1,2}[\-|\.|\/]\d{1,2})?,(\d{4}[\-|\.|\/]\d{1,2}[\-|\.|\/]\d{1,2})?\]$/);
     if(_mdt==null){s=s&&this.Validator[_dt][0].test(o.value);}
     else{
      min=_mdt?_mdt[1]:this.Validator[_dt][1];
      max=_mdt?_mdt[2]:this.Validator[_dt][2];
      s=s&&this.Validator[_dt][0].test(o.value)&&this.Check_Date(o.value,min,max);
     }
    }
    //其它类型验证
    else{
     _mdt=_dataType[i].match(/^([^[]+)\[(\d*),(\d*)\]$/);
     min=_mdt?_mdt[2]:this.Validator[_dt][1];
     max=_mdt?_mdt[3]:this.Validator[_dt][2];
     s=s&&this.Validator[_dt][0].test(o.value);
     if(s){s=s&&this.Check_Num((_dt=='number'?o.value-0:strLength(o.value)),min,max);}
     else{_Msg=this.Validator[_dt][3];}
    }
    //生成提示文本
    if(_Msg==''&&!s)
    {
     if(min||max){
      if(_dt=='number'){
       _Msg=min&&max?'只能输入'+min+'-'+max+'范围数字':min?'只能输入大于'+min+'数字':'只能输入小于'+max+'数字';
      }
      else if(_dt=='date'){
       _Msg=min&&max?'只能输入'+min+'至'+max+'范围日期':min?'只能输入大于'+min+'日期':'只能输入小于'+max+'日期';
      }
      else{
       _Msg=min&&max?'需输入'+min+'-'+max+'个有效字符':min?'至少需输入'+min+'个有效字符':'最多只能输入'+max+'个有效字符';
      }
     }else{_Msg=this.Validator[_dt][3];}
    }
   }
  }
  if(s){this.AddCorrect(o,{msg:_Msg,msgCss:_msgCss,inCss:_inCss});}else{this.AddError(o,{msg:_Msg,msgCss:_msgCss,inCss:_inCss});}
  return [s,_Msg];
 },
 //验证正确
 AddCorrect:function(o,s){
  var MsgTag=this.GetMsgBox(o);
  MsgTag.innerHTML=s.msg||'';
  this.vfSetCss(MsgTag,s.msgCss||this.Stat.msgCorrect,1);
  this.vfSetCss(o,s.inCss||this.Stat.inCorrect,0);
 },
 //验证错误
 AddError:function(o,s){
  var MsgTag=this.GetMsgBox(o);
  MsgTag.innerHTML=o.getAttribute('msg')||s.msg;
  this.vfSetCss(MsgTag,s.msgCss||this.Stat.msgError,1);
  this.vfSetCss(o,s.inCss||this.Stat.inError,0);
 },
 //获取/创建提示Box
 GetMsgBox:function(o){
  var MsgTag=GetID('vfMsgBox_'+o.name);
  if(!MsgTag){
   MsgTag=o.nextSibling;
   while(MsgTag&&MsgTag.nodeType!=1){MsgTag=MsgTag.nextSibling;}
   if(!MsgTag||MsgTag.tagName.toUpperCase()!=this.Stat.tag.toUpperCase()||!MsgTag.getAttribute('msgbox')){
    MsgTag=creElm({},o.parentNode,this.Stat.tag);
    MsgTag.setAttribute('msgbox','1');
    if(o.nextSibling.nextSibling){o.parentNode.insertBefore(MsgTag,o.nextSibling);}
   }
  }
  return MsgTag;
 },
 //验证值范围
 Check_Num:function(v,min,max){
  v=v||0;
  if(min&&max){return v>=min-0&&v<=max-0;}
  else if(min){return v>=min-0;}
  else if(max){return v<=max-0;}
  return true;
 },
 //值对比
 //值,逻辑运算,对比值,对比类型[number-数字,date-日期,text-文本]
 Check_Compare:function(v,operator,v2,DataType){
  //为空时自动判断格式
  if(!DataType){
   if(this.Validator.number[0].test(v)){DataType='number';}
   else if(this.Validator.date[0].test(v)){DataType='date';}
   else{DataType='text'}
  }
  //数据格式转换
  if(DataType=='number'){v-=0;v2-=0;}
  else if(DataType=='date'){
   var _mdt=v.match(this.Validator.date[0]);
   if(_mdt==null){return false;}
   v=new Date(_mdt[2],_mdt[3]-1,_mdt[4])-new Date;
   _mdt=v2.match(this.Validator.date[0]);
   if(_mdt==null){return false;}
   v2=new Date(_mdt[2],_mdt[3]-1,_mdt[4])-new Date;
  }
  switch (operator){
  case ">": return v>v2;break;
  case ">=": return v>=v2;break;
  case "<": return v<v2;break;
  case "<=": return v<=v2;break;
  case "!=": return v!=v2;break;
  default: return v==v2;
  }
 },
 //日期验证范围
 Check_Date:function(v,min,max){
  var _mdt=v.match(this.Validator.date[0]);
  if(_mdt==null){return false;}
  v=new Date(_mdt[2],_mdt[3]-1,_mdt[4])-new Date;
  _mdt=min.match(this.Validator.date[0]);
  min=_mdt==null?null:new Date(_mdt[2],_mdt[3]-1,_mdt[4])-new Date;
  _mdt=max.match(this.Validator.date[0]);
  max=_mdt==null?null:max=new Date(_mdt[2],_mdt[3]-1,_mdt[4])-new Date;
  return this.Check_Num(v,min,max);
 },
 //设置样式
 vfSetCss:function(o,css,s){
  if(!s){
   SetCss(o,this.Stat.inCorrect,'del');
   SetCss(o,this.Stat.inError,'del');
   SetCss(o,this.Stat.inFocus,'del');
  }
  if(s){o.className=css;}else{SetCss(o,css,'add');}
 }
}
new ValidatorForm(GetID('theForm'));
</script>

希望本文所述对大家的javascript程序设计有所帮助。

JS实现的通用表单验证插件完整实例

- Author -

佚名

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

Javascript 相关文章推荐
JavaScript 利用Cookie记录用户登录信息
Dec 08 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
Nov 19 Javascript
js getBoundingClientRect() 来获取页面元素的位置
Nov 25 Javascript
jquery自动填充勾选框即把勾选框打上true
Mar 24 Javascript
js调出上下文菜单的实例
Dec 17 Javascript
JS关闭窗口时产生的事件及用法示例
Aug 20 Javascript
Jquery调用iframe父页面中的元素及方法
Aug 23 Javascript
Vuejs第十三篇之组件——杂项
Sep 09 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
Sep 20 Javascript
在Vue项目中使用d3.js的实例代码
May 01 Javascript
微信小程序实现展示评分结果功能
Feb 15 Javascript
vue 组件基础知识总结
Jan 26 Vue.js
jquery Easyui快速开发总结
Aug 20 #Javascript
纯jquery实现模仿淘宝购物车结算
Aug 20 #Javascript
js实现按钮颜色渐变动画效果
Aug 20 #Javascript
jQuery+HTML5加入购物车代码分享
Oct 29 #Javascript
jQuery地图map悬停显示省市代码分享
Aug 20 #Javascript
jQuery超赞的评分插件（8款）
Aug 20 #Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 #Javascript
导游词(322) 实用文书(952) 申请书(21) AngularJS(2) 观后感(479) 通知(159) 波段(1) HAM-2000(1) 慰问信(53) 文书(291)
You might like
DOMXML函数笔记
2006/10/09 PHP
PHP版本升级到7.x后wordpress的一些修改及wordpress技巧
2015/12/25 PHP
Yii安装与使用Excel扩展的方法
2016/07/13 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
thinkPHP5.1框架路由::get、post请求简单用法示例
2019/05/06 PHP
JavaScript实现的一个计算数字步数的算法分享
2014/12/06 Javascript
JavaScript日期时间与时间戳的转换函数分享
2015/01/31 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
2015/05/28 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
引用jquery框架后出错的解决方法
2016/08/09 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
H5手机端多文件上传预览插件
2017/04/21 Javascript
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
2019/08/02 Javascript
[50:11]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第三场
2018/04/09 DOTA
python读取csv文件示例(python操作csv)
2014/03/11 Python
使用Python获取Linux系统的各种信息
2014/07/10 Python
Python用list或dict字段模式读取文件的方法
2017/01/10 Python
Python编程之event对象的用法实例分析
2017/03/23 Python
Python实现读取及写入csv文件的方法示例
2018/01/12 Python
5个很好的Python面试题问题答案及分析
2018/01/19 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
python实现随机调用一个浏览器打开网页
2018/04/21 Python
Python线程之定位与销毁的实现
2019/02/17 Python
Python抓新型冠状病毒肺炎疫情数据并绘制全国疫情分布的代码实例
2020/02/05 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
GafasWorld哥伦比亚：网上购买眼镜
2017/11/28 全球购物
德国汽车零件和汽车配件网上商店：kfzteile24
2018/11/14 全球购物
欧缇丽加拿大官方网站：Caudalie加拿大
2019/07/18 全球购物
UNIX特点都有哪些
2016/04/05 面试题
会计系毕业求职信
2014/08/07 职场文书
计生个人工作总结
2015/02/28 职场文书
个人年终总结开头
2015/03/06 职场文书
优秀大学生申请书
2019/06/24 职场文书
各类场合主持词开场白范文集锦
2019/08/16 职场文书