vue中使用elementui中表单验证规则，async和await异步函数处理

最新推荐文章于 2024-09-10 21:00:00 发布

今天也要好好生活哦

最新推荐文章于 2024-09-10 21:00:00 发布

阅读量6.1k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_41985467/article/details/105124510

版权

本文介绍了在Vue项目中结合ElementUI进行表单验证的方法，包括设置表单规则、prop属性绑定、data数据层定义rules，以及如何在异步函数中处理表单验证。特别强调了在机构信息修改场景下，使用async和await进行异步校验的实现，通过在表单元素上添加ref属性与验证函数关联。

摘要由CSDN通过智能技术生成

基于elementui

在适当的el-form表单中添加规则

:rules:"rules"

然后给所需要表单规则验证的属性添加prop属性
（在el-form-item中加上prop，然后在输入框内的输入的值和它要双向绑定）

<el-form-item label="机构代码:" :label-width="formLabelWidth" prop="code">
              <el-input v-model="organization.code" autocomplete="off" :style="{width : '500px'}"></el-input>
            </el-form-item>

然后在返回的data数据层中定义rules规则

//表单规则
      rules: {
   
        code: [
          {
   
            required: true,
            message: "机构代码可以由英文字母和下划线组成",
            validator: validatorCode,
            trigger: "blur"
          }
        ],
        name: [
          {
    required: true, message: "请输入组织机构名称", trigger: "blur" }
        ],
        contact: [
          {
   
            required: true,
            message: "请输入联系人",
            trigger: "change",
            validator: validatorContact
          }
        ],
        phone: [
          {
   
            required: true,
            message: "请输入正确的手机号码",
            validator: validatorPhone,
            trigger: "blur"
          }
        ],
        licenseUrl: [
          {
    required: true, message: "请输入营业许可URL", trigger: "blur" },
          {
   
            type: "url",
            min: 1,
            max: 1,
            message: "请上传