vue中的rules表單驗證怎么實現

這篇文章主要介紹“vue中的rules表單驗證怎么實現”，在日常操作中，相信很多人在vue中的rules表單驗證怎么實現問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue中的rules表單驗證怎么實現”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

首先在表單中綁定rules

并在item中定義屬性prop

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

在data或computed中編寫rules規則

rules {    
      name: [ { type: 'string',required: true,message: "名稱必填", trigger: 'blur'}, {max: 30,message: "名稱長度不能超過30位" }]
      }

其中name為prop名

• type：類型

• required：是否必選項（此欄是否為空）

• message：報錯信息

• trigger：觸發方式（

• blur ：失去焦點時進行驗證

• 常用：對 input 輸入框的驗證

• change ：當值發生變化時進行驗證

• 常用：下拉框select，日期選擇框date-picker，復選框checkbox，單選框radio）

也可以直接用pattern進行匹配驗證

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

vue的rules中自帶的校驗規則和常用正則表達式校驗

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

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

到此，關于“vue中的rules表單驗證怎么實現”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！