**
前言
**
vant表單驗證在移動端開發中是必不可少的，鑒於自身對該模塊不了解，特此寫一篇筆記來記錄我的使用方法。
**
一、使用場景
**
常用於form表單中輸入框組件的校驗
**
二、使用方法
**
1. 表單校驗
1.1 用 van-form 包住
1.2 在 van-field 上要有 v-model=“變量” 和 綁定rules屬性 :rules=“rules變量”
rules變量:[ { // 是否必填 required:true, message:錯誤信息, trigger:"onBlur/onChange"}, { // 自定義表單校驗 validator: value => { // true:驗證通過 // false:驗證不通過 return boolean值 },message:"錯誤信息", trigger:"onBlur/onChange" } ]
**
2. 全局表單驗證
**
2.1 在 van-form 中定義ref屬性 ref=“xxx”
2.2 在觸發對應事件的函數中寫入以下代碼
this.$refs.xxx.validate().then(()=>{ // 驗證通過 }).catch(()=>{ //驗證失敗 })
**
## 3. 局部表單驗證
**
3.1 在 van-form 中定義ref屬性 ref=“xxx”
3.2 在需要驗證的項的 van-field上加上 name值 name=“ooo”
3.3 在觸發對應事件的函數中寫入以下代碼
this.$refs.xxx.validate("name的值").then(()=>{ // 驗證通過 }).catch(()=>{ //驗證失敗 })
**
三、完整示例代碼
**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>vant表單驗證</title>
</head>
<body>
<div id="app">
<van-form ref='form'>
<!-- 手機號碼 -->
<van-field label="手機號碼：" v-model='mobile' placeholder="請輸入手機號碼" :rules="telRules" name="mobile"></van-field>
<!-- 驗證碼 -->
<van-field label="驗證碼" v-model="code" placeholder="請輸入驗證碼" :rules="codeRules">
<!-- 通過 button 插槽可以在輸入框尾部插入按鈕 -->
<template #button>
<!-- 這里有bug，使用<van-button>無法進行局部表單驗證 -->
<!-- <van-button size="small" type="primary" @click="getCode">發送驗證碼</van-button> -->
<div class="button" @click="getCode">發送驗證碼</div>
</template>
</van-field>
<van-button type="primary" block @click="submit">提交</van-button>
</van-form>
</div>
<!-- 引入樣式文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
<script>
// 在 #app 標簽下渲染一個按鈕組件
new Vue({
el: '#app',
data: {
mobile: '', // 手機號碼
code: '', // 驗證碼
// 校驗手機號碼
telRules: [{
required: true,
message: '手機號碼不能為空',
trigger: 'onBlur'
}, {
// 自定義校驗規則
validator: value => {
return /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
.test(value)
},
message: '請輸入正確格式的手機號碼',
trigger: 'onBlur'
}],
codeRules: [{
required: true,
message: '驗證碼不能為空',
trigger: 'onBlur'
}]
},
methods: {
getCode() {
// 局部表單驗證
this.$refs.form.validate('mobile').then(() => {
this.$toast.success('驗證碼獲取成功')
}).catch(() => {
this.$toast.fail('驗證碼獲取失敗')
})
},
submit() {
// 全局表單驗證
this.$refs.form.validate().then(() => {
this.$toast.success('提交成功')
}).catch(() => {
this.$toast.fail('提交失敗')
})
}
}
});
</script>
</body>
</html>