Element ui: form表單使用

form 表單賦值/取值

取值：獲取 form 表單的每個表單項的值：this.formName.property，比如：this.ruleForm.username，this.ruleForm.psw
賦值：大部分都是下面這種方式賦值格式（property: value），
一般的 input ，賦值和顯示的事一致的，而有些則不一定。比如下拉選擇列表 select ，復選框 checkbox , 單選 radio ，日期 date 時間 time , 文件上傳 fileupload 等等會有個顯示文本（給用戶看）和實際值（后台數據庫存儲的值）。

• select 選擇器設置默認選擇，見此例https://jsfiddle.net/athena0304/g51g4L0L/
• checkbox 復選框和文件上傳 fileupload 的是數組
• 動態生成后的默認選項設置：label對應的string，:label對應的傳過來的參數（string,number），見此例https://codepen.io/feili/pen/KReNWw

form 表單驗證

自帶驗證和自定義驗證。
自帶驗證：

<script>
  export default {
    data() {
      return {
        form: {
          telphone: '',
          cardnum: '523456178988776111',
        },
        rules: {
          telphone: [
            { required: true, message: '請輸入手機號', trigger: 'blur' }
          ],
          cardnum: [
            { required: true, message: '請輸入買受人身份證號', trigger: 'blur' }
          ],
        }
      }
    },
    ...
  }
</script>

自定義驗證：

<script>
  export default {
    data() {
      //自定義驗證規則
      //身份證驗證
      var checkCardnum = (rule, value, callback) => {
        setTimeout(() => {
          var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
          if(!reg.test(value)){
            callback(new Error('身份證輸入不合法'));
          }else{
            callback();
          }
        }, 1000);
      };
      return {
        form: {
          telphone: '',
          cardnum: '523456178988776111',
        },
        rules: {
          telphone: [
            { required: true, message: '請輸入手機號', trigger: 'blur' },
            { pattern: /^1[34578]\d{9}$/, message: '目前只支持中國大陸的手機號碼' }
          ],
          cardnum: [
            { required: true, message: '請輸入買受人身份證號', trigger: 'blur' },
            { validator: checkCardnum, trigger: 'blur' }
          ],
        }
      }
    },
    ...
  }
</script>

當然，自定義驗證規則時，一般都會是單獨的文件做相關驗證規則限制，然后引入調用。validate.js，customValidate.js， xxx.vue。
validate.js

/**
 * Created by feili on 2018/5/11.
 */
export default function (type,val) {
  //type的值：qq-QQ號，mobile-手機號，phone-座機號，cardid-身份證號，integer-數字，moneynum-貨幣數字（帶兩位小數），...
  var result = false;

  //QQ
  var isQQ = function (val) {
    const reg = /^[1-9][0-9]{4,10}$/;
    return reg.test(val);
  }

  //郵箱
  var isEmail = function (val) {
    const reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
    return reg.test(val);
  }

  //手機號(目前只支持中國大陸的手機號碼)
  var isMobile = function (val) {
    const reg = /^1[34578]\d{9}$/;
    return reg.test(val);
  }

  //座機號
  var isPhone = function (val) {
    const reg = /^0\d{2,3}-\d{7,8}$/;
    return reg.test(val);
  }

  //身份證號(15位和18位)
  var isCardID = function (val) {
    const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
    return reg.test(val);
  }

  //車牌號(川B12345)
  var isPlateNumber = function (val) {
    const reg = /(^[\u4E00-\u9FA5]{1}[A-Z0-9]{6}$)|(^[A-Z]{2}[A-Z0-9]{2}[A-Z0-9\u4E00-\u9FA5]{1}[A-Z0-9]{4}$)|(^[\u4E00-\u9FA5]{1}[A-Z0-9]{5}[掛學警軍港澳]{1}$)|(^[A-Z]{2}[0-9]{5}$)|(^(08|38){1}[A-Z0-9]{4}[A-Z0-9掛學警軍港澳]{1}$)/;
    return reg.test(val);
  }

  //數字（正整數和0）
  var isInteger = function (val) {
    const reg = /^([1-9]\d*|[0]{1,1})$/;
    return reg.test(val);
  }

  //貨幣數字（最多帶兩位小數）
  var isMoneynum = function (val) {
    const reg = /^([1-9]\d+|0)(\.[\d]{1,2})?$/;
    return reg.test(val);
  }


  switch(type) {
    case 'qq':
      result = isQQ(val);
      break;
    case 'mobile':
      result = isMobile(val);
      break;
    case 'phone':
      result = isPhone(val);
      break;
    case 'cardid':
      result = isCardID(val);
      break;
    case 'platenumber':
      result = isPlateNumber(val);
      break;
    case 'integer':
      result = isInteger(val);
      break;
    case 'moneynum':
      result = isMoneynum(val);
      break;
    default:
      break;
  }

  return result;

}

customValidate.js

/**
 * Created by feili on 2018/5/11.
 */

import  validate from './validate.js'

export default {
  /*qq號*/
  isQQ: (rule, value, callback) => {
    if((value || '')!='') {
      if(!validate('qq',value)) {
        callback(new Error('您輸入的QQ號不正確!'))
      } else {
        callback()
      }
    } else{
      callback();
    }
  },
  /*手機號*/
  isMobile: (rule, value, callback) => {
    if((value || '')!='') {
      if(!validate('mobile',value)) {
        callback(new Error('您輸入的手機號不正確!'))
      } else {
        callback()
      }
    } else{
      callback();
    }
  },
  /*座機號*/
  isPhone:(rule, value, callback) => {
    if((value || '')!='') {
      if(!validate('phone',value)) {
        callback(new Error('您輸入的座機號不正確!'))
      } else {
        callback()
      }
    } else{
      callback();
    }
  },
  /*身份證號*/
  isCardID:(rule, value, callback) => {
    if((value || '')!='') {
      if(!validate('cardid',value)) {
        callback(new Error('您輸入的身份證號不正確!'))
      } else {
        callback()
      }
    } else{
      callback();
    }
  },
  /*數字（正整數和0）*/
  isInteger: (rule, value, callback) => {
    if((value || '')!='') {
      if(!validate('integer',value)) {
        callback(new Error('請輸入數字!'))
      } else {
        callback()
      }
    } else{
      callback();
    }
  },
  /*保留兩位小數*/
  isMoneynum:(rule, value, callback) => {
    if((value || '')!='') {
      if(!validate('moneynum',value)) {
        callback(new Error('請輸入正確的數字，最多保留兩位小數!'))
      } else {
        callback()
      }
    } else{
      callback();
    }
  },

}

xxx.vue
import customValid from '@/util/customValidate'

rules: {
          renttype: [
            { required: true, message: '請選擇出租方式', trigger: 'change' }
          ],
          rentarea: [
            { required: true, message: '此項必填', trigger: 'blur' },
            { validator: customValid.isMoneynum, trigger: 'blur' }
          ],
          rentcash: [
            { required: true, message: '此項必填', trigger: 'blur' },
            { validator: customValid.isInteger, trigger: 'blur' }
          ],
          ...
}

參考

• ElementUi rules表單驗證
• vue+element-ui中的表單驗證（電話等等）