根據(jù)業(yè)務(wù)需要卦停，項目里大部分輸入框的驗證是支持輸入數(shù)字及驗證數(shù)字長度，所以我直接將這兩個驗證方法掛載在原型上，通過傳參的方式驗證不同的字段
1兰迫、在components文件夾下創(chuàng)建一個RegExp.js的文件薪缆，這里我寫了3個方法秧廉，只看前兩個就行
第一個是驗證輸入框只能輸入的輸入，支持0,0.0,0.00,0.000等數(shù)值為0 的輸入
第二個只驗證小數(shù)點后位數(shù)的驗證拣帽，可通過傳參的方式自定義驗證小數(shù)點后位數(shù)的長度
export default {
install(Vue) {
// 數(shù)字驗證--且大于等于0
Vue.prototype.RegNumber = (name) => {
return {
pattern:/^([1-9]\d*|0)(\.\d+)?$/,
message: "請輸入正確的" + name,
trigger: "blur"
}
},
// 數(shù)字+長度驗證
Vue.prototype.RegNumberLength = (length) => {
const reg = new RegExp("^\\d+(\\.\\d{1," + length + "})?$")
return {
pattern: reg,
message: "小數(shù)點后最長可輸入" + length + "位數(shù)字",
trigger: "blur"
}
},
// 任意數(shù)字驗證
Vue.prototype.RegAllNumber = (name) => {
return {
pattern: /^-?([1-9]\d*|0)(\.\d+)?$/,
message: "請輸入正確的" + name,
trigger: "blur"
}
},
// 數(shù)據(jù)過長--進行轉(zhuǎn)換
Vue.prototype.TransformNumber = (data) => {
let TransformedNum
let unit = ""; const k = 10000; const size = ["", "萬", "億", "萬億"]
let i
if (data < k) {
TransformedNum = data.toFixed(2)
} else {
i = Math.floor(Math.log(data) / Math.log(k))
TransformedNum = ((data / Math.pow(k, i))).toFixed(2)
unit = size[i]
}
const TransformedObj = { data: TransformedNum, unit: unit }
return TransformedObj
}
}
}
2疼电、在mian.js中注冊
// 正則表達式
import RegExp from './components/RegExp'
Vue.use(RegExp)
3、注冊完后就能正常使用了
<el-form-item label="鄉(xiāng)村人口" prop="population.rural" :rules="[{ required: true, message: '鄉(xiāng)村人口不能為空', trigger: 'blur' },RegNumber('鄉(xiāng)村人口'),RegNumberLength(5)]">
<el-input v-model="form.population.rural" style="width: 280px" >
<i slot="suffix" style="font-style: normal">萬人</i>
</el-input>
</el-form-item>
image.png
image.png
若輸入框還需要驗證不能輸入0,0.0,0.00,0.000,0.0000等類型的數(shù)值輸入：
在驗證規(guī)則中加入如下代碼：
{pattern:/^[1-9]|([1-9]+(\.[1-9]+)?)$/,message: '城鎮(zhèn)人口不能為零', trigger: 'blur'}
<el-form-item label="城鎮(zhèn)人口" prop="population.urban" :rules="[{ required: true, message: '城鎮(zhèn)人口不能為空', trigger: 'blur' },{pattern:/^[1-9]|([1-9]+(\.[1-9]+)?)$/,message: '城鎮(zhèn)人口不能為零', trigger: 'blur'},RegNumber('城鎮(zhèn)人口'),RegNumberLength(5)]">
<el-input v-model="form.population.urban" style="width: 280px" >
<i slot="suffix" style="font-style: normal">萬人</i>
</el-input>
</el-form-item>
image.png
image.png
image.png
