备注:我写的是判断输入的是否数字或小数,如果只需判断是否是数字可直接复制elementui官网上的案例即可。
1. 一定要写 prop="aa",不然是没效果的。
2. 仿照elementui官网 绑定rules
3. 写校验 (tirgger:"change" 指 输入框内容一变化就启动校验)
源码如下:
//A.vue
<el-form
ref="form"
:inline="true"
:model="equipmentData"
class="formStyle"
:rules="rules"
>
<el-form-item label="液压油流量:" prop="flow" >
<el-input
class="inputButtom"
v-model="equipmentData.flow"
placeholder="请输入...">
</el-input>
</el-form-item>
</el-form>
<script>
data() {
let checkPriceSell = (rule, value, callback) => {
if (value) {
if (!/^\d+(\.\d{1,2})?$/.test(value)) {
callback(new Error("请输入数字!"));
} else {
callback();
}
}
};
return {
rules: {
//验证
flow: [{ validator: checkPriceSell, trigger: ["blur", "change"] }],
},
};
},
</script>
//B.js 文件
checkPriceSell: (rule, value, callback) => {
if (value) {
if (!/^\d+(\.\d{1,2})?$/.test(value)) {
callback(new Error("请输入数字!"));
} else {
callback();
}
}
},
补充:
1. 不能输入空格
<el-input v-model="equipmentData.gasPressure" oninput="value=value.replace(/\s+/g,'')"</el-input>
2. 除 ‘-’,‘_’ ,其余符号禁止输入,以及非空判断
!/^[a-zA-Z0-9_\-]+$/.test(value)
3. 只能是数字、字母和中文组成,不能包含特殊符号和空格
/^[\u4e00-\u9fa5_a-zA-Z0-9]+$/.test(value)
参考文章:【JavaScript基础语法】正则表达式——限制input输入框只能输入字母、数字、字符等_js正则只能输入数字和字母-CSDN博客