本文介绍了一种用于前端页面的验证框架，该框架能够实现输入字段的实时验证，并提供错误信息反馈，支持正则表达式匹配等多种验证方式。通过具体实例展示了如何在登录页面中应用此框架，包括忽略特定字段、验证成功与失败的回调处理。
可以更具需求自行添加消息弹出层把错误信息弹出去，改写法会把错误提示信息返回到使用的页面中。
可自行扩展正则匹配验证，有需要的可以留言，后面会把相关资料发布到GITHUB
<div class="input"><input type="text" title="账户" v-model="userName" ref="userName"></div>
validation.js
/**
* description: 登录页样式文件
* create_time: 2019-01-02
* message: 不接受任何私下吐槽，请当面沟通协调
*/
import _ from 'lodash'
export default function validation(opts) {
let valid, isValid;
valid = false;
// 过滤非必填项
if (opts.ignoreRefs) {
if (opts.ignoreRefs) {
_.forEach(opts.ignoreRefs, item=> {
delete opts.valid[item]
})
}
}
// 验证
_.forEach(opts.valid, item=> {
// 非空
if (item.value== '') {
valid = false;
isValid = item.title+ '不能为空';
} else {
valid = true
}
return valid;
});
if (valid) {
//验证成功执行方法
opts.success();
} else {
//验证失败执行方法
opts.error(isValid);
}
}
使用方法：
handleLogin() {
let vue = this;
validation({
valid: vue.$refs,
ignoreRefs: ['userName'],
success: () => {
console.log('验证成功');
vue.$router.push({name: 'home'});
}, error: (data) => {
console.log(data)
}
});
}
更多文章可查看以前的博客 CSDN (后续博文将更新至简书)
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
