VUE表单验证两种用法

表单验证

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

表单验证技巧

遇到的问题：表单数据需要组织树进行选择，选择按钮，为了整个表单的好看，用了盒模型流动布局

但是也造成了一个问题，当验证不通过时，错误提示会被影响，float等属性无效，flex单个元素align-self等属性因为高度固定了也无法实现，所以采用了上面代码的方法：将显示与验证分离，显示部分 不做验证，验证表单隐藏不显示。这种方法我在很多地方用到了。

解决办法

// iview 表单
<Row :gutter="20" class="code-row-bg">
  <Col span="24" style="border:none;">
    <Form-item prop="unitMember" label="问责人员姓名" class="myFlex">
      <Input type="text" v-model="accountPersonFormData.unitMember" placeholder="请选择问责人员" disabled/>
      <Button style="font-size: 16px;" @click="showPerson()" icon="ios-person" size="small"></Button>
    </Form-item>
    <Form-item prop="unitMember" style="height: 0;margin: 0;padding: 0;" v-show="isShowErr">
      <Input type="text" v-model="accountPersonFormData.unitMember" v-show="false" disabled/>
    </Form-item>
  </Col>
</Row>

// 使用自定义表单验证
data() {
  const unitMemberValitate = (rule, value, callback) => {
    const { unitMember } = this.accountPersonFormData
    if (!unitMember) {
      this.isShowErr = true
      callback(new Error('不能为空'))
    } else {
      this.isShowErr = false
      callback()
    }
    callback()
  }

  return {
    rules: {
      unit: [{required: true, message: '不能为空', trigger: 'blur'}],
      unitMember: [{required: true, trigger: 'change', validator: unitMemberValitate}],
    },
    isShowErr: false
  }
},

.myFlex .ivu-form-item-content {
  display: flex;
  flex-direction: row;
  .ivu-form-item-error-tip {
    display: none;
  }
}