<template>
<my-form ref="forRef" :model="data">
<my-form-item label="产品名称" prop="name" :rules="[
{ required: true, message: '请输入产品名称', trigger: 'blur' },
{ max: 10, maxMessage: '产品名称不能超过10个汉字' }
]">
<my-input v-model="data.name"/>
</my-form-item>
<my-form-item label="产品描述" prop="age">
<my-input v-model="data.age" :rules="[
{ required: true, message: '请输入产品描述', trigger: 'blur' },
{ max: 10, maxMessage: '姓名不能超过200个汉字' }
]" />
</my-form-item>
<my-form-item label="性别" prop="sex" >
<my-select v-model="data.sex" :rules="[{ required: true, message: '请选择性别', trigger: 'change' },]">
<my-option v-for="item in sexOptions" :label="item.lable" :value="item.value" />
</my-select>
</my-form-item>
<my-form-item label="产品单价" prop="price">
<my-input v-model="data.price" :rules="[
{ required: true, message: '请输入产品单价', trigger: 'blur' },
{ min: 0, message: '产品单价不能小于0', trigger: 'blur' },
{ max: 10000, message: '产品单价不能超过10000', trigger: 'blur' }
]" />
</my-form-item>
<my-form-item label="产品库存" prop="stock">
<my-input v-model="data.stock" :rules="[
{ required: true, message: '请输入产品库存', trigger: 'blur' },
{ min: 0, message: '产品库存不能小于0', trigger: 'blur' },
{ max: 10000, message: '产品库存不能超过10000', trigger: 'blur' }
]" />
</my-form-item>
<my-form-item label="生产厂家" prop="manufacturer">
<my-input v-model="data.manufacturer" :rules="[
{ required: true, message: '请输入生产厂家', trigger: 'blur' },
]" />
</my-form-item>
</my-form>
{{ data }}
<button @click="checkForm">提交</button>
<button @click="clearForm">清空</button>
</template>
<script setup>
import myForm from '@/components/myForm';
import myFormItem from '@/components/myForm/myFormItem';
import MyInput from '@/components/input';
import MySelect from '@/components/mySelect';
import MyOption from '@/components/mySelect/myOption';
const forRef = ref()
const sexOptions = reactive([{ lable: "男", value: 1 }, { lable: "女", value: 2 }])
const data = reactive({
name: "",
age: "",
sex: "",
price: "",
stock: "",
manufacturer: "",
formCheck: null
})
function checkForm() {
data.formCheck = forRef.value.validate()
}
function clearForm() {
forRef.value.resetField()
}
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> 为什么rules写在item上不好使了
最新发布