vue 提交表单前如何做字段校验呢？

最新推荐文章于 2024-09-14 07:19:13 发布

咖啡有点酷

最新推荐文章于 2024-09-14 07:19:13 发布

阅读量2.6k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/qq_40295815/article/details/104353342

版权

vue 专栏收录该内容

62 篇文章 4 订阅

订阅专栏

formValidate 字段校验

举个例子：

<Form :model="formData" ref="formValidate" :rules="formValidate">
      <Row :gutter="32" v-if="isSee">
        <Col span="24">
          <FormItem label="审核意见" label-position="top" prop="orderExpain">
            <Input type="textarea" :rows="4" v-model="formData.orderExpain" placeholder="若驳回，请注明驳回理由" :disabled="!isAudit"/>
          </FormItem>
        </Col>
      </Row>
</Form>

import RulesValidate from './form-validate' 去引你写好的正则表达式页面

import FormDataInfo from './form' 去引你form表单的默认值

data里设定接收的规则跟默认值

data() {
    return {
      formData: FormDataInfo(),
      formValidate: RulesValidate(this)
    }

}

methods里我们要做的就是接口前怎么引正则，以及各个接口怎么获取数据

// 新增
   handleSubmit() {
      this.$refs['formValidate'].validate((valid) => {
        if (valid) {
          let params = {
            id: this.formData.id || undefined,
            content: this.formData.content
          }
          if (this.isOperate) {
            接口url (params).then(({ data }) => {
             
            })
          }
        }
      })
   }

写在index.vue
// 根据参数刷新当前表格(添加、编辑、上传、删除后执行)
    operateSuccess(formData) {
      this.chooseListData = []
      if (!formData.isOperate) {
        // 新增刷新
        this.$refs.tables.handleReset()
        return
      }
      this.initListData()
    },

handleReset () { // 重置信息按钮事件
      this.$refs['formValidate'].resetFields()
},
cancelOperate() { // 取消创建
 this.showDrawer = false   // 关闭弹窗
 this.formData = FormDataInfo()
},
openModel() { // 打开弹窗
  this.showDrawer = true
  this.initFormData()
},
initFormData() { // 根据id 获取详情
      this.handleReset() // 重置表单
      let params = {
        id: this.detailsId
      }
      this.$nextTick(() => {
        if (this.isOperate) {
          initGoodslendDetailsById(params).then(res => {
            if (res.status) {
              const data = res.data
              if (data == null) {
                this.$Message.error('未查询到相关信息')
                return
              }
              this.formData = data.data
          })
        } else {
          this.formData = FormDataInfo()
          this.$forceUpdate()
        }
      })
}