Element

2024-07-14 12:47| 来源: 网络整理| 查看: 265

Element-ui 中表单（Form)验证数字值范围（大小）原创

明天也要努力 2021-07-13 15:47:54 ©著作权

文章标签 HTML CSS UI 前端 elementui 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者明天也要努力的原创作品，请联系作者获取转载授权，否则将追究法律责任

方法一: 通过正则表达式实现

提交 export default { data() { return { ruleForm: { money:'', }, rules: { money:[ { required: true, message: '金额不能为空'}, { type: 'number', message: '金额必须为数字值'}, // 且不包括小数 { pattern: /^([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$/, message: '范围在0-255',trigger: 'blur'} /* 范围0-255分析： 0-9： [0-9] 10-99： [1-9]\d 100-199: 1\d\d 200-249: 2[0-4]\d 250-255: 25[0-5] */ ], } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('成功'); } else { return false; } }); }, } }

补充：正则表达式相关知识点

Element-ui 中表单（Form)验证数字值范围（大小）_前端方法二：自定义校验规则

提交 export default { data() { var checkMoney = (rule, value, callback) => { if (!value) { return callback(new Error('金额不能为空')); } setTimeout(() => { if (!Number.isInteger(value)) { callback(new Error('请输入数字值')); } else { if (value < 0) { callback(new Error('范围在0-255')); } else if(value > 255){ callback(new Error('范围在0-255')); }else { callback(); } } }, 100); }; return { ruleForm: { money:'', }, rules: { money:[ { validator: checkMoney, trigger: 'blur' } ], } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('成功'); } else { return false; } }); }, } }

效果 Element-ui 中表单（Form)验证数字值范围（大小）_elementui_02

赞收藏评论分享举报

上一篇：Nodejs 入门基础

下一篇：Vue中实现复制内容到剪贴板（引入使用 vue-clipboard2）

【本文地址】

Element

Element

今日新闻

推荐新闻