vue 表单验证点击按钮触发表单验证事件

Vue.js：点击按钮触发表单验证实践

最新推荐文章于 2024-09-09 15:38:08 发布

原创最新推荐文章于 2024-09-09 15:38:08 发布 · 7.1k 阅读

2 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

157 篇文章

订阅专栏

本文介绍如何在Vue.js应用中实现表单验证，重点在于当用户点击提交按钮时触发验证事件。通过自定义指令和计算属性，确保在数据提交前对必填项和格式进行有效检查，提高用户体验。

<el-form
  ref="listQuery"
  :rules="rules"
  :inline="true"
  :model="listQuery"
  label-position="left"
  class="input_serch">
  <el-row type="flex" justify="" align="middle">
    <!-- 发起时间-->
    <el-form-item class="innerStyle" label="发起时间" prop="dataRange">
      <el-date-picker
        v-model="listQuery.dataRange"
        type="datetimerange"
        range-separator="-"
        size="small"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        format="yyyy-MM-dd HH:mm:ss"
        value-format="yyyy-MM-dd HH:mm:ss"
        text="erdf"
        prefix-icon="el-icon-date"
        class="innerSelTime"
        @change="queryTime()"
        @focus="dateTimeFocus()"
      />
    </el-form-item>
    <!--类型-->
    <el-form-item class="form-item" label="类型" prop="sheetType">
      <el-select v-model="listQuery.sheetType" placeholder="请选择">
        <el-option
          v-for="item in workType"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <xyy-button @click="handerSearch('listQuery')">搜索</xyy-button>
    </el-form-item>
  </el-row>
</el-form>

 data() {
    return {
      list: [], // 数据
      listQuery: {
        page: 1,
        pageSize: 10,
        total: 0,
        dataRange: [], // 日期
        sheetType: '', // 类型
      },
      rules: {
        dataRange: [
          { required: true, message: '日期为必填项', trigger: 'blur' },
        ]
      },
      workType: [{ // 工单类型选项
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }],
      workLocation: [{ // 客户所在地
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }]
    }
  },
  methods: {
    // 点击搜索事件
    handerSearch(name) {
      // 验证日期为必填项
      this.$refs[name].validate((valid) => {
        if (valid) {

        } else {
          this.$Message.error('Fail!');
        }
      })
    },
  }