element-ui 表单校验・大全

element-ui 官网

element-ui 表单校验的规则如下：

<属性名>: [{ required: true,// 是否必填（若有label则在其左上角显示红点，否则不显示必填标志），可选。type: 'date',// 限制输入的数据类型，可选。min: 3,// 当输入的是数值时，限制输入的最小值，可选。max: 5,// 当输入的是数值时，限制输入的最大值，可选。pattern: /^\d+\.\d+\.\d+$/,// 正则表达式，可选。message: "请使用 x.x.x 格式编号",// 错误时提示信息，必须。trigger: ['change', 'blur']// 触发校验的事件，必须。监听单一事件用字符串，监听多个事件用数组},// ...
]

1、对全部表单项的校验

<template>
<form ref="formRef" :model="form" :rules="rules" hide-required-asterisk class="base-form" :label-width="120"><el-form-item label="编码：" prop="code"><el-input v-model="form.code" placeholder="请输入编码" clearable/></el-form-item><el-form-item label="地址" prop="address"><el-select v-model="form.address" placeholder="请选择一个城市" clearable><el-option label="上海" value="shanghai" /><el-option label="北京" value="beijing" /></el-select></el-form-item><el-form-item label="月份：" prop="moth"><el-input v-model="form.moth" placeholder="请输入月份" clearable/></el-form-item><el-form-item label="日期" prop="date"><el-date-picker v-model="form.date" type="date" placeholder="请选择日期" clearable/></el-form-item><el-form-item label="成员：" prop="members"><el-checkbox-group v-model="form.members"><el-checkbox label="一号" name="members" /><el-checkbox label="二号" name="members" /><el-checkbox label="三号" name="members" /></el-checkbox-group></el-form-item><el-form-item label="手机号：" prop="phone"><el-input v-model="form.phone" placeholder="请输入手机号" clearable/></el-form-item><el-form-item><el-button @click="submit(formRef)">保存</el-button></el-form-item>
</form>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'const formRef = ref(null)interface RuleForm {code: stringaddress: stringmoth: string | numberdate: Date | stringmembers: string[]phone: string
}const form = reactive<RuleForm>({code: '',address: '',moth: '',date: '',members: []phone: '',
})// 表单校验
const rules = reactive<FormRules<RuleForm>>({// 失焦触发校验code: [{ required: true, message: '请输入编码', trigger: 'blur' }],// 值改变时触发校验address: [{ required: true, message: '请选择一个城市', trigger: 'change' }],// 包含最大值和最小值moth: [{ required: true, message: '请输入月', trigger: 'blur' },{ min: 1, max: 12, message: '请输入1~12月中的一个', trigger: 'blur' },],// 带类型的校验 - 类型为日期date: [{ type: 'date', required: true, message: '请输入日期', trigger: 'change' }],// 带类型的校验 - 类型为数组members: [{ type: 'array', required: true, message: '请选择成员', trigger: 'change' }],// 带正则表达式的校验phone: [{ required: true, message: '请输入手机号', trigger: 'blur' },{ pattern: /^(13[0-9]|15[0-9]|17[0-9]|18[0-9]|19[0-9])[0-9]{8}$/, message: '请输入正确的手机号', trigger: 'blur' },],
})// 提交 - 对整个表单进行校验
const submit = async (formEl: FormInstance | undefined) => {if (!formEl) returnawait formEl.validate((valid, fields) => {if (valid) {console.log('submit!')} else {console.log('error submit!', fields)}})
}
</script>

2、校验指定字段

<template>
<form ref="formRef" class="base-form" :model="form" :label-width="120" :rules="rules" hide-required-asterisk><el-form-item label="编码：" prop="code"><el-input v-model="form.code" autocomplete="off" clearable @input="validateSelect" @keyup.enter="validateSelect"/></el-form-item>
</form>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'const formRef = ref(null)interface RuleForm {code: string
}const form = ref<RuleForm>({code: '',
})// 表单校验
const rules = reactive<FormRules<RuleForm>>({code: [{ required: true, message: '请填写编码', trigger: 'blur' }],,
})// 校验指定字段
const validateSelect = () => {formRef.value!.validateField('selectValue')
}
</script>

3、自定义函数校验表单

<template>
<form ref="formRef" class="base-form" :model="form" :label-width="120" :rules="rules" hide-required-asterisk><el-form-item label="手机号：" prop="phoneNumber"><el-input v-model="form.phoneNumber" autocomplete="off" clearable/></el-form-item>
</form>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'const formRef = ref(null)interface RuleForm {phoneNumber: string
}const form = ref<RuleForm>({phoneNumber: '',
})// 自定义校验 - 手机号
const checkPhoneNumber = (rule: any, value: any, callback: any) => {const pattern = /^(13[0-9]|15[0-9]|17[0-9]|18[0-9]|19[0-9])[0-9]{8}$/if(!value) {callback(new Error('请输入手机号'))} else if(!pattern.test(val)) {callback(new Error('请输入正确的手机号'))} else {callback()}
}// 表单校验
const rules = reactive<FormRules<RuleForm>>({phoneNumber: [{ validator: checkPhoneNumber, trigger: 'blur' }],,
})
</script>

4、一行内多个输入框的校验

<template>
<form ref="formRef" class="base-form" :model="form" :label-width="120" :rules="rules" hide-required-asterisk><el-form-item class="form-row" label="测试：" prop="test"><section class="form-col">1 <el-input class="ml-5" v-model="form.test[0]" placeholder="第1项" clearable/></section><section class="form-col">2 <el-input class="ml-5" v-model="form.test[1]" placeholder="第2项" clearable/></section></el-form-item>
</form>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'// 表单
const formRef = ref<FormInstance>()interface RuleForm {test: string[]
}const form = ref<RuleForm>({test: [],
})const checkTest =  = (rule: any, value: any, callback: any) => {const [oneStr, twoEnd] = form.value.coordinateconst pattern1 = /^[EWew]?[+-]?([0-9]|[1-8][0-9]|90)(\.\d+)?$/const pattern2 = /^[NSns]?[+-]?([0-9]|[1-9][0-9]|1[0-7][0-9]|180)(\.\d+)?$/if (oneStr && twoEnd && pattern1.test(oneStr) && pattern2.test(twoEnd)) {callback()} else {!oneStr && !twoEnd && callback(new Error('请输入所有项'))!oneStr && callback(new Error('请输入第1项'))!twoEnd && callback(new Error('请输入第2项'))!(pattern1.test(oneStr)) && callback(new Error('请输入正确的第1项'))!(pattern2.test(twoEnd)) && callback(new Error('请输入正确的第2项'))!(pattern1.test(oneStr)) && !(pattern2.test(twoEnd)) && callback(new Error('请输入正确的项'))}
}const rules = reactive<FormRules<RuleForm>>({test: [{ validator: checkTest, trigger: 'blur' }],
})
</script>