Quasar 输入提供多个验证答案

【问题标题】：Quasar input give multiple validationsQuasar 输入提供多个验证
【发布时间】：2022-08-18 15:40:07
【问题描述】：

     <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\',
        ]\"
      />

我正在尝试进行 2 次验证，但这不起作用，如果它为空或不是数字，则尝试返回错误如果有人可以提供帮助，真的很感激。

标签： javascript vue.js quasar-framework

【解决方案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>

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

我填充了掩码道具以将输入值限制为仅十个数字的输入。

我用一个普通的正则表达式来检查数字，用更好的替换它:-)

【讨论】：