element表单验证不起作用？

Question

<template>
  <el-row class="wrap">
    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">图书管理</a></el-breadcrumb-item>
        <el-breadcrumb-item>图书列表</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col> 

    <el-col :span="24" class="warp-main" v-loading="loading"  element-loading-text="拼命加载中">
      <el-col :span="24" class="toolbar">
        <el-form :inline="true" :model="filters">
          <el-form-item>
            <el-input v-model="filters.name" placeholder="书名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">查询</el-button>
          </el-form-item>
          <el-form-item>
          <el-button type="primary" @click="handleAdd()">新增</el-button>
        </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="24">
          <el-table @row-click="handleCurrentChange" @selection-change="selsChange" ref="table" :data="pageData" :default-sort="{prop: 'createAt', order: 'descending'}" stripe style="width: 100%" align="center">
             <el-table-column type="selection"></el-table-column>
            <el-table-column type="index"></el-table-column>
            <el-table-column prop="bookname" label="书名" sortable></el-table-column>
            <el-table-column prop="author" label="作者" sortable></el-table-column>
            <el-table-column prop="date" label="出版日期" sortable></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button type="danger" @click="removeBatch(sels)" :disabled="this.sels.length === 0 || this.disabled" style="float: left;">批量删除</el-button>
          <el-pagination layout="prev, pager, next" :page-size="10" :total="total" style="float: right;"></el-pagination>
      </el-col>
    </el-col>

    <el-dialog title="编辑" :visible.sync="dialogVisible" :before-close="handleClose" align="left">
      <el-form :model="editFormData" status-icon :rules="editRules" ref="editForm" label-width="100px" class="edit-ruleForm">
        <el-form-item label="书名" required props="bookname">
          <el-input type="text" v-model="editFormData.bookname" autocomplete="on"></el-input>
        </el-form-item>
        <el-form-item label="作者" required props="author">
          <el-input type="text" v-model="editFormData.author" autocomplete="on"></el-input>
        </el-form-item>
        <el-form-item label="出版日期" props="publishDate" align="left">
          <el-date-picker v-model="editFormData.publishDate" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
         <el-form-item label="简介" required props="desc">
          <el-input type="textarea" v-model="editFormData.desc" :autosize="{ minRows: 8, maxRows: 10}"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">提交</el-button>
      </span>
    </el-dialog>

    <el-dialog title="新增" :visible.sync="addDialogVisible" :before-close="handleClose" align="left">
      <el-form :model="AddFormData" status-icon :rules="AddRules" ref="addForm" label-width="100px" class="add-ruleForm">
        <el-form-item label="书名" required props="bookname">
          <el-input type="text" v-model="AddFormData.bookname" autocomplete="on"></el-input>
        </el-form-item>
        <el-form-item label="作者" required props="author">
          <el-input type="text" v-model="AddFormData.author" autocomplete="on"></el-input>
        </el-form-item>
        <el-form-item label="出版日期" props="publishDate" align="left">
          <el-date-picker v-model="AddFormData.publishDate" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
         <el-form-item label="简介" required props="desc">
          <el-input type="textarea" v-model="AddFormData.desc" :autosize="{ minRows: 8, maxRows: 10}"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDialogVisible = false">提交</el-button>
      </span>
    </el-dialog>
  </el-row>
</template>

<script>

  export default {
    name: 'BookList',
    data () {
      return {
        loading: false,
        filters: {
          name: ''
        },
        pageSize: 10,
        total: 1,
        page: 1,
        limit: 10,
        pageData: [{
          bookname: '小王子',
          author: '扎克瑞',
          date: '2016-05-02'
        },{
          bookname: '背影',
          author: '朱自清',
          date: '2014-05-02'
        }],
        query: '',
        sort: 'createAt',
        order: 'descending',
        accept: '',
        ws: null,
        sels: [],
        disabled: true,
        dialogVisible: false,
        addDialogVisible: false,
        editFormData:{
          bookname: '听你的',
          author: '张皓宸',
          publishDate: '2018-09-18',
          desc: 'ffffffffgvgvfv'
        },
        editRules: {
          bookname: [
            {required: true, message: '请输入书名', trigger: 'blur'},
            {min: 3, max: 5, message: '长度在3-5个字符',trigger:'blur'}
          ],
          author: [
            {required: true, message: '请输入作者名', trigger: 'blur'},
            {min: 3, max: 5, message: '长度在3-5个字符',trigger:'blur'}
          ],
          desc:[
            {required: true, message: '请填写简介', trigger: 'blur'}
          ]
        },
        AddFormData:{
          bookname: '',
          author: '',
          publishDate: '',
          desc: ''
        },
        AddRules: {
          bookname: [
            {required: true, message: '请输入书名', trigger: 'blur'},
            {min: 3, max: 5, message: '长度在3-5个字符',trigger:'blur'}
          ],
          author: [
            {required: true, message: '请输入作者名', trigger: 'blur'},
            {min: 3, max: 5, message: '长度在3-5个字符',trigger:'blur'}
          ],
          desc:[
            {required: true, message: '请填写简介', trigger: 'blur'}
          ]
        },
      }
    },
    methods: {
      handleEdit (index, row) {
        console.log(index,row)
        this.dialogVisible = true
      },
      handleDelete (index, row){
        console.log(index,row)
         this.$confirm('确认要删除选中的文件吗？', '提示',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log('删除')
          this.$message({
            type: 'success',
            message: '删除成功'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        })
      },
      selsChange (sels) {
        this.sels = sels;
       this.disabled=false;
      },
      removeBatch(rows){
        this.$confirm('确认要删除选中的文件吗？', '提示',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var ids = [];
          rows.forEach(element => {
            ids.push(element.id)
          })
          console.log(ids)
          this.$message({
            type: 'success',
            message: '删除成功'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        })
      },
      handleCurrentChange(row, event, column){
        this.$refs.table.toggleRowSelection(row)
      },
      handleClose(done){
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      handleAdd(){
        this.addDialogVisible = true
      }
    }
  }
</script>

运行结果不报错，但是即使不输入必填信息表单没有提示，哪里错了？

Answer 1

是prop不是props

Answer 2

this.$refs[formName].validate((valid) => {
  if (valid) {
     alert('submit!');
  } else {
     console.log('error submit!!');
     return false;
  }
});

Answer 3

<template>
<el-row class="wrap">

<el-col :span="24" class="warp-breadcrum">
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item><a href="/">图书管理</a></el-breadcrumb-item>
    <el-breadcrumb-item>图书列表</el-breadcrumb-item>
  </el-breadcrumb>
</el-col> 

<el-col :span="24" class="warp-main" v-loading="loading"  element-loading-text="拼命加载中">
  <el-col :span="24" class="toolbar">
    <el-form :inline="true" :model="filters">
      <el-form-item>
        <el-input v-model="filters.name" placeholder="书名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">查询</el-button>
      </el-form-item>
      <el-form-item>
      <el-button type="primary" @click="handleAdd()">新增</el-button>
    </el-form-item>
    </el-form>
  </el-col>
  <el-col :span="24">
      <el-table @row-click="handleCurrentChange" @selection-change="selsChange" ref="table" :data="pageData" :default-sort="{prop: 'createAt', order: 'descending'}" stripe style="width: 100%" align="center">
         <el-table-column type="selection"></el-table-column>
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="bookname" label="书名" sortable></el-table-column>
        <el-table-column prop="author" label="作者" sortable></el-table-column>
        <el-table-column prop="date" label="出版日期" sortable></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button type="danger" @click="removeBatch(sels)" :disabled="this.sels.length === 0 || this.disabled" style="float: left;">批量删除</el-button>
      <el-pagination layout="prev, pager, next" :page-size="10" :total="total" style="float: right;"></el-pagination>
  </el-col>
</el-col>

<el-dialog title="编辑" :visible.sync="dialogVisible" :before-close="handleClose" align="left">
  <el-form :model="editForm" status-icon :rules="editRules" ref="editForm" label-width="100px" class="edit-ruleForm">
    <el-form-item label="书名" required props="bookname">
      <el-input type="text" v-model="editForm.bookname" autocomplete="on"></el-input>
    </el-form-item>
    <el-form-item label="作者" required props="author">
      <el-input type="text" v-model="editForm.author" autocomplete="on"></el-input>
    </el-form-item>
    <el-form-item label="出版日期" props="publishDate" align="left">
      <el-date-picker v-model="editForm.publishDate" type="date" placeholder="选择日期"></el-date-picker>
    </el-form-item>
     <el-form-item label="简介" required props="desc">
      <el-input type="textarea" v-model="editForm.desc" :autosize="{ minRows: 8, maxRows: 10}"></el-input>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="edit('editForm')">提 交</el-button>
  </span>
</el-dialog>

<el-dialog title="新增" :visible.sync="addDialogVisible" :before-close="handleClose" align="left">
  <el-form :model="AddForm" status-icon :rules="AddRules" ref="addForm" label-width="100px" class="add-ruleForm">
    <el-form-item label="书名" required props="bookname">
      <el-input type="text" v-model="AddForm.bookname" autocomplete="on"></el-input>
    </el-form-item>
    <el-form-item label="作者" required props="author">
      <el-input type="text" v-model="AddForm.author" autocomplete="on"></el-input>
    </el-form-item>
    <el-form-item label="出版日期" props="publishDate" align="left">
      <el-date-picker v-model="AddForm.publishDate" type="date" placeholder="选择日期"></el-date-picker>
    </el-form-item>
     <el-form-item label="简介" required props="desc">
      <el-input type="textarea" v-model="AddForm.desc" :autosize="{ minRows: 8, maxRows: 10}"></el-input>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="add('addForm')">提 交</el-button>
  </span>
</el-dialog>

</el-row>
</template>

<script>

export default {

name: 'BookList',
data () {
  return {
    loading: false,
    filters: {
      name: ''
    },
    pageSize: 10,
    total: 1,
    page: 1,
    limit: 10,
    pageData: [{
      bookname: '小王子',
      author: '扎克瑞',
      date: '2016-05-02'
    },{
      bookname: '背影',
      author: '朱自清',
      date: '2014-05-02'
    }],
    query: '',
    sort: 'createAt',
    order: 'descending',
    accept: '',
    ws: null,
    sels: [],
    disabled: true,
    dialogVisible: false,
    addDialogVisible: false,
    editForm:{
      bookname: '听你的',
      author: '张皓宸',
      publishDate: '2018-09-18',
      desc: 'ffffffffgvgvfv'
    },
    editRules: {
      bookname: [
        {required: true, message: '请输入书名', trigger: 'blur'},
        {min: 3, max: 5, message: '长度在3-5个字符',trigger:'blur'}
      ],
      author: [
        {required: true, message: '请输入作者名', trigger: 'blur'},
        {min: 3, max: 5, message: '长度在3-5个字符',trigger:'blur'}
      ],
      desc:[
        {required: true, message: '请填写简介', trigger: 'blur'}
      ]
    },
    AddForm:{
      bookname: '',
      author: '',
      publishDate: '',
      desc: ''
    },
    AddRules: {
      bookname: [
        {required: true, message: '请输入书名', trigger: 'blur'},
        {min: 3, max: 5, message: '长度在3-5个字符',trigger:'blur'}
      ],
      author: [
        {required: true, message: '请输入作者名', trigger: 'blur'},
        {min: 3, max: 5, message: '长度在3-5个字符',trigger:'blur'}
      ],
      desc:[
        {required: true, message: '请填写简介', trigger: 'blur'}
      ]
    },
  }
},
methods: {
  handleEdit (index, row) {
    console.log(index,row)
    this.dialogVisible = true
  },
  handleDelete (index, row){
    console.log(index,row)
     this.$confirm('确认要删除选中的文件吗？', '提示',{
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      console.log('删除')
      this.$message({
        type: 'success',
        message: '删除成功'
      });
    }).catch(() => {
      this.$message({
        type: 'info',
        message: '已取消删除'
      });
    })
  },
  selsChange (sels) {
    this.sels = sels;
   this.disabled=false;
  },
  removeBatch(rows){
    this.$confirm('确认要删除选中的文件吗？', '提示',{
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      var ids = [];
      rows.forEach(element => {
        ids.push(element.id)
      })
      console.log(ids)
      this.$message({
        type: 'success',
        message: '删除成功'
      });
    }).catch(() => {
      this.$message({
        type: 'info',
        message: '已取消删除'
      });
    })
  },
  handleCurrentChange(row, event, column){
    this.$refs.table.toggleRowSelection(row)
  },
  handleClose(done){
    this.$confirm('确认关闭？')
      .then(_ => {
        done();
      })
      .catch(_ => {});
  },
  handleAdd(){
    this.addDialogVisible = true
  },
  edit(formName){
    this.$refs[formName].validate((valid) => {
      if (valid) {
        alert('submit!');
      } else {
        console.log('error submit!')
        return false;
      }
    })
    this.dialogVisible = false;
  },
  add(formName){
    this.$refs[formName].validate((valid) => {
      if (valid) {
        alert('submit!');
      } else {
        console.log('error submit!')
        return false;
      }
    })
    this.addDialogVisible = false
  }
 
}

}
</script>

<style lang="scss" scoped>

.demo-table-expand label {
font-weight: bold;

}
</style>
加入还是没用