vue 输入框没输入的校验怎么做?elementui上面有,但是没搞明白
2条回答 默认 最新
- 前端互助会 2022-01-20 08:48关注
element-ui Form表单验证
element-ui Form表单验证规则全解
element的form表单非常好用,自带了验证规则,用起来很方便,官网给的案例对于一些普通场景完全没问题,不过一些复杂场景的验证还得自己多看文档摸索,自己经过数次爬坑
1、普通输入验证<el-form-item label="活动名称" prop="name"> <!-- validate-event属性的作用是: 输入时不触发表单验证.提交时再验证,你也可以设置成动态验证 --> <el-input v-model="registData.name" :validate-event="false"></el-input> </el-form-item> rules: { // 表单验证规则 name: [ { required: true, message: '请输入活动名称' }, // 'blur'是鼠标失去焦点的时候会触发验证 { min: 3, max: 5, message: '长度在 3 到 5 个字符' } ] }
2、 数字类型验证
<el-form-item label="区域面积" prop="area"> <!-- 输入的类型为Number时,需要加一个数字转换的修饰符,输入框默认的类型是String类型,但是我试了一下,发现并不能做验证,所以自己写了函数方法验证 --> <!-- <el-input v-model.number="registData.area" autocomplete="off"></el-input> --> <!-- keyup是鼠标弹起事件, autocomplete是input自带的原生属性,自动补全功能,on为开启,off为关闭 --> <el-input v-model="registData.area" @keyup.native="InputNumber('area')" autocomplete="off"></el-input> </el-form-item> area: [ // 数字类型 'number', 整数: 'integer', 浮点数: 'float' // {type: 'number', message: '请输入数字类型', trigger: 'blur'}, // {type: 'integer', message: '请输入数字类型', trigger: 'change'}, // 'change'是表单的值改变的时候会触发验证 {required: true, message: '请输入区域面积', trigger: 'blur'} ], // 自己写的正则验证,限制用户输入数字以外的字符 // 过滤输入的金额 InputNumber (property) { this.registData[property] = this.limitInputPointNumber(this.registData[property]) }, // 验证只能输入数字 limitInputNumber (val) { if (val) { return String(val).replace(/\D/g, '') } return val }, // 限制只能输入数字(可以输入两位小数) limitInputPointNumber (val) { if (val === 0 || val === '0' || val === '') { return '' } else { let value = null value = String(val).replace(/[^\d.]/g, '') // 清除“数字”和“.”以外的字符 value = value.replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的 value = value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.') value = value.replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3') // 只能输入两个小数 return Number(value) } },
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 如何实验stm32主通道和互补通道独立输出
- ¥30 这是哪个作者做的宝宝起名网站
- ¥60 版本过低apk如何修改可以兼容新的安卓系统
- ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
- ¥50 有数据,怎么建立模型求影响全要素生产率的因素
- ¥50 有数据,怎么用matlab求全要素生产率
- ¥15 TI的insta-spin例程
- ¥15 完成下列问题完成下列问题
- ¥15 C#算法问题, 不知道怎么处理这个数据的转换
- ¥15 YoloV5 第三方库的版本对照问题