方法一: 通过正则表达式实现
<template> <div> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label
-width="100px" class="demo-ruleForm"> <el-row> <el-col :span="6"> <el-form-item
label="金额" prop="money"> <el-input v-model.number="ruleForm.money"></el-input> <
/el-form-item> </el-col> </el-row> <el-row> <el-col :span="6" style=
"text-align:center"> <el-form-item> <el-button type="primary" @click=
"submitForm('ruleForm')">提交</el-button> </el-form-item> </el-col> </el-row> </el
-form> </div> </template> <script> 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;
} }); }, } } </script>
补充:正则表达式相关知识点

方法二:自定义校验规则
<template> <div> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label
-width="100px" class="demo-ruleForm"> <el-row> <el-col :span="6"> <el-form-item
label="金额" prop="money"> <el-input v-model.number="ruleForm.money"></el-input> <
/el-form-item> </el-col> </el-row> <el-row> <el-col :span="6" style=
"text-align:center"> <el-form-item> <el-button type="primary" @click=
"submitForm('ruleForm')">提交</el-button> </el-form-item> </el-col> </el-row> </el
-form> </div> </template> <script> 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;
} }); }, } } </script>
效果

技术
©2019-2020 Toolsou All rights reserved,
Java开发2020年最新常见面试题整理【Spring源码分析】42-@Conditional详解element-ui踩坑记录神仙面试宝典你有了吗?半月看完25大专题,居然斩获阿里P8offer使用css样式设计一个简单的html登陆界面XCTF攻防世界web新手练习_ 9_command_executionJS中的解构赋值的详解与具体用途Python Web 框架elementui 穿梭框 el-transfer 展示列表内容文字过长ConcurrentHashMap实现原理及源码解析