×

Vue应用: 了解下rules校验规则

作者:Terry2024.04.01来源:Web前端之家浏览:788评论:0
关键词:vuejs

Vue应用: 了解下rules校验规则

一起来学个应用:rules校验规则。

Vue.js 提供了一套轻量级的、可扩展的模板校验规则。这些规则可以通过在v-model绑定中添加.modifier来使用,例如v-model.trim

下面是一些常见的 Vue.js 校验规则:

  • required: 检查值是否非空

  • email: 检查值是否符合电子邮件格式

  • min: 检查值是否大于等于指定的最小值

  • max: 检查值是否小于等于指定的最大值

  • minLength: 检查值的长度是否大于等于指定的最小长度

  • maxLength: 检查值的长度是否小于等于指定的最大长度

  • numeric: 检查值是否为数字

  • regex: 检查值是否符合指定的正则表达式

这是使用 .modifier 将这些规则应用于 v-model 的一个例子:

<template>
  <div>
    <input v-model.trim="username" required>
    <input v-model.trim="email" type="email" required>
    <input v-model.number="age" type="number" min="18" max="99" required>
  </div>
</template>

在这个例子中:

  • v-model.trim 将输入值去掉前后空格

  • required 校验输入是否非空

  • type="email" 校验输入是否符合电子邮件格式

  • v-model.number 将输入转换成数字

  • min 和 max 校验输入是否在指定范围内

除了这些内置的校验规则,你还可以使用自定义的校验函数。校验函数应该返回一个布尔值,代表输入是否合法,例如:

<template>
  <div>
    <input v-model="password" :class="{ invalid: !validatePassword }">
  </div>
</template>

<script>
export default {
  data() {
    return {
      password: '',
    };
  },
  computed: {
    validatePassword() {
      return this.password.length >= 8;
    },
  },
};
</script>

在这个例子中,我们使用了一个计算属性 validatePassword,它根据密码的长度来返回一个布尔值。我们还在输入框上绑定了一个类名 invalid,如果输入不符合规则,就将这个类名添加到输入框上。

前端Vue中常用rules校验规则:

1、是否合法IP地址:

pattern:/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/,

2.是否手机号码或者固话

pattern:/^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/,

3. 是否身份证号码

pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,

4.是否邮箱

pattern:/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/,

5.整数填写

pattern:/^-?[1-9]\d*$/,

6.正整数填写

pattern:/^[1-9]\d*$/,

7.小写字母

pattern:/^[a-z]+$/,

8.大写字母

pattern:/^[A-Z]+$/,

9.大小写混合

pattern:/^[A-Za-z]+$/,

10.多个8位数字格式(yyyyMMdd)并以逗号隔开

pattern:/^\d{8}(\,\d{8})*$/,

11.数字加英文,不包含特殊字符

pattern:/^[a-zA-Z0-9]+$/,

12.前两位是数字后一位是英文

pattern:/^\d{2}[a-zA-Z]+$/,

13.密码校验(6-20位英文字母、数字或者符号(除空格),且字母、数字和标点符号至少包含两种)

pattern:/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/,

14.中文校验

pattern:/^[\u0391-\uFFE5A-Za-z]+$/,

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/vuejsguize28i34982340.html

网友评论文明上网理性发言 已有0人参与

发表评论: