element-plus/docs/examples/form/number-validate.vue

57 lines
1.3 KiB
Vue

<template>
<el-form
ref="formRef"
:model="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="numberValidateForm.age"
type="text"
autocomplete="off"
></el-input>
</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>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { ElForm } from 'element-plus'
type FormInstance = InstanceType<typeof ElForm>
const formRef = ref<FormInstance>()
const numberValidateForm = reactive({
age: '',
})
const submitForm = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.validate((valid) => {
if (valid) {
console.log('submit!')
} else {
console.log('error submit!')
return false
}
})
}
const resetForm = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.resetFields()
}
</script>