mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-04 04:08:34 +08:00
052af0c5eb
* docs: delete form exampls validate return value * docs: delete form exampls validate return value * update form.md * docs: delete form validate return
56 lines
1.2 KiB
Vue
56 lines
1.2 KiB
Vue
<template>
|
|
<el-form
|
|
ref="formRef"
|
|
style="max-width: 600px"
|
|
:model="numberValidateForm"
|
|
label-width="auto"
|
|
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-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 { FormInstance } from 'element-plus'
|
|
|
|
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!')
|
|
}
|
|
})
|
|
}
|
|
|
|
const resetForm = (formEl: FormInstance | undefined) => {
|
|
if (!formEl) return
|
|
formEl.resetFields()
|
|
}
|
|
</script>
|