Vue移动端（H5项目或uniapp小程序）项目封装form表单校验组件（支持required必填、min/max最大最小长度、pattern正则、validator事件校验规则）

本文链接：https://blog.csdn.net/cwin8951/article/details/141364676

一、最终效果

在这里插入图片描述

二、参数配置

1、代码示例：

此组件也支持uniapp微信小程序

<t-form ref="tform" :model="loginForm" :rules="rules">
  ...
 </t-form>

2、配置参数（TForm Attributes）

参数	说明	类型	默认值
model	需要校验表单信息	Object	-
rules	校验规则信息	Object	.-

3、events 事件

事件名	说明	返回值
validate	全部校验	返回valid

三、具体页面使用

<template>
	<div class="login">
     <t-form ref="tform" :model="loginForm" :rules="rules">
	        <div class="roundBox">
	          <van-field v-model.trim="loginForm.username" placeholder="请输入账号" clearable />
	        </div>
	        <div class="roundBox">
	          <t-van-field
	            v-model="loginForm.password"
	            type="password"
	            placeholder="请输入密码"
	            clearable
	            showPassword
	          />
	        </div>
	    </t-form>
	    <div class="btn" @click="onLogin">登录</div>
    </div>
</template>
<script>
export default {
  name: 'initialJudgment',
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
      },
      rules: {
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 18, message: "密码长度在6到18个字符", trigger: "blur" }
        ]
      }
    }
  },
  methods: {
    // 登录
    onLogin() {
      this.$refs.tform.validate(async (valid) => {
        if (!valid) return;
        console.log("验证通过", this.loginForm);
        const res = await this.$store.dispatch('Login', this.loginForm)
        if (res.success) {
          this.$router.push({ path: '/' });
        }
      })
    }
  },
};
</script>

四、源码

<template>
  <div class="t_form">
    <slot />
  </div>
</template>
<script>
export default {
  name: 'TForm',
  props: {
    model: {
      type: Object,
      default: () => ({})
    },
    rules: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    // 单个字段校验
  validateField(key) {
  let value = this.model[key];
  if (!this.rules[key] || !this.rules[key].length) {
    return { valid: true };
  }
  for (let rule of this.rules[key]) {
    if (rule.required && !value) {
      return { valid: false, msg: rule.message };
    }
    if ((rule.max || rule.min) && value.length < rule.min || value.length > rule.max) {
      return { valid: false, msg: rule.message };
    }
    if (rule.pattern && !new RegExp(rule.pattern).test(value)) {
      return { valid: false, msg: rule.message };
    }
    if (rule.validator) {
      let error = '';
      rule.validator(rule, value, err => {
        if (err) error = err;
      });
      if (error) {
        return { valid: false, msg: error };
      }
    }
  }
  return { valid: true };
},
    // 全部校验
    validate(callback) {
      let res = []
      Object.keys(this.rules).forEach(key => {
        res.push(this.validateField(key))
      });
      for (let i = 0; i < res.length; i++) {
        if (!res[i].valid) {
          this.$toast({
            message: res[i].msg
          })
          return false
        }
      }
      callback({
        valid: true
      })
    }
  }
}
</script>