快捷導(dǎo)航

Vue.js?rules校驗(yàn)規(guī)則舉例詳解

更新時(shí)間：2024年02月22日 10:15:32 作者：我愛(ài)學(xué)習(xí)yq

Vue表單校驗(yàn)規(guī)則（rules）是一種用于驗(yàn)證表單數(shù)據(jù)的對(duì)象,它通常用于Vue.js框架中的表單組件中,可以在表單提交前進(jìn)行數(shù)據(jù)驗(yàn)證,這篇文章主要給大家介紹了關(guān)于Vue.js?rules校驗(yàn)規(guī)則的相關(guān)資料,需要的朋友可以參考下

Vue.js 提供了一套輕量級(jí)的、可擴(kuò)展的模板校驗(yàn)規(guī)則。這些規(guī)則可以通過(guò)在v-model綁定中添加.modifier來(lái)使用，例如v-model.trim

下面是一些常見(jiàn)的 Vue.js 校驗(yàn)規(guī)則：

required: 檢查值是否非空
email: 檢查值是否符合電子郵件格式
min: 檢查值是否大于等于指定的最小值
max: 檢查值是否小于等于指定的最大值
minLength: 檢查值的長(zhǎng)度是否大于等于指定的最小長(zhǎng)度
maxLength: 檢查值的長(zhǎng)度是否小于等于指定的最大長(zhǎng)度
numeric: 檢查值是否為數(shù)字
regex: 檢查值是否符合指定的正則表達(dá)式

這是使用 .modifier 將這些規(guī)則應(yīng)用于 v-model 的一個(gè)例子：

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

在這個(gè)例子中：

v-model.trim 將輸入值去掉前后空格
required 校驗(yàn)輸入是否非空
type="email" 校驗(yàn)輸入是否符合電子郵件格式
v-model.number 將輸入轉(zhuǎn)換成數(shù)字
min 和 max 校驗(yàn)輸入是否在指定范圍內(nèi)

除了這些內(nèi)置的校驗(yàn)規(guī)則，你還可以使用自定義的校驗(yàn)函數(shù)。校驗(yàn)函數(shù)應(yīng)該返回一個(gè)布爾值，代表輸入是否合法，例如：

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

在這個(gè)例子中，我們使用了一個(gè)計(jì)算屬性 validatePassword，它根據(jù)密碼的長(zhǎng)度來(lái)返回一個(gè)布爾值。我們還在輸入框上綁定了一個(gè)類名 invalid，如果輸入不符合規(guī)則，就將這個(gè)類名添加到輸入框上。

前端Vue中常用rules校驗(yàn)規(guī)則:

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.是否手機(jī)號(hào)碼或者固話

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

3. 是否身份證號(hào)碼

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

4.是否郵箱

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

5.整數(shù)填寫

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

6.正整數(shù)填寫

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

7.小寫字母

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

8.大寫字母

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

9.大小寫混合

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

10.多個(gè)8位數(shù)字格式(yyyyMMdd)并以逗號(hào)隔開(kāi)

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

11.數(shù)字加英文，不包含特殊字符

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

12.前兩位是數(shù)字后一位是英文

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

13.密碼校驗(yàn)（6-20位英文字母、數(shù)字或者符號(hào)（除空格），且字母、數(shù)字和標(biāo)點(diǎn)符號(hào)至少包含兩種）

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

14.中文校驗(yàn)

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

總結(jié)

到此這篇關(guān)于Vue.js rules校驗(yàn)規(guī)則的文章就介紹到這了,更多相關(guān)Vue rules校驗(yàn)規(guī)則內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue.js?rules校驗(yàn)規(guī)則舉例詳解

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具