Vue3(setup)之ElementPlus Form表单的非空检验

效果图

1. 引入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>