Element-ui 中表单(Form)验证数字值范围(大小)
2020-12-13 16:03
1106 查看
方法一: 通过正则表达式实现
<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-< 20000 /span>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>
效果
相关文章推荐
- vue elementUI之Form表单 验证
- vue封装 element-ui form表单验证 正则匹配手机号 自定义校验表格内容
- vue + ElementUI 关闭对话框清空验证,清除form表单
- vue+axios+element-ui实战(五)-- 验证、清除多个form表单
- Vue ElementUI之Form表单验证遇到的问题
- vue + ElementUI 关闭对话框清空验证,清除form表单
- vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
- element-ui 的form表单验证
- vue2.0+Element-ui应用【Form表单 整数验证】
- vue elementui form表单验证的实现
- Vue Elementui Form表单验证
- element-ui:非v-model绑定的自身属性的form表单验证
- vue+element-ui集成随机验证码+用户名+密码的form表单验证
- vue elementUI之Form表单 验证
- vue + ElementUI 关闭对话框清空验证,清除form表单
- elementui el-input输入数字为整数的验证
- 基于vue2.0前端组件库element中 el-form表单 自定义验证填坑
- 二:Vue之ElementUI Form表单校验
- element ui表单验证
- vue+elementUI 复杂表单的验证、数据提交方案问题