首页
所有分类
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 URL编码和解码使用说明
Apr 12 Javascript
基于jquery的滑动样例代码
Nov 20 Javascript
一种新的javascript对象创建方式Object.create()
Dec 28 Javascript
JavaScript如何实现跨域请求
Aug 05 Javascript
Web打印解决方案之普通报表打印功能
Aug 29 Javascript
jquery实现input框获取焦点的方法
Feb 06 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
Feb 16 Javascript
深入理解ES7的async/await的用法
Sep 09 Javascript
bootstrap模态框关闭后清除模态框的数据方法
Aug 10 Javascript
vue使用video.js进行视频播放功能
Jul 18 Javascript
Openlayers实现图形绘制
Sep 28 Javascript
前端如何实现动画过渡效果
Feb 05 Javascript
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
接收函(23) 感言(394) 广播稿(323) 辞职信(98) 事迹材料(636) 证明书(326) 教学反思(909) 答谢词(97) 方案(1080) 检讨书(456)
You might like
海贼王：最美的悬赏令！
2020/03/02 日漫
JSON在PHP中的应用介绍
2012/09/08 PHP
ThinkPHP调用百度翻译类实现在线翻译
2014/06/26 PHP
PHP的Yii框架中过滤器相关的使用总结
2016/03/29 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
Mac系统下搭建Nginx+php-fpm实例讲解
2020/12/15 PHP
Javascript和Ajax中文乱码吐血版解决方案
2009/12/21 Javascript
JavaScript高级程序设计（第3版）学习笔记2 js基础语法
2012/10/11 Javascript
Javascript 加载和执行-性能提高篇
2012/12/28 Javascript
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
jquery iframe操作详细解析
2013/11/20 Javascript
jQuery中parents()和parent()的区别分析
2014/10/28 Javascript
javascript中setInterval的用法
2015/07/19 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
2016/05/11 Javascript
js制作简单的音乐播放器的示例代码
2017/08/28 Javascript
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
2020/06/11 Javascript
js面试题之异步问题的深入理解
2020/09/20 Javascript
OpenLayers加载缩放控件使用方法详解
2020/09/25 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
2020/12/14 Vue.js
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
Python 获取主机ip与hostname的方法
2018/12/17 Python
Python面向对象程序设计OOP入门教程【类,实例,继承,重载等】
2019/01/05 Python
Python实现12306火车票抢票系统
2019/07/04 Python
如何基于windows实现python定时爬虫
2020/05/01 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
UGG雪地靴德国官网：UGG德国
2016/11/19 全球购物
教师旷工检讨书
2014/01/18 职场文书
路政管理毕业自荐书范文
2014/02/10 职场文书
《生命的药方》教学反思
2014/04/08 职场文书
社区党建工作总结2015
2015/05/13 职场文书
推普标语口号大全
2015/12/26 职场文书
有关信念的名言语录集锦
2019/12/06 职场文书
win10搭建配置ftp服务器的方法
2022/08/05 Servers