vue 폼 인증 구성 요소 v-verify-plugin

verify
github: https://github.com/liuyinglong/verify
npm: https://www.npmjs.com/package/vue-verify-plugin
install

npm install vue-verify-plugin

use
html

<div>
  <div>
    <input type="text" placeholder="  " v-verify.grow1="username" v-model="username"/>
    <label v-verified="verifyError.username"></label>
  </div>
  <div>
    <input type="password" placeholder="  " v-verify.grow1="pwd" v-model="pwd"/>
    <label v-verified="verifyError.pwd"></label>
  </div>
  <button v-on:click="submit">  </button>
 </div>

js

import Vue from "vue";
import verify from "vue-verify-plugin";
Vue.use(verify);

export default{
  data:function(){
    return {
      username:"",
      pwd:""
    }
  },
  methods:{
    submit:function(){
      if(this.$verify.check()){
        //      
      }
    }
  },
  verify:{
    username:[
      "required",
      {
        test:function(val){
          if(val.length<2){
            return false;
          }
          return true;
        },
        message:"      2 "
      }
    ]，
    pwd:"required"
  }，
  computed:{
    verifyError:function(){
      return this.$verify.$errors;
    }
  }
}

명령 설명
v-verify
v-erify 는 폼 컨트롤 요소 에 데이터 검증 규칙 을 만 들 고 검증 할 값 과 검증 할 규칙 에 자동 으로 일치 합 니 다.
v-verify 수정자 설명
이 명령 의 마지막 장식 자 는 사용자 정의 그룹 입 니 다.

//   teacher  
v-verify.teacher
//   student  
v-verify.student

//           

//  student   
this.$verify.check("student")
//  teacher   
this.$verify.check("teacher")
//    
this.$verify.check();

v-verified
v-verified 오류 디 스 플레이,오류 가 있 을 때 보 여 줍 니 다.오류 가 없 을 때 style:none 을 추가 합 니 다.기본적으로 이 데이터 의 모든 오 류 를 보 여 줍 니 다.
이 명령 은 문법 사탕(예시 참조)

<input v-model="username" v-verify="username">

<label v-show="$verify.$errors.username && $verify.$errors.username.length" v-text="$verify.$errors.username[0]"></label>
<!--   -->
<label v-verified="$verify.$errors.username"></label>
<!--      -->
<label v-verified.join="$verify.$errors.username">

수정자 설명
.join 모든 오 류 를 쉼표 로 구분 하 는 것 을 보 여 줍 니 다.
사용자 정의 인증 규칙

var myRules={
  phone:{
    test:/^1[34578]\d{9}$/,
    message:"         "
  },
  max6:{
    test:function(val){
      if(val.length>6) {
        return false
      }
      return true;
    },
    message:"   6 "
  }

}
import Vue from "vue";
import verify from "vue-verify-plugin";
Vue.use(verify,{
  rules:myRules
});

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.