通过 rules 定义表单校验规则

具体代码如下

<div class="wrapper" >
    <div class="block" @click.stop>
      <div class="block-title">服务提交</div>
      <van-form @submit="submitForm" ref='form'>
        <van-field 
					v-model="name" 
					name='name' 
					placeholder="请输入姓名" 
					:rules="[{ required: true, message: '请填写姓名' }]" 
					@blur="valiName"
				/>
        <van-field 
          v-model="phone" 
          name='phone' 
          placeholder="请输入手机号"
          @blur="valiPhone"
          :rules="[
            { required: true, message: '请输入手机号' },
            { validator, message: '请输入正确的手机号' }
          ]"
        />
        <van-button type="info" size="large" class="block-button"  :class="{'disButton':vName == false ||vPhone == false}"  native-type="submit">提交</van-button>
      </van-form>
    </div>
  </div>

代码是做了两个局部的校验，实现了当两个局部校验都通过的时候，按钮的样式改变，且可提交代码是做了两个局部的校验，实现了当两个局部校验都通过的时候，按钮的样式改变，且可提交

其中手机号这边有两个校验规则，除了判断是否为空以外，还加了手机号码的正则校验

// 校验函数返回 true 表示校验通过，false 表示不通过
validator(val) {
  return /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/.test(val);
}

局部校验

如果想需要得到单个字段的检验结果就需要绑定对应的方法

如在手机号字段中绑定了valiPhone方法

valiPhone(){
	this.$refs.form.validate("phone").then(() => {//此处的phone即为name里的值
	this.vPhone = true //你的操作
	}).catch(() => {
		this.vPhone = false  //你的操作
			})
    },

这里需要注意的是不要忘了在van-field中定义一个name参数

全局校验

全局校验跟局部校验相似，但是不需要写name参数

valiPhone(){
	this.$refs.form.validate().then(() => {
	 //成功时的程序
	}).catch(() => {
		 //失败时的程序
			})
    },