js实现鼠标单击Tab表单切换效果,快速解决brew安装特定版本flow的问题

HTML5原生的表单校验属性(必填,长度限制,取值间隔,正则表达式等等)可以满足普通的校验需求,但是有些场景必须用到自定义校验,比如注册时的密码确认,有比对关系的时间/数值选择,
需要到请求到服务端取值验证等等···这里以密码确认为例进行说明。

在atom+react-native项目中安装了nuclide。然而使用flow的时候出现了问题。

本文实例为大家分享了js实现鼠标单击Tab表单切换展示的具体代码,供大家参考,具体内容如下

指令开发

$ brew -v
Homebrew 1.2.0

$ flow version
Flow, a static type checker for JavaScript, version 0.45.0

$ flow
Launching Flow server for /Users/real/Desktop/reactPro/pro2
Wrong version of Flow. The config specifies version ^0.42.0 but this is version 0.45.0

代码:

  表单的验证状态是通过 formContro l的 errors
属性反馈出来的,所以基本的思路肯定就是需要添加校验规则,然后将验证结果添加到formControl实例的errors属性中。那么问题来了,模版驱动表单的控制都是在HTML模版中完成的,无法直接接触到
formControl实例。这个时候就需要使用指令了,将检验规则进行包装。Angular提供了
验证器供应商 NG_VALIDATORS ,用于处理表单自定义校验。先创建指令。

在我的.flowconfig文件中最后的地方也可以看到:

<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="utf-8" /> 
  <title></title> 
  <style type="text/css"> 
   *{ 
    padding: 0; 
    margin: 0; 
    border:0; 
   } 
   body{ 
    text-align: center; 
   } 
   ul{ 
    list-style: none; 
   } 
   a{ 
    text-decoration: none; 
    color: #ff6666; 
    font-family: Arial; 
   } 
   .tab-container{ 
    width: 398px; 
    height: 200px; 
    border:1px #ffcccc solid; 
    margin: 0 auto; 
    position: relative; 
    overflow: hidden; 
   } 
   /*tab-head begin*/ 
   .tab-head{ 
    width: 400px; 
    height:30px; 
    left:0; 
    background: #ffcccc; 
    position: absolute; 
    left:-1px;//这里设置-1是为了li的border与最外层的border重合 
   } 
   .tab-head li{ 
    float:left; 
    height: 29px; 
    line-height: 29px; 
    width: 78px; 
    overflow: hidden; 
    padding: 0 1px; 
    border-bottom: 1px solid #ffcccc; 
    background: #ffeeee; 
   } 

   li.select{ 
    background: #fff; 
    padding: 0; 
    border-left: 1px solid #ffcccc; 
    border-right: 1px solid #ffcccc; 
    border-bottom: 1px solid #fff;  
   } 
   /*tab-head end tab-panel begin*/ 
   .tab-panel{ 
    position: relative; 
    width: 100%; 
    height: 85%; 
    top: 15%; 
    -webkit-transition:all 0.01s linear;//切换过渡效果 
   } 
   .tab-panel section{ 
    position: absolute; 
    display: inline-block; 
    width: 100%; 
    height: 100%; 
   } 
   #panel-1{ 
    left: 0; 
   } 
   #panel-2{ 
    left: 100%; 
   } 
   #panel-3{ 
    left: 200%; 
   } 
   #panel-4{ 
    left: 300%; 
   } 
   #panel-5{ 
    left: 400%; 
   } 
  </style> 
 </head> 
 <body> 
  <div class="tab-container"> 
    <ul class="tab-head"> 
     <li id="1" class="select" onmousedown="$(this)"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Tab1</a></li> 
     <li id="2" onmousedown="$(this)"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Tab2</a></li> 
     <li id="3" onmousedown="$(this)"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Tab3</a></li> 
     <li id="4" onmousedown="$(this)"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Tab4</a></li> 
     <li id="5" onmousedown="$(this)"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Tab5</a></li> 
    </ul> 
    <div id="tab-panel" class="tab-panel"> 
     <section id="panel-1"><p>这是panel-1</p></section>  
     <section id="panel-2"><p>这是panel-2</p></section>  
     <section id="panel-3"><p>这是panel-3</p></section>  
     <section id="panel-4"><p>这是panel-4</p></section>  
     <section id="panel-5"><p>这是panel-5</p></section>    
    </div> 
   </div> 
   <script type="text/javascript"> 
    function $(id){ 
    var lis = document.getElementsByTagName('li'); 
    for (var i = 0; i < lis.length; i++) { 
     lis[i].setAttribute('class',''); 
    }; 
    id.setAttribute('class','select'); 
    var ele = document.getElementById('tab-panel'); 
    ele.style.left=-(id.id-1)+'00%'; 
    } 
   </script> 
 </body> 
</html> 
import { Directive} from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl} from '@angular/forms';
@Directive({
 selector: '[appConfirmpsw]',
 providers: [{
  provide : NG_VALIDATORS,
  useExisting : ConfirmpswDirective,
  multi: true
 }]
})
export class ConfirmpswDirective implements Validator {
 constructor() {
  }
 validate(control: AbstractControl): {[key: string]: any} {
   //检验规则
 }
}
[version]
^0.42.0

效果图:

  1、为指令指定供应商  NG_VALIDATORS , 和别名类 ConfirmpswDirective
, 及 multi 为true(可以用同一个token,注册不同的 provide)。因为是在
NG_VALIDATORS
提供商中注册的指令,所以才能被Angular的验证流程识别,需要注意的是要用useExisting来注册,这样就不会创建一个新的实例。

这意味着flow的版本应该是>=0.42.0
<0.43.0,所以0.45.0是不合适的。这就需要下载0.42.0的版本。

图片 1

  2、用 Validator接口来约束 自定义的指令,这是Angular提供的验证器的类
。有validate属性,会传入表单的formControl,返回 ValidationErrors 对象。

搜索了网上一些说法(brew
安装特定版本):

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

  现在指令结构完成,开始进行校验部分。首先需要传入已输入的密码,所以增加@input,再指定校验规则,判断绑定表单的值和传入的已输入值是否相同

brew install flow(安装的是最新版本)

您可能感兴趣的文章:

  • javascript实现tab切换的四种方法
  • 一个精简的JS
    DIV层tab切换代码
  • js(JavaScript)实现TAB标签切换效果的简单实例
  • javascript实现tabs选项卡切换效果(自写原生js)
  • 一个js的tab切换效果代码[代码分离]
  • 用AngularJS的指令实现tabs切换效果
  • 基于jquery的tab切换 js原理
  • Vue.js组件tabs实现选项卡切换效果
  • javascript仿126邮箱TAB切换效果
  • js实现点击切换TAB标签实例
@Input('appConfirmpsw') confirmpsw: string;

brew versions (已经废弃了)

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注