我的这个效果是结合element UI的样式显示的,大家主要看函数里边对应的实现方法
主要的js代码:
var validatePass = (rule, value, callback) => {
var rules = {
lw: '[a-z]',
uw: '[A-Z]',
nw: '[0-9]',
sw: '[`~!@#$^&*()=|{}\':;,\\[\\].<>《》/?~!@#¥……&*()——|{}【】‘;:\\\\ ”“。,、?]'
}
function reg(str, patter) {
var reg = new RegExp(patter);
if (reg.test(str)) {
return true;
}
return false;
}
if (value === '') {
callback(new Error('请输入8-16位大写字母+小写字母+数字+特殊字符'));
} else {
if (value.length < 8 || value.length > 16) {
callback(new Error('请输入8-16位大写字母+小写字母+数字+特殊字符'));
} else {
var valiWord = {
l: reg(value, rules.lw),
u: reg(value, rules.uw),
n: reg(value, rules.nw),
s: reg(value, rules.sw)
}
if (valiWord.s) {
if (valiWord.l && valiWord.u && valiWord.n && valiWord.s) {
this.$refs.ruleForm.validateField('checkPass');
}else{
callback(new Error('请输入8-16位大写字母+小写字母+数字+特殊字符'));
}
}
}
callback()
}
};