vue element form 自定义校验1(表单校验)

最新推荐文章于 2024-05-10 10:04:27 发布

Claroja

最新推荐文章于 2024-05-10 10:04:27 发布

阅读量464

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/claroja/article/details/113824877

版权

vue 专栏收录该内容

69 篇文章 0 订阅

订阅专栏

该博客展示了如何在Vue.js中使用el-form组件进行表单数据绑定、校验规则设置，并通过ref属性获取表单对象，实现表单整体校验和自定义验证规则。在提交按钮点击事件中，调用validate函数检查表单的有效性，确保数据符合预期格式。

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

通过ref属性获得表单对象,调用表单对象的validate函数进行表单的整体校验

<template>
  <!--model绑定整个form对象的的数据-->
  <!--rules绑定校验规则-->
  <!--通过ref属性获得表单对象,调用resetFieleds方法重置表单的字段-->
  <el-card>
    <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
      <el-form-item label="活动名称" prop="name">
        <!--通过form对象访问key-->
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <p>{{form.name}}</p>
    </el-form>
    <el-button type="primary" @click="commit()">提交</el-button>

  </el-card>

</template>

<script>
export default {
  data () {
    // 校验规则是一个函数变量
    var checkEmail = (rule, value, cb) => { // 验证邮箱的正则表达式
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
      if (regEmail.test(value)) return cb()
      cb(new Error('请输入合法的邮箱'))
    }
    return {
      form: {
        name: ''
      },
      rules: {
        name: [
          { required: true, message: '不为空', trigger: 'blur' },
          { min: 3, max: 10, message: '长度3-10', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }// 使用自定义校验规则
        ]
      },
    }
  },
  methods: {
    commit () {
      this.$refs.formRef.validate(valid => {
        if (!valid) return// 如果校验未通过则直接返回
      })
    }
  }
}
</script>