element-ui中表单验证rules_:rules="rules" 例

我们在项目中头疼的是什么？对，你没有听错，就是表单验证，各种非空校验，正则校验等等

而初次使用element-ui，在做表单验证的时候，由于项目急，自己呢，也没有时间去研究这个，结果比别人多写了500行的js，有木有很夸张，所以，这个项目结束了，自己呢，去研究了下rules的神奇之处若有不足，请指出来，谢谢大佬们

<template>
    <div class="short-visit">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm" v-if="textFlag">
        <el-form-item label="姓名" prop="name" class="form-height">
          <el-input
            v-model="ruleForm.name"
            :class="nameClass? '':'active'"
            :disabled="nameShell"
            @focus="nameFocus"
            maxlength="30"
          ></el-input>
        </el-form-item>
        <el-form-item class="submitBtn">
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        </el-form-item>
      </el-form >
      </div>
    </div>
</template>

我们就以这一个为例子

首先我们在el-form上面添加下面这三个属性

:model="ruleForm" :rules="rules" ref="ruleForm"  

:model="ruleForm" 是绑定我们form表单中需要提交给后台的一个对象

:rules="rules" 是动态绑定的rules，表单验证规则

ref="ruleForm"  是我们绑定的对象

然后在每一个el-form-item上面绑定prop属性，这个属性就是我们下面要做正则校验的地方，而下面所绑定的值，都是在ruleForm这个对象中，我们下面看具体的js代码

export default {
  name: 'short-visit',
  data () {
    let missionPass = (rule, value, callback) => { //就是我们的回调函数，需要大家注意的是，这个没有在return的对象中，在data中
      console.log(value)
      if (value.length > 1) {
        if (value.indexOf('参加会议') !== -1) {
          callback()
        } else {
          callback(new Error('当出访任务为“参加会议”时才可进行多选，请重新勾选出访任务'))
        }
      } else {
        callback()
      }
    }
    return {
      ruleForm: {   // 存放数据的对象
        name: '', // 姓名
      },
      rules: { // 就是我们在el-form中绑定的rules，进行表单的验证
        name: [ // 我们在el-form-item中绑定的prop，就是这里的name，需要大家注意，这具有唯一性
          { required: true, message: '请输入姓名', trigger: 'blur' }  // require:是否必填，如不设置，则会根据校验规则自动生成;message:是提示的内容；trigger：是什么事件触发
        ],
        MissionStatementType: [
          { required: true, message: '请选择具体的出访任务', trigger: 'change' },
          { validator: missionPass, trigger: 'change' } // validator:对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise
        ]
      }
    }
  },
  created () {
    /**
     * 可以放我们初次进入页面的请求
     * */
  },
  methods: {
    /**
     * 数据的提交
     * */
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm('是否确认提交', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {
               /**
                * 发送ajax请求
                * 
                */
            })
          }).catch(() => {
              /**
               * 点击了取消按钮
               */
          })
        } else {
          return false
        }
      })
    }
  }
}