<template>
<my
-form ref="forRef"
:mod
el="data">
<my
-form-item lab
el="产品名称" prop="name"
:rules="[
{ required
: true, message
: '请输入产品名称', trigger
: 'blur' },
{ maxLength
: 10, message
: '产品名称不能大于10' },
{ validator
: mycheck(data
.name)}
]">
<my
-input v
-mod
el="data
.name" />
</my
-form-item>
<my
-form-item lab
el="产品描述" prop="age"
:rules="[
{ required
: true, message
: '请输入产品描述', trigger
: 'blur' },
{ maxLength
: 200, maxMessage
: '姓名不能超过200个汉字' }
]">
<my
-input v
-mod
el="data
.age"/>
</my
-form-item>
<my
-form-item lab
el="产品分类" prop="category"
:rules="[{ required
: true, message
: '请选择性产品分类', trigger
: 'change' }]">
<my
-s
elect v
-mod
el="data
.category">
<my
-option v
-for="
item in sexOptions"
:lab
el="
item.lable"
:value="
item.value" />
</my
-s
elect>
</my
-form-item>
<my
-form-item lab
el="产品单价" prop="price"
:rules="[
{ required
: true, message
: '请输入产品单价', trigger
: 'blur' },
{ min
: 0, message
: '产品单价不能小于0', trigger
: 'blur' },
{ max
: 10000, message
: '产品单价不能超过10000', trigger
: 'blur' }
]" >
<my
-input v
-mod
el="data
.price"/>
</my
-form-item>
<my
-form-item lab
el="产品库存" prop="stock"
:rules="[
{ required
: true, message
: '请输入产品库存', trigger
: 'blur' },
{ min
: 0, message
: '产品库存不能小于0', trigger
: 'blur' },
{ max
: 10000, message
: '产品库存不能超过10000', trigger
: 'blur' }
]" >
<my
-input v
-mod
el="data
.stock"/>
</my
-form-item>
<my
-form-item lab
el="生产厂家" prop="manufacturer"
:rules="[
{ required
: true, message
: '请输入生产厂家', trigger
: 'blur' },
]">
<my
-input v
-mod
el="data
.manufacturer"/>
</my
-form-item>
<my
-form-item lab
el="产地">
<my
-s
elect v
-mod
el="data
.originProvince" placeholder="省" prop="originProvince"
:rules="[{ required
: true, message
: '请选择性省份', trigger
: 'change' }]">
<my
-option v
-for="
item in originProvinces"
:lab
el="
item.lable"
:value="
item.value" />
</my
-s
elect>
<my
-s
elect v
-mod
el="data
.originCity" placeholder="市" prop="originCity"
:rules="[{ required
: true, message
: '请选择市', trigger
: 'change' }]">
<my
-option v
-for="
item in originCitys"
:lab
el="
item.lable"
:value="
item.value" />
</my
-s
elect>
</my
-form-item>
<my
-form-item lab
el="发货地">
<my
-s
elect v
-mod
el="data
.shippingProvince" placeholder="省" prop="originProvince"
:rules="[{ required
: true, message
: '请选择性省份', trigger
: 'change' }]">
<my
-option v
-for="
item in originProvinces"
:lab
el="
item.lable"
:value="
item.value" />
</my
-s
elect>
<my
-s
elect v
-mod
el="data
.shippingCity" placeholder="市" prop="originCity"
:rules="[{ required
: true, message
: '请选择市', trigger
: 'change' }]">
<my
-option v
-for="
item in shippingCities"
:lab
el="
item.lable"
:value="
item.value" />
</my
-s
elect>
</my
-form-item>
<!
-- // 复杂空件暂时不做
-->
<div class="data">
<
el-form-item lab
el="生产日期
:" required>
<
el-col
:span="11">
<
el-form-item prop="createAt">
<
el-date
-picker v
-mod
el="data
.createAt" type="date" aria
-lab
el="Pick a date" placeholder="Pick a date"
style="width
: 100%;" />
</
el-form-item>
</
el-col>
</
el-form-item>
</div>
</my
-form>
{{ data }}
<button @click="check
Form">提交</button>
<button @click="clear
Form">清空</button>
</template>
<script setup>
import my
Form from '@/components/my
Form';
import my
FormItem from '@/components/my
Form/my
FormItem';
import MyInput from '@/components/input';
import MyS
elect from '@/components/myS
elect';
import MyOption from '@/components/myS
elect/myOption';
const forRef = ref()
const sexOptions = reactive([{
lable: "男", value
: 1 }, {
lable: "吉", value
: 2 }])
const originProvinces = reactive([{
lable: "辽宁", value
: 1 }, {
lable: "吉林", value
: 2 }]) // 省份数据
const originCitys = reactive([{
lable: "沈阳", value
: 1 }, {
lable: "长春", value
: 2 }]) // 城市数据
const shippingCities = reactive([{
lable: "沈阳", value
: 1 }, {
lable: "长春", value
: 2 }]) // 发货地城市数据
const data = reactive({
name
: "",
age
: "",
category
: "",
price
: "",
stock
: "",
manufacturer
: "",
originProvince
: '',
originCity
: '',
shippingProvince
: '',
shippingCity
: '',
createAt
: "",
formCheck
: null
})
function mycheck(
item) {
if (
item == 1) {
return {
check
: false,
message
: "不能等于1"
}
}
else {
return {
check
: true
}
}
}
function check
Form() {
data
.formCheck = forRef
.value
.validate()
}
function clear
Form() {
forRef
.value
.resetFi
eld()
}
const rules = reactive({
name
: [
{ required
: true, message
: '请输入产品名称', trigger
: 'blur' },
{ max
: 10, message
: '长度超过10位', trigger
: 'blur' },
],
description
: [
{ required
: true, message
: '请输入产品描述', trigger
: 'blur' },
{ max
: 200, message
: '长度超过200位', trigger
: 'blur' },
],
category
: [
{ required
: true, message
: '请选择产品分类', trigger
: 'change' },
],
});
</script>
<style scoped>
.data{
margin
-left
: 40px;
}
</style> 自定义校验函数为什么不成功
本文介绍在Vue中使用Element UI组件库时如何设置表单的必填项标识。通过两种方法实现：一是直接使用`:required='true'`属性；二是通过自定义`label-slot`来添加红色星号标识。
扫一扫
3169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
