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 { | |
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小时内删除。
发表评论