效果图
- 引入getCurrentInstance
import { getCurrentInstance,reactive } from "vue";
2.创建proxy实例
let { proxy } = getCurrentInstance();
3.from表单的确定按钮的方法(fromRef是形参)
const sureColInfoHandler = async (formRef) => {
proxy.$refs[formRef].validate(valid => {
if(!valid) return
//代码块
});
};
4.清除样式的验证提示(重置)
let colInfoRef=ref()
function reset(){
if(proxy.$refs.colInfoRef){
proxy.$refs.colInfoRef.clearValidate()
}
}
5.制定rules规则
const data = reactive({
form: {},
rules: {
description: [
{ required: true, message: "说明不能为空", trigger: "blur" },
{ required: true,pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,message: "请输入正确的手机号码",trigger: "blur",},
],
},
});
const { form,rules } = toRefs(data);
6.template样式部分(重点是①sureColInfoHandler方法的参数是ref的值;②colInfoRef要带引号;③:rules是最基本的;④prop一定要加上,不然没有效果)
<el-dialog :title="title" v-model="dialogFormVisible" width="500px" append-to-body>
<el-form :model="form" :rules="rules" ref="colInfoRef" label-width="80px">
<el-row>
<el-col :span="20">
<el-form-item label="手机号" prop="description">
<el-input v-model="form.description" placeholder="请输入手机号" maxlength="30" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="sureColInfoHandler('colInfoRef')">确定</el-button>
</div>
</template>
</el-dialog>