Vue.js rules校验规则举例详解

<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>

<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>

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])$/,

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

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

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

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

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

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

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

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

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

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

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

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

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