关于vue中表单对于各项情况的正则表达式限制rule

最新推荐文章于 2024-06-28 11:01:26 发布

不爱吃香菜的蟹老板

最新推荐文章于 2024-06-28 11:01:26 发布

阅读量624

点赞数

文章标签： vue.js 正则表达式前端

本文链接：https://blog.youkuaiyun.com/qq_42635033/article/details/125678314

版权

本文介绍了如何在Vue项目中使用自定义的表单限制rule文件，详细展示了电话号码、邮箱、密码等字段的正则表达式验证规则，并在login.vue组件中应用这些规则进行用户输入验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有帮助点赞关注评论三连哈！QAQ

表单限制rule文件

rule.ts


export default {
  // 不能输入表情
  noEmoji: {
    pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/,
  },
  // 手机号
  phone: {
    pattern: /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/,
    message: '请输入正确的手机号码',
    trigger: 'blur',
  },
  password: {
    pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z_]{8,20}$/,
    message: '请输入8-20位数字/字母组合密码',
    trigger: 'blur',
  },
  email: {
    pattern: /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,5}$/,
    message: '邮箱格式不正确',
    trigger: 'blur',
  },
  number: {
    pattern: /^\d+$/,
  },
  // 身份证号
  idNumber: {
    pattern: /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
  },
};

应用主文件

a-form ref="form" class="login-form" name="custom-validation" :model="formState" :rules="rules">
          
                <a-form-item name="userName">
                  <a-input
                    v-model:value="formState.userName"
                    class="button"
                    placeholder="请输入手机/邮箱"
                    autocomplete="off"
                    maxlength="50"
                  >
                    <template #prefix>
                      <UserOutlined />
                    </template>
                  </a-input>
                </a-form-item>
                <a-form-item name="password">
                  <a-input-password
                    v-model:value="formState.password"
                    class="button"
                    placeholder="请输入登录密码"
                    type="password"
                    autocomplete="off"
                  >
                    <template #prefix>
                      <LockOutlined />
                    </template>
                  </a-input-password>
                </a-form-item>

script setup name="Login">
import Rules from '@/tools/rules';
import { message, Modal } from 'ant-design-vue';
import { mainStore } from '@/store/main';

const store = mainStore();
const formState = reactive({
  userName: '',
  password: '',
  imageCode: '',
  rememberMe: false,
  code: '',
  verifyAccount: '',
  loginSelect: '0',
});
const placeholder = computed(() => {
  return formState.loginSelect == 0 ? '请输入手机号' : '请输入邮箱号';
});
const rules = computed(() => {
  return {
    userName: [{ required: true, message: '请输入手机或者邮箱', trigger: 'blur' }],
    password: [{ required: true, message: '请输入登录密码', trigger: 'blur' }],
    verifyAccount: [
      { required: true, message: placeholder.value, trigger: 'blur' },
      formState.loginSelect == 0 ? Rules.phone : Rules.email,
    ],
    code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
  };
});
function onChangeAccountType(t) {
  formState.loginSelect = t.type;
  formState.verifyAccount = '';
  codeForm.value.clearValidate(['verifyAccount']);
}
</script>