0-100的数字,保留两位小数
方案一
校验提示
const numberCheck= (rule, value, callback) => {
const checkReg = /^(((\d|[1-9]\d)(\.\d{1,2})?)|100|100.0|100.00)$/;
if (checkReg.test(value)) {
callback();
} else {
callback(new Error("0-100的数字,仅支持两位小数点"));
}
};
完整代码:
<div id="app">
<el-form :model="form_01" :rules="rule_01" size="mini" label-width="200px">
<el-form-item label="0-100(可保留两位小数)" prop="number">
<el-input v-model="form_01.number"></el-input>
</el-form-item>
</el-form>
</div>
<script>
const numberCheck_01 = (rule, value, callback) => {
const checkReg = /^(((\d|[1-9]\d)(\.\d{1,2})?)|100|100.0|100.00)$/;
if (checkReg.test(value)) {
callback();
} else {
callback(new Error("0-100的数字,仅支持两位小数点"));
}
};
new Vue(
{
el: "#app",
data() {
return {
form_01: {
number: null,
},
rule_01: {
number: [
{ required: true, message: "不可为空", trigger: "change" },
{ validator: numberCheck_01, trigger: ["blur", "change"] }
]
}
}
}
}
)
</script>
方案二
**不符合规则输入框禁止输入 **https://code.juejin.cn/pen/7273755492768284709
<div id="app">
<div class="item">
<label>
0-100可保留两位小数(输入时限制,不符合规则禁止输入)
</label>
<el-input size="mini" :value="form_01.number_02" @input="form_01_number_02_input">
</el-input>
</div>
</div>
<script>
new Vue(
{
el: "#app",
data() {
return {
form_01: {
number_02: null,
}
}
},
methods: {
form_01_number_02_input(value) {
if (+value >= 100) {
this.form_01.number_02 = 100;
return;
}
this.form_01.number_02 = value
.replace(/^\D*(\d*\.?\d{0,2})?.*$/, "$1")
.replace(/^(\d{0,2})?\d*$/, "$1");
}
}
}
)
</script>
<style lang="less">
#app {
.item {
display: flex;
margin-bottom: 50px;
>label {
text-align: right;
vertical-align: middle;
float: left;
font-size: 14px;
color: #606266;
line-height: 40px;
padding: 0 12px 0 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
white-space: nowrap;
}
}
}
</style>
0-100的数字(整数)
const numberCheck= (rule, value, callback) => {
const testReg = /^(?:[1-9]?\d|100)$/;
if (testReg.test(value)) {
callback();
} else {
callback(new Error("0-100的数字"));
}
};
scoreWeight: [
{ required: true, message: "请输入分数", trigger: ["blur", "change"] },
{validator: numberCheck,trigger: ["blur", "change"]}
]
仅允许输入数字不限制数字的大小
写法(一)
<el-input type="text" onkeyup="value=value.replace(/[^\d]/g,'')"
size="small" width="50" placeholder="请输入数字">
写法(二)
<el-input
size="mini"
:value="frequency"
@input="value => {
this.frequency= value.replace(/^(\d*)\D$/,'$1')
}"
></el-input>
仅输入数字,包含小数点
<el-input type="text" onkeyup="value=value.replace(/[^\d\.]/g, '')
.replace(/^\./g, '')
.replace(/\.{2,}/g, '.')
.replace('.', '$#$')
.replace(/\./g, '')
.replace('$#$', '.')"
size="small" width="50" placeholder="请输入数字">
保留两位小数,不限制大小
方案(一)
.replace(/[^\-\d{1,}.\d{1,}|\-\d{1,}]/g, "")
.replace(".", "$#$")
.replace(/\./g, "")
.replace("$#$", ".")
.replace(/^(-)*(\d+)\.(\d\d).*$/, "$1$2.$3");
方案(二)
<el-input
:value="score"
size="mini"
placeholder="请输入分数"
@input="value => {
this.score = value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/, '$1');
}"
></el-input>
大于0 的数字,可包含两位小数
onkeyup="value=value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/, "$1");
<el-input
:value="score"
size="mini"
placeholder="请输入分数"
@input="value => {
this.score = value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/, '$1');
}"
></el-input>
手机号校验
const checkMobile = (rule, value, cb) => {
const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
if (regMobile.test(value)) {
// 合法的手机号码
return cb();
}
cb(new Error("手机号码格式不正确"));
};
phoneCode: [
{ required: true, message: "手机号不能为空", trigger: "blur" },
{ validator: checkMobile, trigger: ["blur", "change"] }
]
邮箱的校验
const checkEmail = (rule, value, callback) => {
const mailReg = /([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
if (!value) {
return callback(new Error('邮箱不能为空'))
}
if (mailReg.test(value)) {
callback()
} else {
callback(new Error('请输入正确的邮箱格式'))
}
};
QQ校验
<template>
<el-form size="mini" ref="form" :model="form" :rules="rules" label-width="60px">
<el-form-item label="QQ" prop="qq">
<el-input v-model="form.qq"></el-input>
</el-form-item>
</el-form>
</template>
<script>
const checkQq = (rule, value, cb) => {
const regQQ = /^[1-9][0-9]{4,9}$/;
if (!value) {
return callback(new Error("qq不可为空"));
}
if (regQQ.test(value)) {
// 合法的手机号码
return cb();
}
cb(new Error("qq格式不正确"));
};
export default {
name: "form",
data() {
return {
form: {
qq: ""
},
rules: {
qq: [
{ required: true, message: "qq不可为空", trigger: "blur" },
{ validator: checkQq, trigger: ["blur", "change"] }
]
}
};
}
</script>
————————————————
版权声明:本文为CSDN博主「好喝的西北风」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_43340372/article/details/122584878
网友评论