javascript
复制代码
<template>
<el-form :model="formData" ref="form1Ref" :rules="rules">
<el-form-item label="手机号" prop="tel">
<el-input v-model="formData.tel" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm()">注册</el-button>
<el-button @click="resetForm()">重置</el-button>
</el-form-item>
</el-form>
</template>
<script setup lang="ts">
const formData = reactive({
tel: '',
code: '',
})
const rules = reactive({
code: [
{ required: true, message: '请输入验证码', trigger: 'blur' },
{ pattern: /^\d{4}$/, message: '验证码为4位数字', trigger: 'blur' },
],
})
const submit = () => {
console.log(formData);
}
const form1Ref = ref() // XXXXRef 是查找原生的dom对象 ? 在vue中如何获取原生的dom组件
const submitForm = async () => {
await form1Ref.value.validate((valid: any, fields: any) => {
if (valid) {
submit()
}
})
}
const resetForm = () => {
form1Ref.value.resetFields()
}
</script>