Bootstrap

Vue3+Elementplus表单验证 单个验证 统一验证 自定验证

统一验证

视图:

<el-form ref="formRef" :model="myForm" :rules= "VRules">
          <el-form-item label="ip地址" prop="ip">
            <el-input v-model="myForm.ip" clearable placeholder="请输入ip地址"/>
          </el-form-item>
<el-form>

script:

const VRules = reactive<FormRules>({
  //ip为el-form-item 中prop的值
  ip: [
    { required: true, message: "请输入ip地址", trigger: "blur" },
    {

      pattern: /^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$/,
      message: "ip地址范围在255.255.255.255",
      trigger: ["blur", "change"],
    },
  ]
})

return { VRules }
;