标签：Toast return vant val 校验 表单 validator 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>

。

标签：Toast,return,vant,val,校验,表单,validator,ui,函数
来源： https://www.cnblogs.com/fqh123/p/14350950.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。