- 限制element-ui表单中input框只能输入中文、数字和英文
- 限制element-ui表单中input框只能输入数字和小数点,并仅保留两位小数
<el-form :model="formInline" :rules="rules" ref="ruleForm">
<el-form-item label="合同编号" prop="contractNo">
<el-input v-model.trim="formInline.contractNo" placeholder="合同编号" maxlength="50" ></el-input>
</el-form-item>
<el-form-item label="合同金额" prop="contractMoney">
<el-input
maxlength="15"
oninput="value=value.replace(/[^\d.]/g,'')"
v-model="formInline.contractMoney"
placeholder="合同金额"
</el-form-item>
</el-form>
data() {
var validatePrice = (rule, value, callback) => {
value = String(value);
if (value && value.split(".").length > 2) {
callback(new Error("请输入正确格式的金额"));
} else if (value && value.split(".").length == 2) {
value = Math.round(value * Math.pow(10, 2)) / Math.pow(10, 2);
value = Number(value).toFixed(2);
this.formInline.contractMoney = value;
callback();
} else {
callback();
}
};
var validateName = (rule, value, callback) => {
const title = /^[\a-\z\A-\Z0-9\u4e00-\u9fe5]+$/;
if (value == "" || value == null || title.test(value)) {
callback();
} else (!title.test(value)) {
callback(new Error("只能输入中文、数字和英文"));
}
};
retrun {
formInline: {
contractNo: null,
contractMoney: null,
}
rules: {
contractNo: [
{
required: true,
validator: validateNo,
message: "请输入正确的合同编号",
trigger: "blur",
},
],
contractMoney: [
{
required: false,
validator: validatePrice,
message: "请输入正确的合同金额",
trigger: "blur",
},
]
}
}
}