element plus el-form自界说验证输入框为纯数字函数
element plus 的el-form 使用自界说验证器，验证纯数字，克制输入小数、中文、字母、特殊符号。input的maxlength为最大输入多少位长度效果图
https://i-blog.csdnimg.cn/direct/de9dcf1682e84837b7e019bb5f30162c.png
https://i-blog.csdnimg.cn/direct/70eecc4faf6b441c8a63f998919b7eca.png
https://i-blog.csdnimg.cn/direct/8a7f30cd9d9c463f884e1a58f9ca53c5.png
<el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="120px" :disabled="type==='view'">
<el-form-item label="数量上限" prop="replicaLimit">
<el-input v-model.number="dataForm.replicaLimit" placeholder="请输入数量上限" maxlength="5"/>
</el-form-item>
</form>
// 提交表单数据
const dataForm = reactive({
name: '',//组件名称
componentSign: '',//组件标识(主键-只新增，不许修改)
replicaLimit: '',//数量上限
icon: '',//组件图标
});
//校验纯数字(函数位置放在调用前
const validateNumber = (rule: any, value: string, callback: any) => {
const reg = /^*$/;//纯数字正则表达式
if (!reg.test(value)) {//!取反 如果不是纯数字
callback(new Error('请输入纯数字'));
} else {
callback();
}
}
// 定义校验组件
const dataRules = ref({
name: [
{required: true, message: '请输入组件名称', trigger: 'blur'}
],
componentSign: [
{required: true, message: '请输入组件标识', trigger: 'blur'},
],
replicaLimit: [
{required: true, message: '请输入数量上限', trigger: 'blur'},
{ validator: validateNumber, trigger: 'blur' },
],
icon: [
{required: true, message: '请上传组件图标', trigger: 'blur'},
],
})
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]