element ui 表单验证不起作用

Question

<template>
  <!-- 编辑模板代码 -->
  <div>
    <el-form ref="productForm" v-bind:rules="productRules" v-bind:model="productModel" label-width="80px" style="width: 80%">
      <el-form-item label="产品名称" prop="productName">
        <el-input type="text" auto-complete="off" v-model="productModel.product.name" placeholder="请输入产品名称"></el-input>
      </el-form-item>
      <el-form-item label="产品描述" prop="description">
        <el-input type="textarea" v-model="productModel.product.description" placeholder="请输入产品描述"></el-input>
      </el-form-item>
      <el-form-item label="产品类型" prop="sub_type">
        <el-select v-model="productModel.product.sub_type" placeholder="请选择产品类型">
          <el-option label="普通产品" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="产品分类" prop="category_id">
        <el-select v-model="productModel.product.category_id" placeholder="请选择产品分类">
          <el-option v-for="item in categoryList" v-bind:key="item.value" v-bind:label="item.label" v-bind:value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="产品品牌" prop="trademark_id">
        <el-select v-model="productModel.product.trademark_id" placeholder="请选择产品品牌">
          <el-option v-for="item in trademarkList" v-bind:key="item.value" v-bind:label="item.label" v-bind:value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="产品原价" prop="price">
        <el-input  v-model.number="productModel.product.price" placeholder="请输入产品原价"></el-input>
      </el-form-item>
      <el-form-item label="产品价格" prop="pay_price">
        <el-input  v-model.number="productModel.product.pay_price" placeholder="请输入产品价格"></el-input>
      </el-form-item>
      <el-form-item label="是否包邮" prop="pinkage">
        <el-switch on-text="" off-text="" v-model="productModel.product.pinkage"></el-switch>
      </el-form-item>
      <el-form-item label="是否可用" prop="enabled">
        <el-switch on-text="" off-text="" v-model="productModel.product.enabled"></el-switch>
      </el-form-item>
      <el-form-item label="是否有货" prop="stock">
        <el-switch on-text="" off-text="" v-model="productModel.product.stock"></el-switch>
      </el-form-item>
      <el-form-item label="特殊规格" prop="use_std">
        <el-switch on-text="" off-text="" v-model="productModel.product.use_std"></el-switch>
      </el-form-item>
      <el-form-item v-show="productModel.product.use_std">
        <el-button type="primary" v-on:click="addStandard"><i class="el-icon-plus"></i> 添加规格</el-button>
        <el-table border v-bind:data="productModel.stds" style="width: 100%; margin-top: 10px">
          <el-table-column label="类型">
            <template scope="scope">
              <template v-if="scope.row.type === '1'">尺码</template>
              <template v-else-if="scope.row.type === '2'">型号</template>
              <template v-else-if="scope.row.type === '3'">规格</template>
              <template v-else-if="scope.row.type === '4'">颜色</template>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column label="是否有货">
            <template scope="scope">
              <template v-if="scope.row.stock === true">
                <i class="el-icon-check"></i>
              </template>
              <template v-else>
                <i class="el-icon-close"></i>
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注"></el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="新增产品参数" prop="use_property">
        <el-switch on-text="" off-text="" v-model="productModel.product.use_property"></el-switch>
      </el-form-item>
      <el-form-item v-show="productModel.product.use_property">
        <el-button type="primary" v-on:click="addProperty"><i class="el-icon-plus"></i> 添加参数</el-button>
        <el-table border v-bind:data="productModel.properties" style="width: 100%; margin-top: 10px">
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column prop="content" label="内容"></el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="封面图">
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :file-list="coverImgList"
          list-type="picture">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="描述图">
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :file-list="coverImgList"
          list-type="picture">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="submitProductForm">立即创建</el-button>
      </el-form-item>
    </el-form>
    <el-dialog title="新增规格" v-bind:visible.sync="addStandardDialogFormVisible">
      <el-form v-bind:model="standard" v-bind:rules="standardRules">
        <el-form-item label="规格类型" prop="type" label-width="120px">
          <el-select v-model="standard.type" placeholder="请选择规格类型">
            <el-option label="尺码" value="1"></el-option>
            <el-option label="型号" value="2"></el-option>
            <el-option label="规格" value="3"></el-option>
            <el-option label="颜色" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="规格名称" prop="name" label-width="120px">
          <el-input type="text" v-model="standard.name" auto-complete="off" placeholder="请输入规格名称"></el-input>
        </el-form-item>
        <el-form-item label="规格备注" prop="remark" label-width="120px">
          <el-input type="text" v-model="standard.remark" auto-complete="off" placeholder="请输入规格备注"></el-input>
        </el-form-item>
        <el-form-item label="是否有货" prop="stock" label-width="120px">
          <el-switch on-text="" off-text="" v-model="standard.stock"></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-on:click="addStandardDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" v-on:click="confirmAddStandard">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="新增产品参数" v-bind:visible.sync="addPropertyDialogFormVisible">
      <el-form v-bind:model="property" v-bind:rules="propertyRules">
        <el-form-item label="参数名" prop="name" label-width="120px">
          <el-input type="text" v-model="property.name" auto-complete="off" placeholder="请输入参数名"></el-input>
        </el-form-item>
        <el-form-item label="参数值" prop="content" label-width="120px">
          <el-input type="text" v-model="property.content" auto-complete="off" placeholder="请输入参数值"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-on:click="addPropertyDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" v-on:click="confirmAddProperty">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  /* 再此定义JS，采用ES6标准格式 */
  export default {
    name: 'Add',
    data () {
      return {
        addStandardDialogFormVisible: false,
        standard: {
          type: null,
          name: '',
          stock: true,
          remark: ''
        },
        standardRules: {
          type: [
            {
              required: true,
              message: '规格类型不能为空',
              trigger: 'blur'
            }
          ],
          name: [
            {
              required: true,
              message: '规格名称不能为空',
              trigger: 'blur'
            }
          ]
        },
        property: {
          name: '',
          content: ''
        },
        addPropertyDialogFormVisible: false,
        propertyRules: {
          name: [
            {
              required: true,
              message: '参数名不能为空',
              trigger: 'blur'
            }
          ],
          content: [
            {
              required: true,
              message: '参数值不能为空',
              trigger: 'blur'
            }
          ]
        },
        productRules: {
          productName: [
            { required: true, message: '商品名称不能为空', trigger: 'blur' },
            { min: 2, max: 22, message: '长度在2到22个字符', trigger: 'blur' }
          ],
          sub_type: [
            {
              required: true,
              message: '类型不能为空',
              trigger: 'blur'
            }
          ],
          category_id: [
            {
              required: true,
              message: '分类不能为空',
              trigger: 'blur'
            }
          ],
          trademark_id: [
            {
              required: true,
              message: '品牌不能为空',
              trigger: 'blur'
            }
          ],
          price: [
            {
              required: true,
              message: '原价不能为空',
              trigger: 'blur'
            }
          ],
          pay_price: [
            {
              required: true,
              message: '价格不能为空',
              trigger: 'blur'
            }
          ]
        },
        // 产品模型
        productModel: {
          // 产品基本信息
          product: {
            name: '',
            description: '',
            type: null,
            sub_type: null,
            price: null,
            pay_price: null,
            face_url: '',
            pinkage: true,
            enabled: true,
            stock: true,
            use_stock: true,
            size: 0,
            use_size: false,
            multi_cover: false,
            use_std: false,
            use_std_price: false,
            multi_intro: false,
            use_property: false,
            category_id: 1,
            trademark_id: 0
          },
          // 产品图片信息
          productPics: [],
          // 产品属性信息
          properties: [],
          // 产品规格信息
          stds: [],
          // 是否更新过图片
          updatePic: true,
          // 是否更新过属性
          updateProperty: true,
          // 是否更新过规格
          updateStd: true
        },
        // 分类数据
        categoryList: [
          {
            value: 1,
            label: '无分类'
          }
        ],
        // 商品品牌
        trademarkList: [
          {
            value: 0,
            label: '无品牌'
          }
        ],
        // 封面图片
        coverImgList: [
          {
            name: 'food.jpeg',
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
          },
          {
            name: 'food2.jpeg',
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
          }
        ],
        introImgList: [
          {
            name: 'food.jpeg',
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
          },
          {
            name: 'food2.jpeg',
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
          }
        ]
      }
    },
    methods: {
      addStandard: function () {
        this.addStandardDialogFormVisible = true
      },
      confirmAddStandard: function () {
        var vue = this
        let flag = false
        for (let i in vue.productModel.stds) {
          let std = vue.productModel.stds[i]
          if (std.name === vue.standard.name && std.type === vue.standard.type) {
            flag = true
            break
          }
        }
        if (flag) {
          vue.$message({
            showClose: true,
            message: '该规格已经存在',
            type: 'warning'
          })
          return
        }
        vue.productModel.stds.push({
          type: vue.standard.type,
          name: vue.standard.name,
          stock: vue.standard.stock,
          remark: vue.standard.remark
        })
        vue.addStandardDialogFormVisible = false
      },
      addProperty: function () {
        var vue = this
        vue.addPropertyDialogFormVisible = true
      },
      confirmAddProperty: function () {
        var vue = this
        let flag = false
        for (let i in vue.productModel.properties) {
          let property = vue.productModel.properties[i]
          if (property.name === vue.property.name) {
            flag = true
            break
          }
        }
        if (flag) {
          vue.$message({
            showClose: true,
            message: '该属性已经存在',
            type: 'warning'
          })
          return
        }
        vue.productModel.properties.push({
          name: vue.property.name,
          content: vue.property.content
        })
        console.log(vue.productModel.properties)
        vue.addPropertyDialogFormVisible = false
      },
      submitProductForm () {
        console.log('submitProductForm!')
      }
    }
  }
</script>
<style scoped>
  /* 在此定义当前页面css */

</style>

贴上全部代码
明明已经输入了，但是离开该焦点，还是提示不能为空

Answer 1

<el-form-item label="产品名称" prop="productName">
   <el-input type="text" auto-complete="off" v-model="productModel.productName"         placeholder="请输入产品名称"></el-input>
</el-form-item>
  
  data()--->productName: '',
  

我把v-model改成这样就正常了,可能是prop内容和你下面的v-model不一样造成的

Answer 2

没看到你全部的代码，我感觉是你的vm结构不对，我贴出一段代码，你运行然后理解一下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
</head>

<body>
    <div id="app">
        <el-form :model="form" :rules="formRules" ref="form">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="form.username"></el-input>
            </el-form-item>
        </el-form>
    </div>
</body>
<!-- 引入vue -->
<script src="http://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            form: {
                username: ''
            },
            formRules: {
                username: [{
                    required: true,
                    message: '请输入用户名',
                    trigger: 'blur'
                }]
            }
        }
    })
</script>

</html>

最好多看看官方的示例

Answer 3

Answer 4

form上v-bind:model应该是需要验证的属性的父对象才对！
这里，你把form组件上的v-bind:model="productModel"改成:model="productModel.product"
可以尝试一下！

Answer 5

原来是类似productModel.product.name这种三级绑定的时候，校验规则好像对应不上,我把productModel里面的product单独提取出来成为product,再绑定就好了。

Answer 6

你好 我想问问你的那个表单多重验证是怎么做的 求 就是 你之前提到过的那个 比如 form.product.name 因为这个格式是不能改的 你怎么做成功的 你是变成一级对象了吗