1.在vue中 使用rules形式進行校驗
1.首先在vue文件的methods()中添加校驗方法,這裏校驗方法命名爲isNumber用自帶的.test方法進行正則校驗
methods: {
isNumber(rule, value, callback) {
if (value === '') {
return callback();
} //這是用來判斷如果不是必須輸入的,則直接跳出
const r = /^\+?[1-9][0-9]*$/; // 正整數
// 如果判斷不符合正則,則不是正整數不能提交
if (!r.test(value)) {
return callback(new Error('數量必須爲正整數'));
} else {
return callback();
}
},
}
2.在data()中定義的rules裏使用校驗規則
rules: {
size: [{ validator: this.isNumber, trigger: 'blur' }],
},
2.在原生js中
const r = /^\+?[1-9][0-9]*$/; // 正整數
// 如果判斷不符合正則,則不是正整數不能提交
if (!r.test(itemsTable[i].number)) {
alert('數量必須爲正整數');
return;
}
3.或者直接在input中進行設置
<el-input
v-model="createForm.areaWide"
//只允許輸入正整數
oninput="value=value.replace(/[^\d]/g,'')"
></el-input>
4.在3的基礎上可以實現輸入正的小數
<el-input
v-model="createForm.areaWide"
//可以輸入正的小數
oninput="value=value.replace(/[^\d.]/g,'')"
></el-input>