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