vue3中简单快速的做个表单输入框验证

<el-form ref="formRef" :model="processingProgressForm">
    <el-form-item label="服务商名称:" :label-width="120" prop="rejectRemarks" 
        :rules="[{ required: true, message: '服务商名称不能为空' }]">
      <el-input v-model="processingProgressForm.rejectRemarks" 
        placeholder="请输入" />
    </el-form-item>
</el-form>
<div style="text-align: center;">
     <el-button type="primary" @click="addOption">确认</el-button>
</div>

const formRef = ref();//表单虚拟节点

function addOption() {
    formRef.value.validate((val)=>{
        if(!val) return ElMessage.error("请输入服务商名称");
    })
};

1.一个输入框只做一个非空验证

说明：ref="formRef"是表单的虚拟节点

 :model="processingProgressForm"是绑定的对象

prop="rejectRemarks"要验证的属性

:rules是验证规则，可以直接写到标签上也可以写成变量

这4个属性必须要有

2.一个输入框做多个验证规则

<el-form label-width="85px" :model="editFile" ref="fileFormRef" :rules="rules">
  <el-form-item label="新文件名:" prop="annexesName">
    <el-input v-model="editFile.annexesName" maxlength="200" placeholder="请输入新文件名"></el-input>
  </el-form-item>
<div style="text-align: center;">
     <el-button type="primary" @click="addOption">确认</el-button>
</div>
</el-form>

const fileFormRef = ref() // 重命名表单节点
const rules = reactive({
  annexesName: [
    { required: true, message: "请输入新文件名", trigger: "blur" },
    {
      min: 1,
      max: 200,
      message: "限制1到200个字符",
      trigger: "focus"
    },
    {
      pattern: /^(?![ .。]).*[^\s.](?<![ .。])$/,
      message: "不允许使用空格和句点作为文件或文件夹的开头或结尾",
      trigger: ["change", "blur"]
    },
    {
      pattern: /^[^?？:："\/\*<>|。\\]*$/,
      message: '文件名中不能存在(\ / : * ? " < > |。)这些特殊符号',
      trigger: ["change", "blur"]
    },
  ],
})
function addOption() {
    fileFormRef.value.validate((val)=>{
        if(!val) return ElMessage.error("请输入文件名不能为空");
    })
};

注意：el-form和el-form-item标签都有rules属性，有多个输入框需要做验证的时候放在el-form标签上。其他同上。