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

詳談vue中的rules表單驗(yàn)證(常用)

 更新時(shí)間:2022年06月30日 11:30:48   作者:阿爾茲  
這篇文章主要介紹了關(guān)于vue中的rules表單驗(yàn)證(常用),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

首先在表單中綁定rules

并在item中定義屬性prop

<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
? <el-form-item label="活動(dòng)名稱" prop="name">
? ? <el-input v-model="ruleForm.name"></el-input>
? </el-form-item>
</el-form>

在data或computed中編寫rules規(guī)則

rules {?? ?
? ? ? name: [ { type: 'string',required: true,message: "名稱必填", trigger: 'blur'}, {max: 30,message: "名稱長(zhǎng)度不能超過(guò)30位" }]
? ? ? }

其中name為prop名

  • type:類型
  • required:是否必選項(xiàng)(此欄是否為空)
  • message:報(bào)錯(cuò)信息
  • trigger:觸發(fā)方式(
  • blur :失去焦點(diǎn)時(shí)進(jìn)行驗(yàn)證
  • 常用:對(duì) input 輸入框的驗(yàn)證
  • change :當(dāng)值發(fā)生變化時(shí)進(jìn)行驗(yàn)證
  • 常用:下拉框select,日期選擇框date-picker,復(fù)選框checkbox,單選框radio)

也可以直接用pattern進(jìn)行匹配驗(yàn)證

name: [ { pattern: 驗(yàn)證條件, required: true, message: "提示信息", trigger: "blur" }]

vue的rules中自帶的校驗(yàn)規(guī)則和常用正則表達(dá)式校驗(yàn)

rules: {
    //驗(yàn)證非空和長(zhǎng)度
    name: [{
        required: true,
        message: "站點(diǎn)名稱不能為空",
        trigger: "blur"
        },{
        min: 3, 
        max: 5, 
        message: '長(zhǎng)度在 3 到 5 個(gè)字符', 
        trigger: 'blur' 
    }],
    //驗(yàn)證數(shù)值
    age: [{ 
        type: 'number', 
        message: '年齡必須為數(shù)字值',
        trigger: "blur"
    }],
    //驗(yàn)證日期
    birthday:[{ 
        type: 'date', 
        required: true, 
        message: '請(qǐng)選擇日期', 
        trigger: 'change' 
    }],
    //驗(yàn)證多選
    habit: [{ 
        type: 'array', 
        required: true, 
        message: '請(qǐng)至少選擇一個(gè)愛好', 
        trigger: 'change' 
    }],
    //驗(yàn)證郵箱
    email: [{ 
        type: 'email', 
        message: '請(qǐng)輸入正確的郵箱地址', 
        trigger: ['blur', 'change'] 
    }],
    // 驗(yàn)證手機(jī)號(hào)
    telephone: [{
        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
        message: "請(qǐng)輸入正確的手機(jī)號(hào)碼",
        trigger: "blur"
    }],
    // 驗(yàn)證經(jīng)度 整數(shù)部分為0-180小數(shù)部分為0到7位
    longitude: [{
        pattern: /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,7})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/,
        message: "整數(shù)部分為0-180,小數(shù)部分為0到7位",
        trigger: "blur"
    }],
    // 驗(yàn)證維度 整數(shù)部分為0-90小數(shù)部分為0到7位
    latitude: [{
        pattern: /^(\-|\+)?([0-8]?\d{1}\.\d{0,7}|90\.0{0,6}|[0-8]?\d{1}|90)$/,
        message: "整數(shù)部分為0-90,小數(shù)部分為0到7位",
        trigger: "blur"
    }]          
}

前端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)隔開

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

以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue返回上一頁(yè)面時(shí)回到原先滾動(dòng)的位置的方法

    vue返回上一頁(yè)面時(shí)回到原先滾動(dòng)的位置的方法

    這篇文章主要介紹了vue返回上一頁(yè)面時(shí)回到原先滾動(dòng)的位置的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-12-12
  • 在vue和element-ui的table中實(shí)現(xiàn)分頁(yè)復(fù)選功能

    在vue和element-ui的table中實(shí)現(xiàn)分頁(yè)復(fù)選功能

    這篇文章主要介紹了在vue和element-ui的table中實(shí)現(xiàn)分頁(yè)復(fù)選功能,本文代碼結(jié)合圖文的形式給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-12-12
  • vue?table表格中如何控制下拉框的顯示隱藏

    vue?table表格中如何控制下拉框的顯示隱藏

    這篇文章主要介紹了vue?table表格中如何控制下拉框的顯示隱藏問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • Vue虛擬DOM詳細(xì)介紹

    Vue虛擬DOM詳細(xì)介紹

    虛擬DOM的概念是通過(guò)狀態(tài)生成一個(gè)虛擬節(jié)點(diǎn)樹,然后使用虛擬節(jié)點(diǎn)樹進(jìn)行渲染。在渲染之前,會(huì)使用新生成的虛擬節(jié)點(diǎn)和上一次生成的虛擬節(jié)點(diǎn)進(jìn)行對(duì)比,只渲染不同的部分
    2022-08-08
  • Vuex之理解Store的用法

    Vuex之理解Store的用法

    本篇文章主要介紹了Vuex之理解Store的用法,Store類就是存儲(chǔ)數(shù)據(jù)和管理數(shù)據(jù)方法的倉(cāng)庫(kù),實(shí)現(xiàn)方式是將數(shù)據(jù)和方法已對(duì)象形式傳入其實(shí)例中
    2017-04-04
  • vue中數(shù)據(jù)請(qǐng)求axios的封裝和使用

    vue中數(shù)據(jù)請(qǐng)求axios的封裝和使用

    這篇文章主要介紹了vue中數(shù)據(jù)請(qǐng)求axios的封裝和使用,Axios?是一個(gè)基于?promise?的?HTTP?庫(kù),下面文章圍繞主題的相關(guān)資料展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下
    2022-04-04
  • OpenLayer基于vue的封裝使用教程

    OpenLayer基于vue的封裝使用教程

    這篇文章主要介紹了OpenLayer基于vue的封裝使用,openlayer使用的版本是"^6.4.3",引入了mapbox的樣式,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-10-10
  • Vue鼠標(biāo)點(diǎn)擊事件和鍵盤事件舉例詳解

    Vue鼠標(biāo)點(diǎn)擊事件和鍵盤事件舉例詳解

    在Vue框架中我們經(jīng)常需要綁定各種JS事件,如"點(diǎn)擊事件"、"鼠標(biāo)移動(dòng)事件"、"鍵盤事件"等等,這篇文章主要給大家介紹了關(guān)于Vue鼠標(biāo)點(diǎn)擊事件和鍵盤事件的相關(guān)資料,需要的朋友可以參考下
    2024-01-01
  • Vue實(shí)現(xiàn)表格批量審核功能實(shí)例代碼

    Vue實(shí)現(xiàn)表格批量審核功能實(shí)例代碼

    這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)表格批量審核功能實(shí)例代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-05-05
  • vue實(shí)現(xiàn)換膚功能

    vue實(shí)現(xiàn)換膚功能

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)換膚功能,一套深色,一套淺色,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-07-07

最新評(píng)論