el-form表单数值位数验证规则rules
在 Element UI 的 el-form 组件中,你可以使用 rules 属性来定义表单字段的验证规则。如果你想要验证某个字段的数值位数,你可以使用正则表达式来达到这个目的。
以下是一个示例,展示了如何验证一个数字字段是否只包含两位数:
vue
<template>
<el-form :model="form" :rules="rules" ref="form">
<el-form-item label="两位数字" prop="number">
<el-input v-model="form.number"></el-input>
</el-form-item>
<el-button type="primary" @click="submitForm('form')">提交</el-button>
</el-form>
</template>
<script>
export default {
data() {
var validateNumber = (rule, value, callback) => {
if (!value || !/\d{2}/.test(value)) {
callback(new Error('请输入两位数字'));
} else {
callback();
}
};
return {
html表单只能输入数字
form: {
number: '',
},
rules: {
number: [
{ validator: validateNumber, trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('提交成功!');
} else {
console.log('error submit!!');
return false;
}
});
}
}
};
</script>
在上面的代码中,我们定义了一个 validateNumber 的验证函数,它会检查输入的值是否只包含两位数字。如果输入不满足条件,它将返回一个错误消息。然后,我们将这个验证函数绑定到 number 字段上,并设置触发规则为 'blur',这意味着当用户离开该字段时,验证将自动触发。最后,在提交表单时,我们将调用 validate 方法来确保所有字段都满足其验证规则。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。