我在实际项目开发中遇到过关于ElementUI各种表单验证的
博客原文地址https://finget.github.io/2020/02/11/element-form/第一个最简单的必填字段rules:{real_operator_id:{required:true,message:'请选择委托方',trigger:'change'}}第二类正则验证字段rules:{capacity:[{required:true,message:'Pleaseenterthecapacity',trigger:'change'},{pattern:/^[1-9][0-9]{0,3}$/,message:'您只能输入正整数且不超过4位',trigger:'change'}],}??此方法可用于任何电话、邮箱、号码、英文、汉字...等。可以通过正则表达式来验证。第三类富文本需要验证rules:{content:[{required:true,message:'请填写策略内容',trigger:'change'}],}这里撒个娇操作，原来输入框的校验是监听输入框的各种事件（change，blur），但是富文本是第三方插件，监听不到，所以我使用了双向绑定vue的原理，写了一个隐藏的输入框，搞定了。第四种多输入框
data(){letcheckBuilding=(rule,value,callback)=>{if(!this.form.building_id){callback(newError('请选择办公楼'));}elseif(!this.form.building_detail.id){callback(newError('请选择一个建筑'));}elseif(this.unitList.length&&!this.form.building_detail.unit_id){callback(newError('请选择一个单元'));}elseif(!this.form.building_detail.floor){callback(newError('请填写楼层'));}else{callbaCK();}};return{rules:{building_id:{required:true,validator:checkBuilding,trigger:'change'},}}}第五种动态验证——从官网复制代码的普通动态验证。地点
删除第六种动态验证——多输入框验证每一个输入第一种情况Frame单独验证样式控制好时，循环生成多个，分别验证layer 