vue常用表单校验

最近在做vue的系统，在使用表单时需要很多校验，但是由于不熟悉vue，开发很慢，不过最终还是完成了任务。总结一下使用的vue表单校验规则，记录下来，方便查阅。以后有新的用法，则继续补充到这里。

顺便附带上表单原生属性的介绍，写的很详细。form表单原生属性介绍

在理解表单的原生属性后，写这些校验规则就会感觉很轻松。

someField: [
{required: true, message: '请输入查询QPS', trigger: 'blur'},
{type: 'number', min: 1, max: 3000, message: '请输入1～3000的单值数字'}
],

注意：
min和max只针对type: 'number'的字段，并且<el-input v-model.number="someField"></el-input>
data里面的初始值：someField: null

someField: [
{required: true, message: '请输入查询延时', trigger: 'blur'},
{type: 'number', min: 500, max: 60000, message: '请输入500～60000的单值数字'}
],
someField: [
{required: true, message: '请输入下游系统', trigger: 'blur'},
{pattern: /^(\w|-|[\u4e00-\u9fa5])*$/g, message: '中文、英文大小写，数字，下划线，中划线'}
],
someField: [
{required: true, message: '请输入用户名称', trigger: 'blur'},
// 用户名和库命名规则：以小写字母开头，小写字母或数字结尾，可包含小写字母、数字以及下划线（_）
{pattern: /^([a-z]).(\w)*([a-z]|\d)+$/g, message: '小写字母开头，支持下划线，以小写字母、数字结尾'}
],
someField: [
{required: true, message: '请输入查询范围', trigger: 'blur'},
{validator: checkNumber, trigger: 'blur'}
],

var checkNumber = (rule, value, callback) => {
var regPos = /^[1-9]\d*(\.\d+)?$/
if (regPos.test(value)) {
callback()
}
callback(new Error('输入必须是非负数'))
}