初次使用Element ui，遇到不少坑。在此做些記錄，方便日后查閱。
form 表單賦值/取值
取值：獲取 form 表單的每個(gè)表單項(xiàng)的值：this.formName.property，比如：this.ruleForm.username，this.ruleForm.psw
賦值：大部分都是下面這種方式賦值格式（property: value），
一般的 input ，賦值和顯示的事一致的，而有些則不一定。比如下拉選擇列表 select ，復(fù)選框 checkbox , 單選 radio ，日期 date 時(shí)間 time , 文件上傳 fileupload 等等會(huì)有個(gè)顯示文本（給用戶看）和實(shí)際值（后臺數(shù)據(jù)庫存儲(chǔ)的值）。
- select 選擇器設(shè)置默認(rèn)選擇，見此例https://jsfiddle.net/athena0304/g51g4L0L/
- checkbox 復(fù)選框和文件上傳 fileupload 的是數(shù)組
- 動(dòng)態(tài)生成后的默認(rèn)選項(xiàng)設(shè)置：label對應(yīng)的string，:label對應(yīng)的傳過來的參數(shù)（string,number），見此例https://codepen.io/feili/pen/KReNWw
form 表單驗(yàn)證
自帶驗(yàn)證和自定義驗(yàn)證。
自帶驗(yàn)證：
<script>
export default {
data() {
return {
form: {
telphone: '',
cardnum: '523456178988776111',
},
rules: {
telphone: [
{ required: true, message: '請輸入手機(jī)號', trigger: 'blur' }
],
cardnum: [
{ required: true, message: '請輸入買受人身份證號', trigger: 'blur' }
],
}
}
},
...
}
</script>
自定義驗(yàn)證：
<script>
export default {
data() {
//自定義驗(yàn)證規(guī)則
//身份證驗(yàn)證
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: '請輸入手機(jī)號', trigger: 'blur' },
{ pattern: /^1[34578]\d{9}$/, message: '目前只支持中國大陸的手機(jī)號碼' }
],
cardnum: [
{ required: true, message: '請輸入買受人身份證號', trigger: 'blur' },
{ validator: checkCardnum, trigger: 'blur' }
],
}
}
},
...
}
</script>
當(dāng)然，自定義驗(yàn)證規(guī)則時(shí)，一般都會(huì)是單獨(dú)的文件做相關(guān)驗(yàn)證規(guī)則限制，然后引入調(diào)用。validate.js，customValidate.js， xxx.vue。
validate.js
/**
* Created by feili on 2018/5/11.
*/
export default function (type,val) {
//type的值：qq-QQ號，mobile-手機(jī)號，phone-座機(jī)號，cardid-身份證號，integer-數(shù)字，moneynum-貨幣數(shù)字（帶兩位小數(shù)），...
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);
}
//手機(jī)號(目前只支持中國大陸的手機(jī)號碼)
var isMobile = function (val) {
const reg = /^1[34578]\d{9}$/;
return reg.test(val);
}
//座機(jī)號
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}[掛學(xué)警軍港澳]{1}$)|(^[A-Z]{2}[0-9]{5}$)|(^(08|38){1}[A-Z0-9]{4}[A-Z0-9掛學(xué)警軍港澳]{1}$)/;
return reg.test(val);
}
//數(shù)字（正整數(shù)和0）
var isInteger = function (val) {
const reg = /^([1-9]\d*|[0]{1,1})$/;
return reg.test(val);
}
//貨幣數(shù)字（最多帶兩位小數(shù)）
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();
}
},
/*手機(jī)號*/
isMobile: (rule, value, callback) => {
if((value || '')!='') {
if(!validate('mobile',value)) {
callback(new Error('您輸入的手機(jī)號不正確!'))
} else {
callback()
}
} else{
callback();
}
},
/*座機(jī)號*/
isPhone:(rule, value, callback) => {
if((value || '')!='') {
if(!validate('phone',value)) {
callback(new Error('您輸入的座機(jī)號不正確!'))
} else {
callback()
}
} else{
callback();
}
},
/*身份證號*/
isCardID:(rule, value, callback) => {
if((value || '')!='') {
if(!validate('cardid',value)) {
callback(new Error('您輸入的身份證號不正確!'))
} else {
callback()
}
} else{
callback();
}
},
/*數(shù)字（正整數(shù)和0）*/
isInteger: (rule, value, callback) => {
if((value || '')!='') {
if(!validate('integer',value)) {
callback(new Error('請輸入數(shù)字!'))
} else {
callback()
}
} else{
callback();
}
},
/*保留兩位小數(shù)*/
isMoneynum:(rule, value, callback) => {
if((value || '')!='') {
if(!validate('moneynum',value)) {
callback(new Error('請輸入正確的數(shù)字，最多保留兩位小數(shù)!'))
} else {
callback()
}
} else{
callback();
}
},
}
xxx.vue
import customValid from '@/util/customValidate'
rules: {
renttype: [
{ required: true, message: '請選擇出租方式', trigger: 'change' }
],
rentarea: [
{ required: true, message: '此項(xiàng)必填', trigger: 'blur' },
{ validator: customValid.isMoneynum, trigger: 'blur' }
],
rentcash: [
{ required: true, message: '此項(xiàng)必填', trigger: 'blur' },
{ validator: customValid.isInteger, trigger: 'blur' }
],
...
}
