表单验证
<Form :model="tableDesignObject" ref="dataSheetForm" inline :rules="rules">
<Form-item prop="name" :label="数据表名">
<Input type="text" v-model.trim="tableDesignObject.name" placeholder="请输入数据表名" />
</Form-item>
</Form>
规则介绍:
required:----是否必填
message:----验证不通过消息提示
trigger:-------触发验证的方式blur
、change
、input
等
min:-----------最少字符个数,最小长度
max:----------最多字符个数,最大长度
pattern :-----正则验证
validator:-----验证器
第一种写法
data() {
return {
rules: {
name: [
{ required: true, message: "表名不能为空", trigger: "blur" },// 必填
{ pattern: /^[a-zA-Z]\w*$/, message: "表名以字母开头,可包含数字,字母,下划线", trigger: "blur" },
{ min: 2, max: 30, message: "长度在 2 到 30 个字符", trigger: "blur" }// 控制长度
]
},
}
}
第二种写法
const.js
// 全局使用相同的name正则验证
export const dataSheetNameREG = /^[a-zA-Z]\w*$/
dataSheet.vue
import { dataSheetNameREG } from '@src/const'
const validateName = (rule, value, callback) => {
if (!value) {// 避免数据为null或undefined等非字符串数据。切记value===''只能验证字符串
callback(new Error('请填写数据表名'))
} else if (!dataSheetNameREG.test(value)) {
callback(new Error('表名以字母开头,可包含数字,字母,下划线'))
} else if (this.checkSheetNameRepeat(value)) {
callback(new Error('表名已存在'))
}
callback()
}
data() {
return {
rules: {
name: [{ required: true, trigger: 'blur', validator: validateName }]
},
}
}
表单提交验证
// 验证通过提交表单数据
this.$refs['dataSheetForm'].validate(valid => {
if (valid) {
if (this.isAdd) {
this.addTable()
} else {
this.updateTable('update')
}
}
})
常用正则验证
// 字母开头,可包含数字,字母,下划线
const name = /^[a-zA-Z]\w*$/
// 电话号
const tel = /^1[3456789]\d{9}$/
// 邮箱
const emai = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
// 固定电话
const fixedline = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/
// 微信号
const weixin = /^[a-zA-Z][a-zA-Z0-9_-]{5,19}$/
// 公司组织机构代码
const company = /^[A-Z0-9]{8}-[A-Z0-9]$|^[A-Z0-9]{8}-[A-Z0-9]-[0-9]{2}$/