<template>
<el-form
ref="formRef"
:model="state.numberValidateForm"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item
label="age"
prop="age"
:rules="[
{ required: true, message: 'age is required' },
{ type: 'number', message: 'age must be a number' },
]"
>
<el-input
v-model.number="state.numberValidateForm.age"
type="text"
autocomplete="off"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm(formRef)">Submit</el-button>
<el-button @click="resetForm(formRef)">Reset</el-button>
</el-form-item>
</el-form>
{{ state.text }}
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import FormInstance from "element-plus";
export default defineComponent({
name: "Visit",
setup() {
const state = reactive({
text: "",
numberValidateForm: {
age: "",
},
});
const formRef = ref<typeof FormInstance>();
const submitForm = (formEl: typeof FormInstance | undefined) => {
if (!formEl) return;
(formEl as any).validate((valid) => {
if (valid) {
state.text = "已经通过验证";
} else {
state.text = "";
return false;
}
});
};
const resetForm = (formEl: typeof FormInstance | undefined) => {
if (!formEl) return;
(formEl as any).resetFields();
state.text = "";
};
return {
state,
formRef,
submitForm,
resetForm
};
},
});
</script>
<style lang="scss" scoped>
.demo-ruleForm {
margin: 20px;
}
</style>
03-02
1490
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
03-02
2279
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)