设置邮件长度限制

Question

我有一个带有电子邮件字段的表单。我想将输入限制设置为字段的最大45个字符，否则将显示错误消息。

<v-text-field
v-model="Email"
:rules="[rules.required, rules.email]"
label="Email"
></v-text-field>
<script>
export default {
data: () => ({

email: (value) => {
if(value.length > 0) {
const pattern =
/^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
return pattern.test(value) || "Please enter a valid email.";
} else if (value.length > 45) {
return pattern.test(value) || "Maximum email length is 45 characters.";
}
},
})
}
</script>

Answer 1

添加一个名为emailLength的新规则，检查email的值是否大于45个字符。如果是，则返回错误消息。

<v-text-field
v-model="Email"
:rules="[rules.required, rules.email, rules.emailLength]"
label="Email"
></v-text-field>
<script>
export default {
data: () => ({

email: (value) => {
if(value.length > 0) {
const pattern =
/^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
return pattern.test(value) || "Please enter a valid email.";
}
},
emailLength: (value) => {
if (value.length > 45) {
return "Maximum email length is 45 characters.";
}
}
})
}
</script>

这个新规则应该被添加到v-text-field组件的rules数组中。

Answer 2

最初当值为null或空时，value.length > 0将总是抛出一个错误，因为在null值上调用length属性。所以用if (value)代替。

现在，如果电子邮件输入有一些值，那么控制将总是进入第一个if语句，而第二个if语句将永远不会被执行，所以长度验证将永远不会被应用。

提示——
您不需要处理if (value)或if (value.length > 0)的情况，因为rules.required已经用于此验证。

试着用下面的-

替换你的规则

email: (value) => {
const pattern = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
if (!pattern.test(value)) {
return "Please enter a valid email.";
}
if (value.length > 45) {
return "Maximum email length is 45 characters.";
}
return true;
},

在JS中使用上述验证规则的一个工作示例。(我在演示中使用的长度限制为10)

function validate(value) {
const pattern = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
if (!pattern.test(value)) {
console.log("Please enter a valid email.");
return;
}
if (value.length > 10) {
console.log("Maximum email length is 10 characters.");
return;
}
console.log("GOOD JOB");
}

<input name="email" oninput="validate(this.value)"/>