根据业务需要，项目里大部分输入框的验证是支持输入数字及验证数字长度，所以我直接将这两个验证方法挂载在原型上，通过传参的方式验证不同的字段
1、在components文件夹下创建一个RegExp.js的文件，这里我写了3个方法，只看前两个就行
第一个是验证输入框只能输入的输入，支持0,0.0,0.00,0.000等数值为0 的输入
第二个只验证小数点后位数的验证，可通过传参的方式自定义验证小数点后位数的长度
export default {
install(Vue) {
// 数字验证--且大于等于0
Vue.prototype.RegNumber = (name) => {
return {
pattern:/^([1-9]\d*|0)(\.\d+)?$/,
message: "请输入正确的" + name,
trigger: "blur"
}
},
// 数字+长度验证
Vue.prototype.RegNumberLength = (length) => {
const reg = new RegExp("^\\d+(\\.\\d{1," + length + "})?$")
return {
pattern: reg,
message: "小数点后最长可输入" + length + "位数字",
trigger: "blur"
}
},
// 任意数字验证
Vue.prototype.RegAllNumber = (name) => {
return {
pattern: /^-?([1-9]\d*|0)(\.\d+)?$/,
message: "请输入正确的" + name,
trigger: "blur"
}
},
// 数据过长--进行转换
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="乡村人口" prop="population.rural" :rules="[{ required: true, message: '乡村人口不能为空', trigger: 'blur' },RegNumber('乡村人口'),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等类型的数值输入：
在验证规则中加入如下代码：
{pattern:/^[1-9]|([1-9]+(\.[1-9]+)?)$/,message: '城镇人口不能为零', trigger: 'blur'}
<el-form-item label="城镇人口" prop="population.urban" :rules="[{ required: true, message: '城镇人口不能为空', trigger: 'blur' },{pattern:/^[1-9]|([1-9]+(\.[1-9]+)?)$/,message: '城镇人口不能为零', trigger: 'blur'},RegNumber('城镇人口'),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
