vue 登录滑动验证

之前别人都是用jq写的，自己整理了一下开始使用<el-form-item label="验证"><div class="form-inline-input"><div class="code-box" id="code-box">

前端小白16

10163人浏览 · 2018-04-23 18:26:55

前端小白16 · 2018-04-23 18:26:55 发布

之前别人都是用jq写的，自己整理了一下开始使用

   < 
  el-form-item 
  label= 
  "验证"> 
 

   < 
  div 
  class= 
  "form-inline-input"> 
 

   < 
  div 
  class= 
  "code-box" 
  id= 
  "code-box"> 
 

   < 
  input 
  type= 
  "text" 
  name= 
  "code" 
  class= 
  "code-input" /> 
 

   < 
  p></ 
  p> 
 

   < 
  span>>>></ 
  span> 
 

   </ 
  div> 
 

   </ 
  div> 
 

   </ 
  el-form-item> 
 

vue代码

 
  //获取元素距离页面边缘的距离 
 
  getOffset( 
  box, 
  direction){ 
 
  var setDirection 
  = (direction 
  == 
  'top') 
  ? 
  'offsetTop' 
  : 
  'offsetLeft' ; 
 
  var offset 
  = box[setDirection]; 
 
  var parentBox 
  = 
  box. 
  offsetParent; 
 
  while(parentBox){ 
 
   offset 
  +=parentBox[setDirection]; 
 
   parentBox 
  = 
  parentBox. 
  offsetParent; 
 
   } 
 
   parentBox 
  = 
  null; 
 
  return 
  parseInt(offset); 
 
   },

 
      moveCode( 
  code, 
  _this){ 
 
 
  var fn 
  = {codeVluae : code}; 
 
 
  var box 
  = 
  document. 
  querySelector( 
  "#code-box"), 
 

   progress 
  = 
  box. 
  querySelector( 
  "p"), 
 

   codeInput 
  = 
  box. 
  querySelector( 
  '.code-input'), 
 

   evenBox 
  = 
  box. 
  querySelector( 
  "span"); 
 
 
  //默认事件 
 
 
  var boxEven 
  = [ 
  'mousedown', 
  'mousemove', 
  'mouseup']; 
 
 
  //改变手机端与pc事件类型 
 
 
  if( 
  typeof 
  document. 
  ontouchstart 
  == 
  'object'){ 
 

   boxEven 
  = [ 
  'touchstart', 
  'touchmove', 
  'touchend']; 
 

   } 
 
 
  var goX,offsetLeft,deviation,evenWidth,endX; 
 
 
  function 
  moveFn( 
  e){ 
 
 
  e. 
  preventDefault(); 
 

   e 
  = (boxEven[ 
  '0'] 
  == 
  'touchstart') 
  ? 
  e. 
  touches[ 
  0] 
  : e 
  || 
  window. 
  event; 
 

   endX 
  = 
  e. 
  clientX 
  - goX; 
 

   endX 
  = (endX 
  > 
  0) 
  ? (endX 
  > evenWidth) 
  ? evenWidth 
  : endX 
  : 
  0; 
 
 
  if(endX 
  > evenWidth 
  * 
  0.7){ 
 
 
  progress. 
  innerText 
  = 
  '松开验证'; 
 
 
  progress. 
  style. 
  backgroundColor 
  = 
  "#66CC66"; 
 

   } 
  else{ 
 
 
  progress. 
  innerText 
  = 
  ''; 
 
 
  progress. 
  style. 
  backgroundColor 
  = 
  "#FFFF99"; 
 

   } 
 
 
  progress. 
  style. 
  width 
  = endX 
  +deviation 
  + 
  'px'; 
 
 
  evenBox. 
  style. 
  left 
  = endX 
  + 
  'px'; 
 

   } 
 
 
  function 
  removeFn() { 
 
 
  document. 
  removeEventListener(boxEven[ 
  '2'],removeFn, 
  false); 
 
 
  document. 
  removeEventListener(boxEven[ 
  '1'],moveFn, 
  false); 
 
 
  if(endX 
  > evenWidth 
  * 
  0.7){ 
 
 
  progress. 
  innerText 
  = 
  '验证成功'; 
 
 
  progress. 
  style. 
  width 
  = evenWidth 
  +deviation 
  + 
  'px'; 
 
 
  evenBox. 
  style. 
  left 
  = evenWidth 
  + 
  'px' 
 
 
  codeInput. 
  value 
  = 
  fn. 
  codeVluae; 
 
 
  evenBox. 
  onmousedown 
  = 
  null; 
 
 
  _this. 
  ruleForm. 
  verification 
  = 
  true; 
 

   } 
  else{ 
 
 
  progress. 
  style. 
  width 
  = 
  '0px'; 
 
 
  evenBox. 
  style. 
  left 
  = 
  '0px'; 
 

   } 
 

   }; 
 
 
  function 
  getOffset( 
  box, 
  direction){ 
 
 
  var setDirection 
  = (direction 
  == 
  'top') 
  ? 
  'offsetTop' 
  : 
  'offsetLeft' ; 
 
 
  var offset 
  = box[setDirection]; 
 
 
  var parentBox 
  = 
  box. 
  offsetParent; 
 
 
  while(parentBox){ 
 

   offset 
  +=parentBox[setDirection]; 
 

   parentBox 
  = 
  parentBox. 
  offsetParent; 
 

   } 
 

   parentBox 
  = 
  null; 
 
 
  return 
  parseInt(offset); 
 

   }; 
 
 
  evenBox. 
  addEventListener(boxEven[ 
  '0'], 
  function( 
  e) { 
 

   e 
  = (boxEven[ 
  '0'] 
  == 
  'touchstart') 
  ? 
  e. 
  touches[ 
  0] 
  : e 
  || 
  window. 
  event; 
 

   goX 
  = 
  e. 
  clientX, 
 

   offsetLeft 
  = 
  getOffset(box, 
  'left'), 
 

   deviation 
  = 
  this. 
  clientWidth, 
 

   evenWidth 
  = 
  box. 
  clientWidth 
  - deviation, 
 

   endX; 
 
 
  document. 
  addEventListener(boxEven[ 
  '1'],moveFn, 
  false); 
 
 
  document. 
  addEventListener(boxEven[ 
  '2'],removeFn, 
  false); 
 

   }, 
  false); 
 
 
  fn. 
  setCode 
  = 
  function( 
  code){ 
 
 
  if(code) 
 
 
  fn. 
  codeVluae 
  = code; 
 

   } 
 
 
  fn. 
  getCode 
  = 
  function(){ 
 
 
  return 
  fn. 
  codeVluae; 
 

   } 
 
 
  fn. 
  resetCode 
  = 
  function(){ 
 
 
  evenBox. 
  removeAttribute( 
  'style'); 
 
 
  progress. 
  removeAttribute( 
  'style'); 
 
 
  codeInput. 
  value 
  = 
  ''; 
 

   }; 
 
 
  return fn; 
 

       } 
 

调用

 
  mounted(){ 
 
  var _this 
  = 
  this; 
 
  // window.addEventListener('load',function(){ 
 
  //code是后台传入的验证字符串 
 
  var code 
  = 
  "jsaidaisd656", 
 
   codeFn 
  = 
  new 
  _this. 
  moveCode(code,_this); 
 
  // }); 
 
   }

验证样式

 
 .form-inline-input{ 

     
 border: 
 1 
 px 
 solid 
 #dadada; 

 
 border-radius: 
 5 
 px; 

}

 
 .form-inline-input 
 input, 

 
 .code-box{ 

     
 padding: 
 0 
 3 
 px; 

 
 width: 
 298 
 px; 

 
 height: 
 40 
 px; 

 
 color: 
 #fff; 

 
 text-shadow: 
 1 
 px 
 1 
 px 
 1 
 px 
 black; 

 
 background: 
 #efefef; 

 
 border: 
 0; 

 
 border-radius: 
 5 
 px; 

     
 outline: 
 none; 

}

 
 .code-box{ 

     
 position: 
 relative; 

}

 
 .code-box 
 p, 

 
 .code-box 
 span{ 

     
 display: 
 block; 

     
 position: 
 absolute; 

     
 left: 
 0; 

     
 height: 
 40 
 px; 

     
 text-align: 
 center; 

     
 line-height: 
 40 
 px; 

     
 border-radius: 
 5 
 px; 

 
 padding: 
 0; 

 
 margin: 
 0; 

}

 
 .code-box 
 span{ 

     
 width: 
 40 
 px; 

     
 background-color: 
 #fff; 

     
 font-size: 
 16 
 px; 

     
 cursor: 
 pointer; 

 
 margin-right: 
 1 
 px; 

}

 
 .code-box 
 p{ 

     
 width: 
 0; 

     
 background-color: 
 #FFFF99; 

     
 overflow: 
 hidden; 

     
 text-indent: 
 -20 
 px; 

     
 transition: 
 background 
 1 
 s 
 ease-in; 

}

 
 .code-box 
 .code-input{ 

     
 display: 
 none; 

}

 
 .code-box 
 .code-input{ 

     
 display: 
 none; 

}

 
  .form-inline-input{ 
 

      
  border: 
  1 
  px 
  solid 
  #dadada; 
 

 
  border-radius: 
  5 
  px; 
 

}

 
  .form-inline-input 
  input,

 
  .code-box{ 
 

      
  padding: 
  0 
  3 
  px; 
 

 
  width: 
  298 
  px; 
 

 
  height: 
  40 
  px; 
 

 
  color: 
  #fff;

 
  text-shadow: 
  1 
  px 
  1 
  px 
  1 
  px 
  black; 
 

 
  background: 
  #efefef;

 
  border: 
  0;

 
  border-radius: 
  5 
  px; 
 

      
  outline: 
  none;

}

 
  .code-box{ 
 

      
  position: 
  relative;

}

 
  .code-box 
  p,

 
  .code-box 
  span{

      
  display: 
  block;

      
  position: 
  absolute;

      
  left: 
  0;

      
  height: 
  40 
  px; 
 

      
  text-align: 
  center;

      
  line-height: 
  40 
  px; 
 

      
  border-radius: 
  5 
  px; 
 

 
  padding: 
  0;

 
  margin: 
  0;

}

 
  .code-box 
  span{

      
  width: 
  40 
  px; 
 

      
  background-color: 
  #fff;

      
  font-size: 
  16 
  px; 
 

      
  cursor: 
  pointer;

 
  margin-right: 
  1 
  px; 
 

}

 
  .code-box 
  p{

      
  width: 
  0;

      
  background-color: 
  #FFFF99;

      
  overflow: 
  hidden;

      
  text-indent: 
  -20 
  px; 
 

      
  transition: 
  background 
  1 
  s 
  ease-in; 
 

}

 
  .code-box 
  .code-input{

      
  display: 
  none;

}

 
  .code-box 
  .code-input{

      
  display: 
  none;

}

展示

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^