Vue表单校验：v-model、v-on轻松搞定，VeeValidate更给力

Vue 自带的表单校验指令

知道吗？Vue里有好多好用的指令像v-model啊、v-bind啊还有v-on，做表单验证特别方便！想看看邮箱格式对不对？只要把v-model跟v-on搭上脸，再配个 validateEmail()的小函数，让点击键盘或者从输入框离开的时候触发一下关联，当用户放弃的时候，这个 validateEmail()就会主动跳出来检查。然后按照校验结果给反馈就行，v-if就能搞定~

Vue里面的表单校验功能真是强大！连看似简单的必填项检查也能轻松搞定。更让人惊喜的是，它有个超赞的响应式架构，无论你是更新数据库还是跳转页面，都是那么流畅顺滑。

  

    
    
请输入一个有效的邮箱地址。
  


export default {
  data() {
    // 初始值为空
    return {
      email: '',
      validEmail: null
    };
  },
  methods: {
    validateEmail() {
      const reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/;
      this.validEmail = reg.test(this.email);
    }
  }
}

使用插件进行表单校验

别担心，Vue自带的表单验证功能已经够用。如果想更高级点儿的功能，自己上网找找。比如说VeeValidate这个东西，评价好好哟。用起来超级方便，有各种规则能选，比如必填项邮箱格式什么鬼的。最厉害的是，你还能根据自己的要求定规矩，超随意哒！

用VeeValidate做表单验证超轻松的！只要往输入框加个v-valid属性再设定好规则，复杂运算也能一步到位！省时省力还让人放心，再也不用担心用户乱填。

手动进行表单校验

  

    
    
{{ errors.first('email') }}
  


import { required, email } from 'vee-validate/dist/rules';
import { extend } from 'vee-validate';
import { ValidationProvider, ValidationObserver, localize } from 'vee-validate';
import zh_CN from 'vee-validate/dist/locale/zh_CN.json';
extend('required', required);
extend('email', email);
localize('zh_CN', zh_CN);
export default {
  data() {
    return {
      email: ''
    };
  },
  components: {
    ValidationProvider,
    ValidationObserver
  }
}

如果你发现Vue的指令/插件有问题用不起来，也别着急！静静看好了，其实解决这个问题超简单啦～完全自己动手就能搞定，感觉是不是很棒？随心所欲地调试，校验啥都能试试，而且从此不再受限！

我们用 Vue 弄个表单验证，得用个神奇的东西叫“事件监听器”。这个监听器就像是个摄像头，一直看着你的操作。比如说，网站得先让你填用户名和密码才能登录。这时，我们用v-model把人机对话框密不可分地连着，然后加个@submit.prevent防止你乱按提交按钮，最后在handleSubmit函数里搞清楚所有事情，比如看看用户名是不是空的啊什么的。记住，如果发现用户名是空白的，给人家提个醒或者告诉下步咋办就好了。

用手动这事儿好像有点儿费劲，而且也不太好看，要不试试让电脑帮帮忙呢?但说到底，主要还是要看你想要什么样的效果！

选择合适的表单校验方式

  

    
      
      提交
    
  


export default {
  data() {
    return {
      username: ''
    };
  },
  methods: {
    handleSubmit() {
      if (this.username === '') {
        alert('用户名不能为空！');
        return;
      }
      alert('提交成功！');
    }
  }
}

看表单筛选咋挑？Vue里面好多利器！想做基础数据核对，直接用 Vue的功能就好啦；要是对规则特别讲究，可以试下VeeValidate那个牛地儿；再往上走些，可能得自己动手了哟～

说实话咱们做前端的都明白Vue网站里那个表单校验的重要性？我们就是靠它混饭吃的！找个好方法多用几次，既能提升速度、保障数据安全，又能让客户更满意！