我们在项目中头疼的是什么？对，你没有听错，就是表单验证，各种非空校验，正则校验等等
而初次使用元件的UI，在做表单验证的时候，由于项目急，自己呢，也没有时间去研究这个，结果比别人多写了500行的JS，有木有很夸张，所以，这个项目结束了，自己呢，去研究了下规则的神奇之处若有不足，请指出来，谢谢大佬们
<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
}
})
}
}
}
