使用elemeng-ui 中el-form 表单校验的三种方式

最新推荐文章于 2024-04-12 16:19:47 发布

原创最新推荐文章于 2024-04-12 16:19:47 发布 · 3.9k 阅读

16 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #javascript

本文介绍了在vue项目中使用element-ui进行表单验证的三种方法：一是全局校验，适用于所有字段校验；二是单个字段验证，适合个别字段或动态变化的校验；三是动态增减验证，通过循环匹配字段进行校验。详细步骤和实例代码在文中均有说明。

一、进行element-ui引入

先下载element-ui

cnpm install element-ui -S

完整引入和按需引入在Element-UI官方文档都有详细操作步骤⇥element-ui官方文档

二、表单效验的方式

第一种：在el-form表单上加多个验证

这种方式适用于表单全部字段校验或需要校验字段类型比较简单的数据类型

做法：需要在el-form-item标签中加入 :rules=’'rules ‘’ ，然后在data()中写入rule{添加每个表单的验证}

在data中写入以下代码：
在这里插入图片描述
其中对于有些需要自定义的校验规则可以作为变量写在data中：

在这里插入图片描述

第二种：在el-form-item单个添加验证

这种方式适用于需要个别检验的字段，或者表单字段有变动的校验。

实际操作：需要在el-form-item标签中加入 :rules=’'验证的条件 ‘’

在这里插入图片描述

第三种：动态增减表单验证（element-ui官网方法）

在这里插入图片描述
除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则
这里的rule、prop直接写就对应不上表单mode绑定的对象上的属性，所以在此要用循环的方式找到要校验的字段所在数据中的索引，然后再以字符串拼接的方式连上校验字段名称

<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
  <el-form-item
    prop="email"
    label="邮箱"
    :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]"
  >
    <el-input v-model="dynamicValidateForm.email"></el-input>
  </el-form-item>
  <el-form-item
    v-for="(domain, index) in dynamicValidateForm.domains"
    :label="'域名' + index"
    :key="domain.key"
    :prop="'domains.' + index + '.value'"
    :rules="{
      required: true, message: '域名不能为空', trigger: 'blur'
    }"
  >
    <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
    <el-button @click="addDomain">新增域名</el-button>
    <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        dynamicValidateForm: {
          domains: [{
            value: ''
          }],
          email: ''
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      removeDomain(item) {
        var index = this.dynamicValidateForm.domains.indexOf(item)
        if (index !== -1) {
          this.dynamicValidateForm.domains.splice(index, 1)
        }
      },
      addDomain() {
        this.dynamicValidateForm.domains.push({
          value: '',
          key: Date.now()
        });
      }
    }
  }
</script>