vue-element-validation

This is a user-defined component that can quickly verify the form, which is applicable to the projects built by Vue + element UI.

Some common methods are provided to eliminate the tedious problem that the traditional verification is written to the rules object.

Install

npm i vue-element-validation

Github

Source Link

Example

Add parameters to the elements to be verified :rules Pass in the vCheck() methods and parameters to verify the form.

// Step1: ./src/main.js

import Validation from 'vue-element-validation'
Vue.use(Validation)

// Step2: ./src/pages/index.vue

<el-form :model="form">
  <el-form-item
    label="Name"
    prop="name"
    :rules="vCheck({ required: true, trigger: 'blur' })">
    <el-input type="text" v-model="form.name"></el-input>
  </el-form-item>
</el-form>

TypeScript

This global component supports the Vue project based on typescript.

Attributes

| 参数 | 说明 | Desc | | ---- | ---- | ---- | | required | 是否必填 | Is it necessary to fill in | | trigger | 校验触发事件 | Verification trigger event | | max | 最大长度 | Maximum length | | message | 校验提示信息 | Verification prompt information | | min | 最小值 | Minimum value | | minNum | 最小数值 | Minimum value | | max | 最大值 | Maximum value | | maxNum | 最大数值 | Maximum value | | type='notEarlier' | 不能早于当前时间 | Cannot be earlier than the current time | | type='notFutureTime' | 不能为未来时间 | Not for the future | | type='number' | 数字校验 | Digital check | | type='date' | 日期时间校验 | Date time verification | | type='mobile' | 手机校验 | Mobile phone calibration | | type='email' | 邮箱校验 | Mailbox check | | type='idCard' | 身份证校验 | Verification of ID card | | type='url' | url校验 | URL check | | type='characters' | 中英文字符串或者下划线 | Chinese and English strings or underscores | | type='integer' | 正整数 | positive integer | | type='int' | 整数(包括正负) | Integer (including positive and negative) | | type='upperCaseNumber' | 匹配由数字和26个英文字母组成的字符串 | Matches a string of numbers and 26 English letters | | type='money' | 验证金额 | Verification amount | | type='sales' | 验证折扣 | Verification discount | | type='decimal' | 验证最多保留两位小数的正数 | Verify that a positive number of up to two decimal places is retained | | type='fourdecimal' | 验证最多保留四位小数的正数 | Verify that a positive number of up to four decimal places is retained | | type='decimals' | 最多保留两位小数的正数或负数 | Keep up to two decimal places positive or negative | | type='mouseDecimal' | 校验最多为 item.decimal(页面中设置的参数) 位小数的正数或负数 | Verify up to a positive or negative number of decimal places in item.decimal (parameter set in the page) |

Thanks

Thank you for your support - Lean