可以更具需求自行添加消息弹出层把错误信息弹出去，改写法会把错误提示信息返回到使用的页面中。
可自行扩展正则匹配验证，有需要的可以留言，后面会把相关资料发布到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 (后续博文将更新至简书)
网友评论