Vue 使用 vuelidate 实现表单验证

末蓝、 2022-06-05 06:24 291阅读 0赞

表单验证的应用场景十分广泛，因为网站对用户输入内容的限制是非常必要的。  
在vue中，我们使用vuelidate方便地实现表单验证。

官方文档在这里https://monterail.github.io/vuelidate/

1、安装

*  使用npm安装：npm install vuelidate --save
 *  在main.js中引入：
    
        import Vuelidate from 'vuelidate'
        Vue.use(Vuelidate)

*  在组件.vue中引入需要使用的验证项：
    
        import { required, minLength, maxLength, sameAs } from 'vuelidate/lib/validators'

2、使用  
例如我们要写一个注册时的表单验证，需要用户填写的信息有：username，phoneNumber，phoneCode，password，confirmPassword。用vuelidate对这些数据进行验证。代码很容易懂，就不写多余的说明了。  
.vue中的代码如下：

data () {
      return {
        user: {
          username:'',
          phone: '',
          phoneCode: '',
          password: '',
          confirmPassword: '',
        },
      }
    }，
    validations: {
      user: {
        username: {
          required,
          minLength: minLength(2),
          maxLength: maxLength(20)
        }
        phone: {
          required
        },
        phoneCode: {
          required
        },
        password: {
          required,
          minLength: minLength(8),
          maxLength: maxLength(32)
        },
        confirmPassword: {
          sameAsPassword: sameAs('Password')
        }
      }
    }

截取 HTML中手机号，密码和验证密码的代码如下：

<div class="form-group" :class="{'error': $v.user.phone.$error}">
      <span class="message" v-if="!$v.user.phone.required">手机号不能为空</span>
    
      <input type="text" placeholder="手机号"
        v-model.trim="user.phone"
        @blur="$v.user.phone.$touch()">
    </div>
    
    
    <div class="form-group" :class="{'error': $v.user.password.$error}">
      <span class="message" v-if="!$v.user.password.required">密码不能为空</span>
      <span class="message"
        v-if="!$v.user.password.minLength">密码不能小于{
        {$v.user.password.$params.minLength.min}}位</span>
      <span class="message"
        v-if="!$v.user.password.maxLength">密码不能大于{
        {$v.user.password.$params.maxLength.max}}位</span>
    
      <div class="auth-password">
        <input type="password" placeholder="输入密码"
          v-model.trim="user.password"
          @blur="$v.user.password.$touch()" ref="password1">
      </div>
    </div>
    
    
    <div class="form-group" :class="{'error': $v.user.confirmPassword.$error}">
      <span class="message" v-if="!$v.user.confirmPassword.sameAsPassword">两次输入的密码不一样</span>
      
      <div class="auth-password">
        <input type="password" placeholder="确认密码"
          v-model.trim="user.confirmPassword"
          @blur="$v.user.confirmPassword.$touch()"
          @keyup.enter="register" ref="password2">
      </div>
    </div>

其中，第21行、32行中的$touch()方法，表示在什么时候执行验证。

@blur="$v.user.Phone.$touch()"表示blur事件触发（失去焦点）时验证。

@input="$v.user.Phone.$touch()"表示input事件触发（输入内容发生变化）时验证。

上面只列举了vuelidate中最基本的一些表单验证，复杂的有机会再来补上。