vant-ui表單驗證

 

。

<template>
    <div>
        <van-form validate-first @failed="onFailed">
            <div>必填</div>
            <van-field
                v-model="username"
                name="用戶名"
                label="用戶名"
                placeholder="用戶名"
                :rules="[
                    { 
                        required: true,
                        trigger:'onBlur', 
                        message: '不能為空' 
                    },
                    {
                        pattern: /\d{6}/,
                        message: '請填寫6個數字',
                        trigger: 'onBlur'
                    }
                ]"
            />
            <!-- 通過 pattern 進行正則校驗 -->
            <div>通過 pattern 進行正則校驗</div>
            <van-field
                v-model="value1"
                name="pattern"
                placeholder="正則校驗"
                :rules="[{ pattern, message: '請輸入正確內容' }]"
            />
            <!-- 通過 validator 進行函數校驗 -->
            <div>通過 validator 進行函數校驗</div>
            <van-field
                v-model="value2"
                name="validator"
                placeholder="函數校驗"
                :rules="[{ validator, message: '請輸入正確內容' }]"
            />
            <!-- 通過 validator 進行異步函數校驗 -->
            <div>通過 validator 進行異步函數校驗</div>
            <van-field
                v-model="value3"
                name="asyncValidator"
                placeholder="異步函數校驗"
                :rules="[{ validator: asyncValidator, message: '請輸入正確內容' }]"
            />
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">提交</van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
import { Toast } from 'vant';
export default {
    data(){
        return{
            username:'',
            value1: '',
            value2: '',
            value3: '',
            pattern: /\d{6}/,
        }
    },
    methods:{
        // 校驗函數返回 true 表示校驗通過，false 表示不通過
        validator(val) {
            return /1\d{10}/.test(val);
        },
        // 異步校驗函數返回 Promise
        asyncValidator(val) {
            return new Promise((resolve) => {
                Toast.loading('驗證中...');

                setTimeout(() => {
                Toast.clear();
                resolve(/\d{6}/.test(val));
                }, 1000);
            });
        },
        onFailed(errorInfo) {
            console.log('failed', errorInfo);
        },
    }
}
</script>

<style lang="scss" scoped>
    
</style>

 

 

 

 

 

 

 

。