vue的表单验证规则

效果图：

在使用之前先npm install vue-verify-plugin

<template>
  <div class="container">
    <div class="zhuce_box">
      <div class="demo-input-suffix">
        <span class="span_style">账号名称：</span>
        <el-input v-model="regInfo.name" v-verify="regInfo.name" placeholder="请输入账号名称"></el-input>
        <label v-remind="regInfo.name" class="fl"></label>
      </div>
      <div class="demo-input-suffix">
        <span class="span_style">账号密码：</span>
        <el-input v-model="regInfo.password" v-verify="regInfo.password" placeholder="请输入账号密码"> </el-input>
        <label v-remind="regInfo.password" class="fl"></label>
      </div>
      <div class="demo-input-suffix">
        <span class="span_style">邮箱名称：</span>
        <el-input v-model="regInfo.email" v-verify="regInfo.email" placeholder="请输入邮箱名称"> </el-input>
        <label v-remind="regInfo.email" class="fl"></label>
      </div>
      <div class="demo-input-suffix">
        <span class="span_style">手机号码：</span>
        <el-input v-model="regInfo.phone" v-verify="regInfo.phone" placeholder="请输入手机号码"></el-input>
        <label v-remind="regInfo.phone" class="fl"></label>
      </div>
      <div class="demo-input-suffix">
        <span class="span_style">身份信息</span>
        <el-input v-model="regInfo.idCard" v-verify="regInfo.idCard" placeholder="请输入身份信息"> </el-input>
        <label v-remind="regInfo.idCard" class="fl"></label>
      </div>
      <div class="demo-input-suffix">
        <span class="span_style">备注备注：</span>
        <el-input type="text" v-model="text" placeholder="请输入备注" maxlength="50" show-word-limit> </el-input>
        <label class="fl"></label>
      </div>
      <!--按钮-->
      <div class="demo_input">
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button type="info" @click="returnback">返回</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import verify from 'vue-verify-plugin'
Vue.use(verify, {
  blur: true,
})
export default {
  data() {
    return {
      regInfo: {
        name: '',
        phone: null,
        password:'',
        email:null,
        idCard:null,
      },
      text:'',
    }
  },
  verify: {
    regInfo: {
      name: [
        {minLength: 1,message: "最小为1"},
        {maxLength: 15,message: "最大为15"},
      ],
      password: [
        {minLength: 1,message: "最小为1"},
        {maxLength: 20,message: "最大为20"},
      ],
      phone: [
        'required',{
          test: function (val) {
            if (!val) {
              return true
            }
            return /^1[3456789]\d{9}$/.test(val) || /^(\+?44|0)7\d{9}$/.test(val)
          },
          message: '请输入正确的手机号码',
        },
      ],
      email: [
        'required',{
          test: function (val) {
            if (!val) {
              return true
            }
            return /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(val)
          },
          message: '请输入正确的邮箱',
        },
      ],
      idCard: [
        'required',{
          test: function (val) {
            if (!val) {
              return true
            }
            return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(val)
          },
          message: '请输入正确的身份证',
        },
      ],
    },
  },
  methods: {
    // 提交
    submit: function () {
      if (this.$verify.check()) {
        this.$message.success('注册成功')
        this.$router.replace('/login')
      } else {
        this.$message.error('请输入完整信息')
      }
      console.log(this.$verify.check())
    },
    // 返回
    returnback() {
      this.$router.replace('/login')
    },
  },
}
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  background-image: linear-gradient(to right, #ff00b7, #005eff);
}
.zhuce_box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 460px;
  height: 500px;
  background-color: #fff;
  border-radius: 3px;
}
.el-input {
  width: 220px;
}
.demo-input-suffix {
  margin: 20px 0 0 20px;
}
.fl{
  margin: 10px;
  color: red;
}
.span_style{
  display: inline-block;
  width: 80px;
}
.demo_input{
  display: flex;
  justify-content: center;
  padding: 40px;
}
</style>