@maybecode/vue-form-validator

😘vue-form-validator

🌟 基于async-validator封装的高度定制化UI的表单验证组件，不提供任何UI封装，只封装验证逻辑

Demo

demo

安装

npm install @maybecode/vue-form-validator

或者

yarn add @maybecode/vue-form-validator

// main.js

import VueFormValidator from "@maybecode/vue-form-validator";

Vue.use(VueFormValidator);

mv-form props

---

名称	类型	描述
model	object	验证的表单对象
rules	object	验证规则对象
custom-class	string	自定义类名

mv-item props

---

名称	类型	描述
prop	string	验证的表单字段
rules	[]	自定义字段的验证规则
custom-class	string	自定义类名

mv-item scope-slots

---

名称	类型	描述
errors	[]	返回的数组信息数据
fieldValidate	function	验证当前字段的函数

<template #default="{errors,fieldValidate}">
<!-- 这里插入内容 -->
</template>

      <template #default="{errors,fieldValidate}">
          <div class="item-row">
            <input type="text" @blur="fieldValidate" v-model="form.code" />
          </div>
          <p v-if="errors && errors.length>0">{{errors}}</p>
        </template>

👉 模板

---

 <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <h2>😘vue-form-validator</h2>
    <p>🌟可以高度定制化UI的表单验证组件，不提供任何UI封装，只封装验证逻辑</p>
    <mv-form :model="form" :ref="el" :rules="rules" custom-class="custom-form">
      <h2>默认表单提交触发验证👇</h2>
      <mv-item prop="phone" custom-class="custom-item">
        <template #default="{errors}">
          <div class="item-row">
            <label>手机号:</label>
            <input v-model="form.phone" type="text" />
          </div>
          <p v-if="errors && errors.length>0">{{errors}}</p>
        </template>
      </mv-item>
      <h2>输入触发事件👇</h2>
      <mv-item prop="password" custom-class="custom-item">
        <template #default="{errors,fieldValidate}">
          <div class="item-row">
            <label>密码:</label>
            <!-- 触发函数绑定到自定义的事件上 -->
            <input type="password" @input="fieldValidate" v-model="form.password" />
          </div>
          <p v-if="errors && errors.length>0">{{errors}}</p>
        </template>
      </mv-item>
      <h2>失去焦点触发事件👇</h2>
      <mv-item prop="code" custom-class="custom-item">
        <template #default="{errors,fieldValidate}">
          <div class="item-row">
            <label>验证码:</label>
            <input type="text" @blur="fieldValidate" v-model="form.code" />
          </div>
          <p v-if="errors && errors.length>0">{{errors}}</p>
        </template>
      </mv-item>
      <h2>select值改变触发事件👇</h2>
      <mv-item prop="select" :rules="[{ required: true, message:'必须选择一个选项',type:'string'}]">
        <template #default="{errors,fieldValidate}">
          <div class="item-row">
            <label>选项验证:</label>
            {{form.select}}
            <select
              v-model="form.select"
              @change="customSelectChange(fieldValidate)"
            >
              <option :value="null">空值</option>
              <option value="1">第一个</option>
              <option value="2">第二个</option>
            </select>
          </div>
          <p v-if="errors && errors.length>0">{{errors}}</p>
        </template>
      </mv-item>
      <!-- 这里要设置button的type为submit-->
      <button style="margin:15px 0px;" type="submit" @click.prevent="validate">提交</button>
    </mv-form>
  </div>

👉 配置

---

export default {
  name: "Home",
  components: {
    MvForm,
    MvItem,
  },
  data() {
    return {
      el: "formbbb",
      form: {
        username: "",
        password: "",
        code: "",
        select: "",
      },
      // 具体验证规则参考 https://github.com/yiminghe/async-validator
      rules: {
        phone: [
          { required: true, message: "请填写手机号" },
          {
            message: "请输入正确手机号",
            // 自定义验证逻辑
            validator(rule, value, callback) {
              const reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
              return reg.test(value);
            },
          },
        ],
        password: [
          { required: true, message: "请填写密码", type: "string" },
          { message: "密码最多10位", max: 10 },
        ],
        code: [
          { required: true, message: "请填写验证码", type: "string" },
          { message: "验证码4位", len: 4 },
        ]
      },
    };
  },
  methods: {
    customSelectChange(validate) {
      // 自定义验证的时机
      validate();
    },
    // 表单提交验证
    validate() {
      console.log(this.$refs);
      this.$refs[this.el].validate((err) => {
        console.log(err);
      });
    },
  },
};

Typescript

import { MvForm } from "@maybecode/vue-form-validator";

 validate() {
     (this.$refs["form"] as MvForm).validate((err) => {
        console.log(err);
      });
    },