element-ui中表单验证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-inputv-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}})}}
}