vant-form自定义校验

J总裁的小芒果

于 2024-07-01 14:14:04 发布

阅读量376

点赞数 2

文章标签：前端 vue.js javascript vue

本文链接：https://blog.csdn.net/2301_76162638/article/details/140099533

版权

一、直接在field中校验

<template>
    <van-form ref="formData">
        <van-field label="用户名称" input-align="right"
                 required v-model="data.name"
                 :rules="[{ required: true, message: '请输入用户户名称' }]">
    </van-form>
</template>

二、在field中写多个校验

<template>
    <van-form ref="formData">
        <van-field label="用户名称" input-align="right"
                 required v-model="data.name"
                 :rules="[{ required: true, message: '请输入用户名称' },
                 { validator: validatorMessage, message:'当前用户重复' }]">
    </van-form>
</template>
<script>
    const validatorMessage = (val) => data.value.filter(x => x.name== val).length == 1    
</scrpt>

三、自定义校验（直接写规则）

<template>
    <van-form ref="formData">
        <van-field label="用户数量" input-align="right"
                 required v-model="data.num"
                 :rules="getRules">
    </van-form>
</template>

<script>
     const getRules= (val) => {
         return [
                { required: true, message: '请输入拜访用户数量' },
                { pattern: /^[1-9]\d*$/, message: '请输入正整数' },
                { validator: (value) => {
                    if (parseInt(value) > parseInt(val)) {
                      return '用户数量不能大于规定数量!'
                    } else {
                          return '';
                    }
                }
         }]
     }
</scrpt>

四、push校验

<template>
    <van-form ref="formData">
        <van-field label="用户数量" input-align="right"
                 required v-model="data.num"
                 :rules="getRules">
    </van-form>
</template>
<script>
    const customnRules = ref([]) // 设备编号校验
    customnRules.value.push({required: true, message: '请输入自定义校验'})

        // 最后
        formData.value.validate().then(async () => {
            // 通过校验        
        })
</script>