vant 表单验证

标签：van Vant form 验证 验证码 表单 message
一 、使用方法

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(()=>{
	//验证失败
	})

eg：
3. 局部表单验证
3.1 在 van-form 中定义ref属性 ref=“xxx”
3.2 在需要验证的项的 van-field上加上 name值 name=“ooo”
3.3 在触发对应事件的函数中写入以下代码

this.$refs.xxx.validate("name的值").then(()=>{
	// 验证通过
	}).catch(()=>{
	//验证失败
	})

二、完整示例代码

    
    
    



    

        
            
            
            
            
                
                
            
            提交