介绍

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

Logo

前往低代码交流专区

更多推荐