element plus el-form自界说验证输入框为纯数字函数

element plus 的el-form 使用自界说验证器，验证纯数字，克制输入小数、中文、字母、特殊符号。input的maxlength为最大输入多少位长度
效果图

1. <el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="120px" :disabled="type==='view'">
2. <el-form-item label="数量上限" prop="replicaLimit">
3.           <el-input v-model.number="dataForm.replicaLimit" placeholder="请输入数量上限" maxlength="5"/>
4.         </el-form-item>
5. </form>
7. // 提交表单数据
8. const dataForm = reactive({
9.   name: '',//组件名称
10.   componentSign: '',//组件标识(主键-只新增，不许修改)
11.   replicaLimit: '',//数量上限
12.   icon: '',//组件图标
13. });
16. //校验纯数字(函数位置放在调用前
17. const validateNumber = (rule: any, value: string, callback: any) => {
18.   const reg = /^[0-9]*$/;//纯数字正则表达式
19.   if (!reg.test(value)) {//!取反 如果不是纯数字
20.     callback(new Error('请输入纯数字'));
21.   } else {
22.     callback();
23.   }
24. }
26. // 定义校验组件
27. const dataRules = ref({
28.   name: [
29.     {required: true, message: '请输入组件名称', trigger: 'blur'}
30.   ],
31.   componentSign: [
32.     {required: true, message: '请输入组件标识', trigger: 'blur'},
33.   ],
34.   replicaLimit: [
35.     {required: true, message: '请输入数量上限', trigger: 'blur'},
36.     { validator: validateNumber, trigger: 'blur' },
37.   ],
38.   icon: [
39.     {required: true, message: '请上传组件图标', trigger: 'blur'},
40.   ],
41. })

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。