最近在做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('输入必须是非负数'))
}