Vue中Form表单中添加Rules规则

1、写入HTML

<el-form :model="pageForm" label-width="80px"  :rules="pageFormRules" ref="pageForm">
      <el-form-item label="文档部门" prop="archiveApartment">
        <el-input v-model="pageForm.archiveApartment" auto-complete="off" ></el-input>
      </el-form-item>
      <el-form-item label="文档标签" prop="archiveNature">
        <el-input v-model="pageForm.archiveNature" auto-complete="off" ></el-input>
      </el-form-item>
      <el-form-item label="文档名称" prop="archiveName">
        <el-input v-model="pageForm.archiveName" auto-complete="off" ></el-input>
      </el-form-item>
      <el-form-item label="保密等级" prop="archiveLevel">
        <el-input v-model="pageForm.archiveLevel" auto-complete="off" ></el-input>
      </el-form-item>
      <el-form-item label="文档位置" prop="archivePosition">
        <el-input v-model="pageForm.archivePosition" auto-complete="off" ></el-input>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker type="datetime" placeholder="创建时间" v-model="pageForm.createTime">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="更新时间">
        <el-date-picker type="datetime" placeholder="更新时间" v-model="pageForm.updateTime">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog‐footer">
      <el-button type="primary" @click="editSubmit" >提交</el-button>
      <el-button type="primary" @click="go_back" >返回</el-button>
    </div>

2、写入data

pageFormRules: {
        archiveApartment:[
          {required: true, message: '请选择部门', trigger: 'blur'}
        ],
        archiveNature:[
          {required: true, message: '请选择标签', trigger: 'blur'}
        ],
        archiveName: [
          {required: true, message: '请输入文档名称', trigger: 'blur'}
        ],
        archiveLevel: [
          {required: true, message: '请输入文档保密等级', trigger: 'blur'}
        ],
        archivePosition: [
          {required: true, message: '请输入文档位置', trigger: 'blur'}
        ],
      },

3、写入methods

editSubmit(){
      this.$refs.pageForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            cmsApi.page_edit(this.id,this.pageForm).then((res) => {
              console.log(res);
              if(res.success){
                this.$message({
                  message: '修改成功',
                  type: 'success'
                });
                //自动返回
                this.go_back();
              }else{
                this.$message.error('修改失败');
              }
            });
          });
        }
      });
    },

4、总结

触发Rules的情况

1. 当不符合规则时会提示用户
2. 当直接提交会触发规则

点击保存时
当提交保存单据的时候会校验参数框里的参数是否符合
如果符合那么回调函数中返回的Valid为ture否则为false