vue中自定义form表单字段验证

2022-09-13 05:11:00 by wst

vue

---

在解决实际问题过程中，总会遇到各种各样的问题。

比如：编辑商品的时候，需要添加规格，但是规格又要动态添加。提交后还要验证。

验证逻辑：“商品规格”至少要添加一个规格，且添加的规格任一项都不能为空。

界面：代码：

<template>
  <div>
    <!-- 导航条 -->
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-goods"></i> 商品管理
        </el-breadcrumb-item>
        <el-breadcrumb-item>我的商品</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="container">

      <el-form ref="form" :model="form" label-width="70px" :rules="rules">
        <el-form-item label="商品ID" prop="id">
          <el-input v-model="form.id" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="商品名" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>

        <!-- 规格编辑-->
        <el-form-item label="商品规格" prop="specification" required>
          <el-table
              :data="form.specification"
              stripe>
            <el-table-column
                align="center"
                prop="attr_value"
                label="规格名称"
                width="150">
              <template slot-scope="scope">
                <el-input v-model="scope.row.attr_value"
                          placeholder="规格名称"
                          type="textarea"
                          autosize
                          class="handle-input-big"></el-input>
              </template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="sku"
                label="规格编号"
                width="150">
              <template slot-scope="scope">
                <el-input v-model="scope.row.sku"
                          placeholder="规格编号"
                          class="handle-input-big"></el-input>
              </template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="price"
                label="价格"
                width="100">
              <template slot-scope="scope">
                <CurrencyInput
                    v-model="scope.row.price"
                    placeholder="价格"
                    class="inline-input"
                    :options="{ currency: 'CNY' }"/>
              </template>

            </el-table-column>
            <el-table-column
                align="center"
                prop="origin_price"
                label="原价"
                width="100"
            >
              <template slot-scope="scope">
                <CurrencyInput
                    v-model="scope.row.origin_price"
                    placeholder="原价"
                    class="inline-input"
                    :options="{ currency: 'CNY' }"/>
              </template>

            </el-table-column>
            <el-table-column
                align="center"
                prop="cost"
                label="成本"
                width="100"
            >
              <template slot-scope="scope">
                <CurrencyInput
                    v-model="scope.row.cost"
                    placeholder="成本"
                    class="inline-input"
                    :options="{ currency: 'CNY' }"/>
              </template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="stock"
                label="库存"
                width="100"
            >
              <template slot-scope="scope">
                <el-input v-model.number="scope.row.stock" placeholder="库存" class="inline-input"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot="header" slot-scope="scope">
                <el-button
                    type="text"
                    icon="el-icon-edit"
                    @click="addItem"
                >增加
                </el-button>
              </template>

              <template slot-scope="scope">
                <el-button
                    type="text"
                    icon="el-icon-delete"
                    class="red"
                    @click="deleteItem(scope.$index, scope.row)"
                >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </div>

  </div>
</template>

<script>
import CurrencyInput from '../common/CurrencyInput'

export default {
  name: "basetable",
  components: {CurrencyInput},
  data() {
    // 自定义校验规则
    var checkSpec = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('规格不能为空'));
      }
      setTimeout(() => {
        if (value.length > 0){
          for(let rec of value){
            for(let key in rec){
              if(!rec[key]){
                callback(new Error('请完善规格的所有字段'))
              }
            }
          }
          callback()
        } else {
          callback(new Error('请至少添加一种规格'))
        }
      }, 500);
    };

    return {
      form: {
        id: null,
        name: '',
        specification: []
      },
      baseSpec: {
        attr_value: '',
        price: null,
        origin_price: null,
        stock: null,
        cost: null,
        sku: ''
      },

      // 编辑框校验规则
      rules: {
        name: [
          {required: true, message: '请输入商品名称', trigger: 'blur'},
          {min: 3, max: 100, message: '长度在3-100个字符', trigger: 'blur'}
        ],
        specification: [
            { required: true, message: '请增加规格', trigger: 'change' },
            {validator: checkSpec, trigger: 'change'}
          ],

      }
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 删除规格
    deleteItem(index, item) {
      this.form.specification.splice(index, 1)
    },

    // 增加规格
    addItem() {
      var obj = JSON.parse(JSON.stringify(this.baseSpec))
      this.form.specification.push(obj)
    },

    // 添加记录操作
    handleAdd(index, row) {
      this.form.file = null;
      this.editVisible = true;
    },

    // 保存编辑, 同时提交到后台
    saveEdit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          console.log("校验通过")
          this.$message.success("校验通过")
          return true
        } else {
          console.log('error submit!!');
          this.$confirm("提交错误，请检查输入", "提示", {
            type: "warning",
          })
          return false;
        }
      });
    },


  },
};
</script>

<style scoped>


.inline-input {
  width: 80px;
}

.handle-input-big {
  width: 100px;
}

.red {
  color: #ff0000;
}



</style>

 

---