前言经常遇到一些朋友问一些关于element-ui组件使用的基本问题，因为官方文档并没有提供所有琐碎的功能代码demo。在此，我会结合自己实际遇到的问题，记录一些官方文档中没有详述的常用功能代码，为大家提供扩展的思路。1.以中国大陆手机号验证为例//这是价格的代码//这是规则的代码mobile:[{validator:validateMobile,trigger:'blur'},{required:true,message:'请输入您的电话号码',trigger:'blur'},{pattern:/^1[34578]\d{9}$/,message:'目前只支持中国大陆的电话号码'}]，在element-ui的源码中搜索blur，很容易看到除了blur，还有focus和input，很贴心，基本满足入门要求表单验证。2、部分表单提交后端校验在一些表单提交中，输入项较多，比如注册时填写的用户名，通常我们会校验用户名是否重复，这就需要调用服务来校验。稍微复杂的验证需要自定义验证规则来实现。看下面的代码：//注意validatePass属于data，不属于return。data(){letvalidatePass=(rule,value,callback)=>{if(value.length>=8){letparams={'account':value}axios.post('localhost:8080/verifyUserAccount',params).then(function(response){if(response.data.err){callback(response.data.msg)}else{callback()}}).catch(function(){callback(newError('服务异常'))})}else{callback()}}//这是验证规则，当然你也可以使用基本验证规则account:[{validator:validatePass,trigger:'blur'}]注：validatePassself定义规则中的每一个执行过程都必须伴随着callback()，这样才能在明确通过验证的时候去掉输入框上的加载。显示的错误信息可以是newError("xxxx")。3、一般来说，所有的规则都可以写在自定义规则中，以实现更复杂的验证。其实我们可以在validatePass...中调用根实例下的所有数据方法，一个很简单的例子就是验证两次输入的密码是否相同，看下面代码：letvalidatePass=(rule,value,callback)=>{if(value===''){callback(newError('请再次输入密码'))}elseif(value!==this.ruleForm.password){callback(newError('Twice输入的密码不一致！'))}else{callback()}}非vuejs情况实现就这么简单下面是验证不啰嗦。而且款式也不会难看，当然你还是可以选择自定义款式。我稍后会记录这个。4、写在最后的以上三点，已经完全涵盖了所有的表单验证情况，可以实现非常复杂的验证。正式出于这些原因，我坚信element-ui是正确的选择。我会继续写短文来填补文档的疏漏。同时，如果你和我一样喜欢element-ui，欢迎和我一起讨论。我们新建了QQ群478694438！【图片说明】[1]，方便大家交流。最后喊出口号：不拘泥于原则，完全基于实现！5.我会把另一篇文章涉及的源码上传到讨论组。不足之处将继续改进，共同探讨。
