Vue表单验证控件vuelidate

介绍

Vuelidate控件，可以方便的实现表单验证功能。

源码工程地址：vuelidate示例源码

效果图

安装

npm install vuelidate

使用方式

步骤一：main.js中引入vue-touch

//main.js中引入：
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

步骤二：引vue文件中引入验证项，如：

import {required} from 'vuelidate/lib/validators'

注： 数据需要用 v-model 绑定， this.$v.xxx.$touch()用来触发验证事件，this.$v.$reset()用来重置验证。

示例源码

import {required} from 'vuelidate/lib/validators'

export default {
  name: 'vuelidate_index',
  data: () => ({
    model: {
      login_name: null,
      login_pwd: null,
    },
    remember_me: true,
    error_msg: null
  }),
  validations: {
    model: {
      login_name: {required},
      login_pwd: {required},
    },
  },
  render(h) {
    return h('div', {
      staticClass: 'items-center col-grow',
      style: {
        marginTop: '100px'
      }
    }, [
      h('div', {
        staticClass: 'login-bg shadow-3 radius-3',
        style: {
          margin: '0 auto',
          width: '310px',
          height: '420px',
          padding: '20px 25px',
          zIndex: 3,
          background: 'rgba(216, 220, 229, 0.5)'
        }

      }, [
        h('div', {
          staticClass: 'text-tertiary text-center',
          style: {
            fontSize: '25px',
            fontWeight: '700',
            margin: '20px 0 80px'
          }
        }, ['VUE组件库平台']),
        h('q-input', {
          staticClass: 'bg-white radius-3 font-13 q-pl-xs q-pr-sm shadow-1 q-mb-md',
          style: {
            height: '33px',
            fontWeight: '400',
            border: '1px solid white',

          },
          props: {
            color: 'dark',
            type: 'text',
            hideUnderline: true,
            value: this.model.login_name,
            placeholder: '请输入账号',
            before: [{
              icon: 'person'
            }]
          },
          on: {
            input: (v) => this.model.login_name = v
          }
        }),
        h('q-input', {
          staticClass: 'bg-white radius-3 font-13 q-pl-xs q-pr-sm pp shadow-1 login-input',
          style: {
            height: '33px',
            fontWeight: '400',
          },
          props: {
            color: 'dark',
            type: 'password',
            hideUnderline: true,
            value: this.model.login_pwd,
            placeholder: '请输入密码',
            clearable: true,
            before: [{
              icon: 'lock',
            }]
          },
          on: {
            input: (v) => this.model.login_pwd = v
          }
        }),
        h('q-btn', {
          staticClass: 'login-btn font-13 full-width shadow-1 radius-2',
          style: {
            marginTop: '10px',
            height: '33px',
            minHeight: '33px',
            fontWeight: '400'
          },
          props: {
            color: 'primary',
          },
          on: {
            click: () => {
              this.$v.model && this.$v.model.$touch();
              if (this.$v.model.login_name.$error) {
                this.error_msg = "提示：请输入账号"
                return
              }

              if (this.$v.model.login_pwd.$error) {
                this.error_msg = "提示：请输入密码"
              }

              console.log(this.$v.model)
              if (!this.$v.model.$error) {
                this.$q.ok("登录成功！")
              }
            },
          }
        }, '登 录'),

        h('div', {
          staticClass: 'text-negative text-left q-mt-sm font-13 text-weight-medium'
        }, [this.error_msg]),
      ])
    ])
  }
}

验证规则列表

规则名称	含义
required	需要非空数据。检查仅包含空格的空数组和字符串。
maxLength	要求输入具有最大指定长度（包括最大值）。适用于数组。
minLength	要求输入具有最小指定长度（包括最小值）。适用于数组。
email	接受有效的电子邮件地址。
between	检查数字或日期是否在指定范围内。最小值和最大值都包括在内。
ipAddress	接受点分十进制表示形式的有效IPv4地址，如127.0.0.1。
alpha	只接受字母字符。
alphaNum	只接受字母数字。
numeric	只接受数字。
sameAs	检查给定属性是否相等。
url	只接受网址。
or	当至少有一个提供的验证器通过时通过。
and	所有提供的验证器都通过时通过。
requiredIf	仅当提供的属性为真时才需要非空数据。
requiredUnless	仅当提供的属性为假时才需要非空数据。
minValue	要求输入不能少于指定的最小数值或日期。
maxValue	要求输入不能大于指定的最大数值或日期。

插件地址：vuelidate