Vue实战084自定义表单校验规则及常用表单校验分享

　　表单校验是注册环节中必不可少的操作，表单校验可以提醒用户填写数据规则以确保用户提交数据的效性，也可以防止用户因误操作、填写错误数据或者恶意提交数据而占用服务器资源。
　　ElementUI校验规则
　　ElementUI封装了组件elform来收集、校验和提交数据，其中的rules属性就是用来做数据校验的。ElementUI提供了一些常用的表单验证规则，我们可以直接使用该规则来实现数据校验。rules根据rules给出的规则会对prop中的值进行校验，当不满足要求时会弹出message相应的提示信息。
　　自定义规则调用
　　但是ElementUI提供的表单验证规则是有限的，可能无法满足我们项目的需求这时候就需要我们来自定义验证规则。我们在在data（）｛｝中添加自定义的校验规则，然后在在data的return中通过validator引用校验规则。data（）｛return｛｝｝中定义的rules要中的：rules属性值相同，rules中的对象userName要与与中的prop属性值相同。
　　自定义校验规则
　　validate是ElementUI封装用于对整个表单进行验证的，参数是一个回调函数。该回调函数在校验结束后被调用，是否校验成功和未通过校验的字段。这个回调函数的原型为：functionfun（rule，value，callback，source，options）｛｝，其中rule指向当前的规则对象，value是需要进行校验的值，callback是验证之后的执行回调，source是跟value的值一致的键值对象（可以忽略），options是个额外的配置选项（可选）。所以常见的函数定义如下，校验手机号码是否正确。
　　validate校验
　　自定义校验方法是一个在校验结束后才会被调用回调函数，所以在提交表单的时候我们需要通过refs来调用validate来继续自定义校验。自定义校验规则时必须保证每个分支都调用了callback方法，否则会导致elform组件在使用validate方法时无法进入回调函数。调用validate（）校验时需要prop属性绑定校验的字段名，否则无法校验vmodel中绑定的值。
　　常用校验规则
　　为了方便我们还是定义一个validation。js文件来专门定义常用的校验方法，具体的JS文件定义和引用方法可以参考文章【Vue实战083：几种常用的外部JS文件定义和引用方法详解】。这里注意自定义rules时外层的message高于callback中的错误提示，所以自定义规则时建议外层勿定义message，可以用两个规则来校验内容。定义好之后在需要用到的地方直接import引入，然后在rules校验中加入即可。
　　总结：
　　以上内容是小编给大家分享的【Vue实战084：自定义表单校验规则及常用表单校验分享】，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。更多Vue实战技巧可以参考以下专栏：
　　为了方便学习，下面附上本文用到的源码：templateelform：modelloginFormautocompleteonclassloginform：rulesruleselformitempropusernamelabel用户名elinputplaceholder请输入用户名nameusernametypetextvmodelloginForm。usernameautocompleteonelformitemelformJavaScriptdata（）return：rules：｛username：〔｛required：true，message：请输入用户名，trigger：blur｝，｛min：3，max：5，message：长度在3到5个字符，trigger：blur｝，〕｝JavaScriptdata（）｛constchackLen（rule，value，callback）｛letlenvalue。lengthif（len3len5）｛callback（newError（用户名长度在35之间））｝else｛callback（）｝｝return｛rules：｛username：〔｛required：true，message：请输入用户名，trigger：blur｝，｛validator：chackLen，trigger：blur｝自定义长度校验〕｝｝，methods：｛onSubmit（）｛this。refs〔rulesForm〕。validate（valid｛if（valid）｛如果校验为真说明符合要求可以继续｝else｛反正说明校验失败，返回对应的message｝｝）；｝，｝｝letmatching（value，callback，reg，message）｛if（valuevalueundefinedvaluenull）｛callback（newError（message））｝else｛if（！reg。test（value））｛callback（newError（message））｝else｛callback（）｝｝｝module。exports｛Username（rule，value，callback）｛letreg（？！〔09〕）（？！〔azAZ〕）〔azAZ09〕｛6，12｝matching（value，callback，reg，请输入612位字母和数字组合）｝，SimplePwd（rule，value，callback）｛letreg〔azAZ09〕matching（value，callback，reg，包含英文字母、数字及下划线组成）｝，ComplexPwd（rule，value，callback）｛letreg（？！〔d〕）（？！〔azAZ〕）（？！〔dazAZ〕）（〔一龥s〕）｛8，20｝matching（value，callback，reg，请输入820位英文字母、数字或者符号）｝，Phone（rule，value，callback）｛letreg〔1〕〔3，4，5，6，7，8〕〔09〕｛9｝matching（value，callback，reg，请输入正确的手机）｝，Email（rule，value，callback）｛letreg（〔azAZ09〕〔。〕？）〔azAZ09〕。〔az〕matching（value，callback，reg，输入正确的邮箱）｝，IdCard（rule，value，callback）｛letreg（d｛15｝）（d｛18｝）（d｛17｝（dXx））matching（value，callback，reg，输入正确的身份证号码）｝，Company（rule，value，callback）｛letreg〔AZ09〕｛8｝〔AZ09〕〔AZ09〕｛8｝〔AZ09〕〔09〕｛2｝matching（value，callback，reg，请输入正确的营业执照）｝，Weixin（rule，value，callback）｛letreg〔azAZ〕〔azAZ09〕｛5，19｝matching（value，callback，reg，请输入正确的微信号）｝，Integer（rule，value，callback）｛letreg〔19〕〔09〕matching（value，callback，reg，请输入正确的整数）｝，Number（rule，value，callback）｛letregdd〔。〕？dmatching（value，callback，reg，请输入纯数字）｝，Landline（rule，value，callback）｛letreg（d｛3，4｝）？d｛7，8｝matching（value，callback，reg，请输入正确的座机）｝，Ip（rule，value，callback）｛letreg（d｛1，2｝1dd2〔04〕d25〔05〕）。（d｛1，2｝1dd2〔04〕d25〔05〕）。（d｛1，2｝1dd2〔04〕d25〔05〕）。（d｛1，2｝1dd2〔04〕d25〔05〕）matching（value，callback，reg，请输入正确的IP）｝，Price（rule，value，callback）｛letreg？d｛1，4｝（？：。d｛1，2｝）？matching（value，callback，reg，请输入正确的价格）｝，BankCard（rule，value，callback）｛letreg（〔19〕｛1｝）（d｛14｝d｛18｝）matching（value，callback，reg，请输入正确的银行卡）｝｝