关于Vue的表单验证

前言

最近在研究 Vue 如何实现表单的验证，在网上查阅资料以后，简单将这些方法整合一下，方便以后学习。如果有不准确之处，还望指正。 Vue 实现表单验证的方法有如下几种：

一、基于 Vue 与 jQuery 实现

之所以把这种方法放在第一位是因为这种方法与我们之前常用的很多方法类似，对于没接触过框架的人来说，这种方法更好上手。至于是否是最实用的或者用途最广的就另说了，并且这种方法充分提现了 Vue 框架的优越性。
HTML代码如下：

<div id="app">
    <p>
        <input @change="checkname" type="text" v-model="name" placeholder="用户名">
        <span v-text="msgame" :style="styles"></span>
    </p>
    <p>
        <input @change="checkemail" type="text" v-model="email" placeholder="邮箱">
        <span v-text="msgmail" :style="styles"></span>
    </p>
    <p>
        <input @change ="checkphone" type="text" v-model = "phone" placeholder="手机" id="phone">
        <span v-text="msgphone" :style="styles"></span>
    </p>
    <p>
        <input @change="checkpassword" type="password" v-model="password" placeholder="密码" id="test">
        <span v-text="msgpassword" :style="styles"></span>
    </p>
    <p>
        <input @change="checkpwd" type="password" v-model="pwd" placeholder="重复密码" id="test1">
        <span v-text="msgpwd" :style="styles"></span>
    </p>
</div>

JavaScript代码如下：

var vm = new Vue({
el:"#app",
        data:{
            msgame:"",
            msgmail:"",
            msgpassword:"",
            msgpwd:"",
            msgage:"",
            msgphone:"",
            name:"",
            email:"",
            password:"",
            pwd:"",
            phone:"",
            styles: {
             color: 'red'
            }
        },
        methods:{
         checkname:function(){
                if(this.name==""){
                    this.msgame = "用户名不能为空";
                }else{
                    this.msgame ="";
                }
            },
            checkemail:function(){
          var regEmail=/^[A-Za-zd]+([-_.][A-Za-zd]+)*@([A-Za-zd]+[-.])+[A-Za-zd]{2,5}$/;
          if(this.email==''){
            this.msgmail="请输入邮箱";
          }else if(!regEmail.test(this.email)){
            this.msgmail="邮箱格式不正确";
            }
         },
         checkpassword:function(){
             var pwdReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;//
            var value = $('#test').val();
            if(this.password==""){
              this.msgpassword = "密码不能为空"
            }else if(!pwdReg.test(value)){
              this.msgpassword = "密码不合法";
            }else{
              this.msgpassword = "密码合法";
            }
         },
         checkpwd:function(){
               if(this.pwd==""){
                   this.msgpassword ="密码不能为空"
               }else if(this.pwd !=this.password){
                   this.msgpwd = "输入密码保持一致"
               }else{
                   this.msgpwd ="输入密码正确"
               }
         },
         checkphone:function(){
            var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; 
                if(this.phone==""){
                    this.msgphone="手机号不能为空";
                }else if(!myreg.test($("#phone").val())){
                    this.msgphone="请输入有效的手机号码";
                }else{
                    this.msgphone="输入正确"
                }
            },
        }
}）

项目运行如下：

这样一个简单的表单验证就完成了。

二、基于 Element-ui 与 vue 实现

这种方法也是 Element-ui 官方给出的一种验证，具体可以去官方 API 进行查看，这里为了综合，顺便做一个简单的介绍吧。

HTML代码如下：

<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
  <el-form-item label="密码" prop="pass">
    <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="确认密码" prop="checkPass">
    <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="年龄" prop="age">
    <el-input v-model.number="ruleForm2.age"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
    <el-button @click="resetForm('ruleForm2')">重置</el-button>
  </el-form-item>
</el-form>

script代码如下：

<script>
  export default {
    data() {
      var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年龄不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value < 18) {
              callback(new Error('必须年满18岁'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm2.checkPass !== '') {
            this.$refs.ruleForm2.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm2.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        ruleForm2: {
          pass: '',
          checkPass: '',
          age: ''
        },
        rules2: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          age: [
            { validator: checkAge, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

运行截图如下：

如果还看不懂，可以访问这个博主的博客，这位博主写的很详细。添加链接描述

三、使用 VeeValidate 插件

这个方法也是目前网上提供方法最多的，由于我目前还用不到，所以也没细研究，这里就给大家推荐一些博主的软文吧VeeValidate使用教程，这篇博主的特别推荐，很基础，而且很详细，提前备份，留着后用。veeValidate实战
。希望可以帮到大家。