VUE指令directive表单from验正 简单易用

npm install --save vue-directive-valid

or

yarn add vue-directive-valid

Usage

import valid from 'vue-directive-valid';

 

created() {

  //必需在此方法中引用初始化，不可在this.$nextTick与computed中初始化

  valid.init(this);

}

 

验正方法

 

  methods: {

    btnCheck() {

      let valid = valid.check(this); 

      返回三个值{isCheck:true,message:"错误信息",model:'user.name'}

      if(valid.isCheck){

        this.$message.error(valid.message);

        return;

      }

      当页面出现多个面板用v-if控制时，需要特殊处理

      let check = valid.check(this, 'modifys.');

      if (check.isCheck && check.model.includes('modifys.')) {

        this.$message.error(check.message);

        return;

      }

    }

  },

 

参数说明

自带验证方法
imgcode: [/^[0-9a-zA-Z]{4}$/, '请输入正确的验证码'],
smscoe: [/^\d{4,6}$/, '请输入正确的短信码'],
postcode: [/^\d{4}$/, '请输入正确的邮政编码'],
username: [/^[\w|\d]{2,26}$/, '请输入正确的用户名'],//用户名
password: [/^(?=.*\d+)(?=.*[a-z]+)(?=.*[A-Z]+)(?=.*[^A-Za-z0-9\s]+)\S{6,16}$/, '请输入6位以上正确密码'],
password6: [/^\S{6,16}$/, '请输入6位以上正确密码'],
phone: [/^1[3|4|5|7|8]\d{9}$/, '请输入正确手机号'],
realname: [/^[\u4e00-\u9fa5 ]{2,10}$/, '请输入真实姓名'],
bank: [/^\d{10,19}$/, '请输入正确银行卡号'],
money: [/^([1-9]\d*|0)$/, '请输入正确金额'],
email: [/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/, '请输入正确邮箱'],
idcode: [/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/, '请输入正确的身份证']

使用如 <input v-model="user.name" v-valid:phone >

Element-ul <el-input v-valid:phone v-model="modifys.phone"></el-input>

参数说明2

验证是否为空
<input v-model="user.name" v-valid:empty >

验证数组是否为空数组
<input v-model="user.name" v-valid:array >

单独设置错误提示语
<input v-model="user.name" v-valid="{message:'错误提示语'}" >

自定义正则rex
<input v-model="user.name" v-valid="{rex:/^([1-9]\d*|0)$/,message:''}" >


  methods: {
    checkIp() {
     取placeholder里的错误提示语或message里的
     return false 
    },
    checkIp() {
     return "您的IP地址有误" 
    },
  },

自定义方法 可以是methods中的方法 方法请勿带括号"()"
<input v-model="user.name" v-valid="{rex:checkIp,message:''}" >
1、当返回false 取placeholder里的错误提示语或message里的
2、当返回是字符串如"你输入的密码不正确" 则提示语取 方法返回提示语
<input v-model="user.name" v-valid="{rex:checkIp}" >

错误提示语

1、当placeholder里有值则取placeholder的值
   <input placeholder="错误提示语" v-model="user.name" v-valid:array >

2、当placeholder值为空时，取v-valid="{message:'错误提示语'}"里的message值

3、如果是方法返回错误提示语则取方法返回值

CSS 样式

全局样式：
下面样式放在全局中便可
.__valid_from{
   <!-- 原生 -->
  .valid-input{
    border: 1px solid red;
  }

  <!-- 第三方组件 -->
  .valid{
    input,select{
      border: 1px solid red;
    }
  }
}

Demo https://0574edu.net/#/  其中登录注册用到

交群QQ：66060257