当前位置: 首页 > Web前端 > HTML5

饿了么组件库element-ui正则表达式验证表单,后台验证表单

时间:2023-04-05 17:21:15 HTML5

前言经常遇到一些朋友问一些关于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.我会把另一篇文章涉及的源码上传到讨论组。不足之处将继续改进,共同探讨。