Quasar输入提供多个验证

Question

<q-input
v-model="userForm.mobile"
type="text"
label="Mobile"
counter
maxlength="10"
color="info"
lazy-rules
:rules="[
(val) => (val && val.length > 0) || 'Mobile number is required',
(val) =>
(typeof val !== number) ||
'Mobile number should be valid',
]"
/>

我正在尝试进行两次验证，但这不起作用，如果它是空的或不是数字，则尝试返回错误如果有人能帮忙，我真的很感激，谢谢。

Answer 1

您的验证流程似乎是公平的，但您拼错了Number关键字。强烈建议在方法部分定义验证方法。

我给你写了一个简单的样本：

<template>
<q-form @submit="submit">
<q-input
counter
lazy-rules
type="text"
label="Mobile"
maxlength="10"
color="info"
mask="##########"
:rules="[requiredRule, mobileRule]"
v-model="userForm.mobile"
/>
<q-btn
type="submit"
label="Submit"
/>
</q-form>
</template>
<script>
export default {
name: 'BaseInputValidation',
data() {
return {
userForm: {
mobile: null,
},
};
},
methods: {
requiredRule(val) {
if (!val) {
return 'Mobile number is required';
}
return true;
},
mobileRule(val) {
if (!/^d{10}$/.test(val)) {
return 'Mobile number should be valid';
}
return true;
},
submit() {
// Do submit
},
},
};
</script>

我将规则划分为多个方法以提高渲染速度。您也可以合并规则函数或在全局文件中定义它们以在其他地方重用。

我填充了掩码道具，以将输入值限制为一个十位数。

我使用了一个普通的正则表达式来检查数字，最好用一个更好的正则表达式替换：-(