实现思路：适用于正则使用不6的童鞋~比如我，此函数使用校验正整数正则，split拆分校验含有小数位正则进行判断。
引用线上vue，可以直接粘贴代码查看效果
1：用于校验2-4位小数位验证和校验正整数验证；
2：小数位前面的正整数长度可输入控制；
3：校验正整数长度可以输入控制
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript">
</script>
<style type="text/css">
span{
text-align: right;
width: 7rem;
display: inline-block;
font-size: 12px;
}
</style>
</head>
<body>
<div class="container" id="app">
<div>
<span>
正整数最大长度
</span>
<input type="text" v-model="maxLength" placeholder="请输入限制最大长度">
</div>
<div>
<span>
请输入需要检查数据
</span>
<input type="text" v-model="inputVal" placeholder="请输入检查数据">
</div>
<div>
<span v-if="inputVal.indexOf('.')!=-1">
小数位长度
</span>
<span style=" width: 15rem;color:red;" v-if="inputVal.indexOf('.')==-1">
小数位长度只有测试数据输入小数点才会显示
</span>
<input v-if="inputVal.indexOf('.')!=-1" type="text" v-model="severalDecimalPlaces" placeholder="请输入限制小数位">
</div>
<input type="button" @click="ckVal" value="检查是否符合">
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
inputVal: '',
severalDecimalPlaces:null,
maxLength:null,
decimalInteger: {
fieldName: "", //字段名称
inputVal: '', //校验数据
maxLength: null, //最大长度
severalDecimalPlaces: null, //保留小数位
}
},
methods: {
// 测试
ckVal: function () {
this.decimalInteger.inputVal = this.inputVal;
this.decimalInteger.maxLength = this.maxLength;
this.decimalInteger.severalDecimalPlaces = this.severalDecimalPlaces;
this.decimalInteger.fieldName = '测试数据 ';
if(!this.decimalInteger.maxLength){
alert("请输入最大长度")
return false
}
if(this.inputVal.indexOf(".") != -1 && !this.severalDecimalPlaces){
alert("请输入小数位")
return false
}
this.handelDecimalInteger(this.decimalInteger);
},
/*
首先判断是多少位的正整数
!取反，不是正整数提示
(true)是正整数判断长度
*/
handelDecimalInteger: function (param) {
var regInteger = /(^[1-9]\d*$)/;// 正整数 正则
var val = param.inputVal //数据
var maxLength = param.maxLength //最大长度
var fieldName = param.fieldName //字段名称
var severalDecimalPlaces = param.severalDecimalPlaces //小数点后的位数
if(val){
// 判断是否包含小数点
if (val.indexOf(".") != -1) { //包含小数点
var valSp = val.split(".") // 切割小数点前后
if (!regInteger.test(valSp[0]) || !regInteger.test(valSp[1])) { // 小数点 前后 都不是小数
return alert(fieldName+"请输入"+maxLength+"位以内的正整数，不包含"+severalDecimalPlaces+"位小数")
}
if (regInteger.test(valSp[0]) && regInteger.test(valSp[1])) { // 小数点 前和后 是小数
if(valSp[0].length > maxLength || valSp[1].length > severalDecimalPlaces){
return alert(fieldName+"小数点前请输入"+maxLength+"位以内的正整数，" +"小数点后请保留"+severalDecimalPlaces+"位小数")
}
}
}
//不含小数并且是正整数
if (val.indexOf(".") == -1 ) {
if (val.length > maxLength || !regInteger.test(val)) { // 并且判断长度
return alert(fieldName + "请输入" + maxLength + "位以内的正整数")
}
}
return alert("校验通过！")
}
return alert("测试数据不能为空！")
}
}
});
</script>
</body>
</html>
版权声明：本文为weixin_40394560原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。