表单验证

<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}$/