{技术操作} element 表单验证

###html

:rules=“rules” ref=“ruleForm” 这两个很重要

然后在每个 el-form-item 里面设置prop属性为 ruleForm的值 例：prop=“shenqingID”

   <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm" >
        <el-row>
          <el-col :span="8">
            <el-form-item label-width="150px" label="申请ID：" prop="shenqingID" size="mini">
              <el-input v-model="ruleForm.shenqingID" style="max-width:240px" placeholder="自动分配"></el-input>
            </el-form-item>
            <el-form-item label-width="150px" label="申请人：" prop="shenqingren" size="mini">
              <el-input
                v-model="ruleForm.shenqingren"
                style="max-width:240px"
                placeholder="申请人用户ID，自动展示"
              ></el-input>
            </el-form-item>
            <el-form-item label-width="150px" label="申请数据表：" prop="shengqingBiao" size="mini">
              <el-input v-model="ruleForm.shengqingBiao" style="max-width:240px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label-width="150px" label="申请标题：" prop="shenqingTitle" size="mini">
              <el-input v-model="ruleForm.shenqingTitle" style="max-width:240px"></el-input>
            </el-form-item>
            <el-form-item label-width="150px" label="申请人部门：" prop="shenqingBumen" size="mini">
              <el-input v-model="ruleForm.shenqingBumen" style="max-width:240px" placeholder="自动展示"></el-input>
            </el-form-item>
            <el-form-item label-width="150px" label="申请用途：" prop="shenqingYong" size="mini">
              <el-input v-model="ruleForm.shenqingYong" style="max-width:240px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="使用期限：" prop="qixian">
            <el-radio-group v-model="ruleForm.qixian">
              <el-radio label="all">永久</el-radio>
              <el-radio label="oneYear">一年</el-radio>
              <el-radio label="oneMon">一个月</el-radio>
              <el-radio label="threeMon">三个月</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label-width="150px" label="资源名称：" prop="ziyuanName" size="mini">
              <el-select v-model="ruleForm.ziyuanName" style="width:240px">
                <el-option label="区域一" value="shanghai" style="width:240px"></el-option>
                <el-option label="区域二" value="beijing" style="width:240px"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label-width="150px" label="资源关键字：" prop="ziyuanGuanjian" size="mini">
              <el-input v-model="ruleForm.ziyuanGuanjian" style="max-width:240px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label-width="150px" label="申请字段：" prop="shenqingZiduan" size="mini">
              <el-input v-model="ruleForm.shenqingZiduan" style="max-width:240px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label-width="150px" label="是否涉及秘密：" prop="region" size="mini">
            <el-select v-model="ruleForm.mimi" style="width:240px">
              <el-option label="否" value="n" style="width:240px"></el-option>
              <el-option label="是" value="y" style="width:240px"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label-width="150px" label="是否涉及个人隐私：" prop="region" size="mini">
            <el-select v-model="ruleForm.yinsi" style="width:240px">
              <el-option label="否" value="n" style="width:240px"></el-option>
              <el-option label="是" value="y" style="width:240px"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="6" align="center">
            <el-button type="primary" style="width:120px" @click="shareAdd('ruleForm')">提交</el-button>
          </el-col>
          <el-col :span="10" align="center">
            <el-button style="width:120px" @click="shareAddBack()">返回</el-button>
          </el-col>
        </el-row>
      </el-form>

###data

ruleForm :{shenqingID: “” } 设置每一项 默认数据

rules: {shenqingID: [写验证规则] ,shenqingren:[写验证规则]}

//设置每个prop属性 的验证规则

  data() {
    return {
      ruleForm: {
        shenqingID: "",
        shenqingren: "",
        shengqingBiao: "",
        shenqingTitle: "",
        shenqingBumen: "",
        shenqingYong: "",
        ziyuanName: "",
        ziyuanGuanjian: "",
        shenqingZiduan: "",
        mimi: "n",
        yinsi: "n",
        qixian: "all"
      },
      rules: {
        shenqingTitle: [
          { required: 1, message: "请输入申请标题", trigger: "blur" },
          {
            required: 1,
            min: 3,
            max: 8,
            message: "长度在 3 到 8 个字符",
            trigger: "blur"
          }
        ],
        shenqingID: [
          { required: true, message: "请输入申请ID", trigger: "blur" }
        ],
        shenqingren: [
          { required: true, message: "请输入申请人", trigger: "blur" }
        ],
        shengqingBiao: [
          { required: true, message: "请输入申请表", trigger: "blur" }
        ],
        shenqingTitle: [
          { required: true, message: "请输入申请标题", trigger: "blur" }
        ],
        shenqingBumen: [
          { required: true, message: "请输入申请部门", trigger: "blur" }
        ],
        shenqingYong: [
          { required: true, message: "请输入申请用途", trigger: "blur" }
        ],
        ziyuanName: [
          { required: true, message: "请选择资源名称", trigger: "change" }
        ],
        ziyuanGuanjian: [
          { required: true, message: "请输入关键字", trigger: "blur" }
        ],
        shenqingZiduan: [
          { required: true, message: "请输入字段", trigger: "blur" }
        ],
        qixian: [
          {
            required: true,
            message: "请至少选择一个使用期限",
            trigger: "change"
          }
        ],
        mimi: [
          {
            required: true,
            message: "请选择是否涉及秘密",
            trigger: "change"
          }
        ],
        yinsi: [
          {
            required: true,
            message: "请选择是否涉及个人隐私",
            trigger: "change"
          }
        ]
      }
    };
  },

methods

一定要设置字符串 'ruleForm ’ @click=“shareAdd(‘ruleForm’)”>提交

点击保存把 ruleForm 传进来

this.$refs[ruleForm].validate (abc=>{if(abc){ 到这里就验证成功了表单}}) 要写验证这段代码一定要写，abc 为true 就验证成功

    //添加提交按钮
    shareAdd(ruleForm) {
      this.$refs[ruleForm].validate(abc => {
        if (abc) {
          this.$message({ message: "添加成功", type: "success" }); 
          //表单验证通过，提示成功
          setTimeout(() => {
            this.$router.push({
              path: "/share" //等待2秒钟跳到 资源共享管理
            });
          }, 2000);
        } else {
          this.$message({ message: "添加失败", type: "info" });
          return false;
        }
      });
    }