el-form-valid-item

Form Valid Item 带验证表单组件

这是一款基于VUE3 + Element Puls开发封装表单验证组件，可直接替代Element的<el-form-item> 组件，主要是想让表单验证使用起来更简单方便。

VUE2 + ElementUI的请选择安装 el-form-valid-item@1.x 版本

Install 安装

# 安装VUE3版本
npm install el-form-vaild-item --save
yarn add el-form-vaild-item --save

# 安装VUE2版本
npm install el-form-vaild-item@1.x --save
yarn add el-form-vaild-item@1.x --save

Usage 使用

// main.js
import Vue from 'vue'
import ElFormValidItem from 'el-form-valid-item'
import FormRules from './formRules'

// 扩展自定义表单验证规则
ElFormValidItem.extendRules(FormRules)
// 使用 ElFormRuleItem
Vue.use(ElFormValidItem)

// template
// ...
<el-form-valid-item label="输入框1：" prop="iptVal1" rules="required|number">
    <el-input v-model="iptVal1" />
</el-form-valid-item>
// or
<el-form-valid-item label="输入框2：" prop="iptVal2" :rules="['required', 'maxLen:8']">
    <el-input v-model="iptVal2" />
</el-form-valid-item>
// ...

Rules 验证规则

规则名称	说明	是否带参数	提示消息
required	是否必填	否	xxx不能为空
number	数字内容	否	xxx必须时数字
maxLen	最大长度	是	xxx的长度不能小于x位字符
minLen	最小长度	是	xxx的长度不能大于x位字符

参数使用 规则名称:参数

如字段长度不能超过8位 rules="maxLen:8"

Example 例子

<!-- template -->
<template>
	<el-form ref="myForm" :model="formData">
        <el-form-valid-item label="选择框：" prop="selectVal" rules="required" label-width="90px">
            <el-select v-model="formData.selectVal" clearable style="width:100%;">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </el-form-valid-item>
        <el-form-valid-item label="用户名：" prop="iptVal1" rules="required|maxLen:8" label-width="90px">
            <el-input v-model="formData.iptVal1" placeholder="请输入用户名，最长8位"></el-input>
        </el-form-valid-item>
        <el-form-valid-item label="年龄：" prop="iptVal2" :rules="['required', 'number']" label-width="90px">
            <el-input v-model="formData.iptVal2" placeholder="请输入数字"></el-input>
        </el-form-valid-item>
        <el-form-valid-item label-width="90px" style="text-align:left;">
            <el-button type="success" @click="submitForm('myForm')">提交</el-button>
            <el-button @click="resetForm('myForm')">重置</el-button>
        </el-form-valid-item>
    </el-form>
</template>
<!-- js --> 
<script>
export default {
  data () {
      return {
        formData: {
            iptVal: '',
            selectVal: ''
        },
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }]
      }
  },

  methods: {
    submitForm() {
        this.$refs.myForm.validate((valid) => {
            if (valid) {
                alert('submit!');
            } else {
                console.log('error submit!!');
                return false;
            }
        });
    },
    resetForm() {
        this.$refs.myForm.resetFields();
    }
  }
}
</script>

修改输入框名称

可以通过field属性来修改输入框名称，不传field时，会使用label的值来做输入框名称

<!-- template -->
<template>
    <!-- .... -->
        <el-form-valid-item label="输入框：" prop="iptVal" rules="required" label-width="90px">
            <el-input v-model="iptVal"></el-input>
            <!-- 提示内容：输入框不能为空 -->
        </el-form-valid-item>
        <el-form-valid-item label="输入框：" prop="iptVal" field="年龄" rules="required" label-width="90px">
            <el-input v-model="iptVal" ></el-input>
            <!-- 提示内容：年龄不能为空 -->
        </el-form-valid-item>
    <!-- .... -->
</template>

修改触发方式

可以通过trigger属性来修改触发校验的方式，多个触发方式用数字的方式传递（如：['blur', 'change']），默认['blur', 'change']

<!-- template -->
<template>
    <!-- .... 失去焦点时触发校验 ...  -->
        <el-form-valid-item label="输入框：" prop="iptVal" rules="required|number" trigger="blur" label-width="90px">
            <el-input v-model="iptVal" placeholder="请输入数字"></el-input>
        </el-form-valid-item>
    <!-- .... -->
</template>

自定义专属校验规则

可通过 validator 属性增加专属校验规则，默认先校验 rules 的规则再校验 validator

<!-- template -->
<template>
    <!-- .... -->
        <el-form-valid-item label="用户名：" prop="iptVal" rules="required|maxLen:8" :validator="validator" label-width="90px">
            <el-input v-model="iptVal" placeholder="请输入用户名，最长8位，只能填中文"></el-input>
        </el-form-valid-item>
    <!-- .... -->
</template>
<!-- js --> 
<script>
export default {
  data () {
      return {
        iptVal: ''
      }
  },

  methods: {
    validator(rule, value, cb) {
        if (/^[\u4e00-\u9fa5]$/.test(val)) {
            cb(new Error('用户名只能是中文'))
        } else {
            cb()
        }
    }
  }
}
</script>

Extend Rules 自定义检验规则

// formRules.js 自定义规则
/** 
 * // 规则格式
 * 规则名称: {
 * validate(param) { return true or false }
 * getMessage(param) { return '提示内容' }
 * 
 * // 参数说明
 * param {
 *  value: '', // 输入框的值
 *  field: '', // 字段名称
 *  data: '' // 规则上带的参数(冒号后的内容)
 * }
 * 
* } */

export default {
    // 整数校验
    int: {
        validate: ({ value }) => !/^(-)?\d+$/.test(value),
        getMessage: ({ field }) => `${field}必须是整数`
    }
    // 可单独提交一个属性来覆盖原来的规则的某个属
    required: {
        getMessage: ({ field }) => `请选择${field}`
    }
    // 可自定义参数，根据不同参数返回不同的结果
    required: {
        getMessage: ({ field, data }) => data === '1' ? `${field}不能为空` : `请选择${field}`
    }
}

• validate(param) getMessage(param) 的 param 参数

  字段	说明
  value	检验的内容（如输入框的值）
  field	字段名称
  data	规则上带的参数(冒号后的内容)

TS类

el-form-valid-item 会向外抛出三个类型，需要的时候可以直接导入使用

imort { FormRuleType, FormRuleItemType, FormRuleParamType } from 'el-form-valid-item'

Form-Valid-Item Attributes

参数	描述	类型	可选值	默认值
rules	表单验证规则，多个规则可用`	`隔开或者用数组方式传入	string / array	--
validator	自定义检验函数，可参考 async-validator	function	--	--
field	字段名称，验证提示消息用到	string	--	label的值
trigger	触发类型，多个类型用数组方式传入	string / array	--	['blur', 'change']
prop	表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的	string	传入 Form 组件的 model 中的字段	--
label	标签文本	string	--	--
label-width	表单域标签的的宽度，例如 '50px'。支持 auto。	string	--	--
required	是否必填，如不设置，则会根据校验规则自动生成	boolean	--	false
error	表单域验证错误信息, 设置该值会使表单验证状态变为error，并显示该错误信息	string	--	--
show-message	是否显示校验错误信息	boolean	--	true
inline-message	以行内形式展示校验信息	boolean	--	false
size	用于控制该表单域下组件的尺寸	string	medium / small / mini	--