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][email protected][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;
  }
}