100行代码实现vue表单校验功能(小白自编)(2)

//validator-rule.js module.exports= { hanzi:function(str){ if(str){ let reg = /[\u4e00-\u9fa5]/; return reg.test(str); }else{ return true; } }, required:function(str){ return !(str.length == 0) }, I:function(str){ if(str){ let reg = /i/; return reg.test(str); }else{ return true; } }, H:function(str){ if(str){ let reg = /h/; return reg.test(str); }else{ return true; } }, T:function(str){ if(str){ let reg = /t/; return reg.test(str); }else{ return true; } }, }

使用方法

**引入校验插件 import {Validator} from '@src/utils/valitator'** **校验规则可自行修改添加 @src/utils/valitator-rules** **** 1.添加form name属性<form></form> 2.定义错误提示errors = { name:{ required:'不能为空', hanzi:'得是汉字' }, idCont:{ I:'身份证号不对', H:'香港通行证不对', T:'台湾通行证不对', } };

3.定义校验规则

rules ={ name:'required|hanzi', idCont: 'I' }

4.初始化校验实例：this.Validator =new Validator('example_form',rules,errors);

5.绑定校验信息：input增加name属性，保持和错误提示key一致  <input type="text" v-model='name'>

6.执行校验：传入要校验的key和value;

this.Validator.validate({ [name]:this[name], }).then(()=>{ }).catch((errorCb)=>{ console.log(errorCb) errorCb.showError();//展示错误提示，如果只展示某个提示，传入对应的值errorCb.showError('name') });

7.动态跟换校验规则，如证件类型更换：

this.Validator.changeRules( {idCont:this.idType},//传入新的校验规则 {idCont:this.idCont})//传入校验的key和value进行校验 .then(()=>{ }).catch((errorCb)=>{ errorCb.showError('idCont'); })；

8：注意事项：每个input要用div包起来，保证错误信息位置正确添加；

    this.Validator.clear()；清空所有错误提示

总结

以上所述是小编给大家介绍的100行代码vue表单校验，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章: