vue表单多种语言录入校验

实现思路

1.首先理清数据格式，多语言和内容都是数组格式

2.所以需要有2次的for循环

提交的时候有两种方式校验

第一种：

<template>
  <div>
    <div class="main">
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">

        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>

        <el-tabs v-model="activeName">
          <el-tab-pane v-for="(item,index) in form.list" :key="index" :label="langEum[item.lang]" :name="item.lang">
            <el-form :ref="`form${item.lang}${index}`" :model="item" label-width="80px" :rules="rules">
              <el-form-item label="标题" prop="title">
                <el-input v-model="item.title" style="width:90%"></el-input>
              </el-form-item>
              <el-form-item label="内容" v-for="(item2,index2) in item.content" :key="index2" :prop="'content.'+index2+'.value'" :rules="rules.value">
                <el-input v-model="item2.value" style="width:90%"></el-input>
                <i class="el-icon-circle-plus-outline" @click="add(item)"></i>
                <i class="el-icon-remove-outline" @click="del(item,index2)" v-if="item.content.length>1 && item.content.length -1 === index2"></i>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>

      </el-form>
      <el-button type="primary" @click="btn()">提交</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeName: 'cn',
      form: {
        name: '',
        list: [
          {
            lang: 'cn',
            title: '',
            content: [
              { value: '' }
            ]
          },
          {
            lang: 'dn',
            title: '',
            content: [
              { value: '' }
            ]
          },
          {
            lang: 'en',
            title: '',
            content: [
              { value: '' }
            ]
          }
        ]
      },
      langEum: {
        cn: '中',
        dn: '英',
        en: '的'
      },
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        value: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    btn () {
      // 定义一个变量
      let arr = true
      //校验整个的
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          arr = false
        }
        // 校验单个的
        for (let i = 0; i < this.form.list.length; i++) {
          let item = this.form.list[i]
          this.$refs[`form${item.lang}${i}`][0].validate((valid) => {
            if (!valid) {
              arr = false
            }
          })
        }
        // 校验不通过
        if (!arr) {
          this.$message.error('未填写完成')
          return false
        }
        // 校验通过
        if (arr) {
          console.log('成功');
        }
      })
    },
    add (item) {
      item.content.push({ value: '' })
    },
    del (item, index2) {
      item.content.splice(index2, 1)
    }
  }
}
</script>

<style lang="less" scoped>
.main {
  width: 1080px;
  margin: 0 auto;
  border: 1px solid black;
  padding: 20px;
}
</style>

 第二种

<template>
  <div>
    <div class="main">
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">

        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>

        <el-tabs v-model="activeName">
          <el-tab-pane v-for="(item,index) in form.list" :key="index" :label="langEum[item.lang]" :name="item.lang">
            <el-form :ref="`form${item.lang}${index}`" :model="item" label-width="80px" :rules="rules">
              <el-form-item label="标题" prop="title">
                <el-input v-model="item.title" style="width:90%"></el-input>
              </el-form-item>
              <el-form-item label="内容" v-for="(item2,index2) in item.content" :key="index2" :prop="'content.'+index2+'.value'" :rules="rules.value">
                <el-input v-model="item2.value" style="width:90%"></el-input>
                <i class="el-icon-circle-plus-outline" @click="add(item)"></i>
                <i class="el-icon-remove-outline" @click="del(item,index2)" v-if="item.content.length>1 && item.content.length -1 === index2"></i>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>

      </el-form>
      <el-button type="primary" @click="btn()">提交</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeName: 'cn',
      form: {
        name: '',
        list: [
          {
            lang: 'cn',
            title: '',
            content: [
              { value: '' }
            ]
          },
          {
            lang: 'dn',
            title: '',
            content: [
              { value: '' }
            ]
          },
          {
            lang: 'en',
            title: '',
            content: [
              { value: '' }
            ]
          }
        ]
      },
      langEum: {
        cn: '中',
        dn: '英',
        en: '的'
      },
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        value: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    btn () {
      this.$refs['form'].validate(async (valid) => {
        // 校验单个的
        let arr = []
        for (let i = 0; i < this.form.list.length; i++) {
          let item = this.form.list[i]
          try {
            await this.$refs[`form${item.lang}${i}`][0].validate()
            arr.push(true)
          } catch (error) {
            arr.push(false)
          }
        }
        // 判断校验是否都成功，有一项不成功就是false
        let falg = arr.every(item => item)
        // 校验不成功
        if (!valid || !falg) {
          this.$message.error('未填写')
        }
        // 校验成功
        if (valid && falg) {
          this.$message.success('成功')
          console.log(this.form);
        }
      })
    },
    add (item) {
      item.content.push({ value: '' })
    },
    del (item, index2) {
      item.content.splice(index2, 1)
    }
  }
}
</script>

<style lang="less" scoped>
.main {
  width: 1080px;
  margin: 0 auto;
  border: 1px solid black;
  padding: 20px;
}
</style>