element-ui表单想验证一个范围内的数字，type="number"如何配合min和max及非必填项验证
https://segmentfault.com/q/1010000016549539

element-ui表单想验证一个范围内的数字，type="number"如何配合min和max及非必填项验证

Link

• 66

发布于 2018-09-28 在线运行地址

尝试在上添加number修饰符，无效

相关代码如下

<template>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
        <el-form-item label="请输入年龄" prop="age">
            <el-input v-model.number="ruleForm.age">el-input>
        el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">创建el-button>
            <el-button @click="resetForm('ruleForm')">重置el-button>
        el-form-item>
    el-form>
template>
<script>
    export default {
        data () {
            return {
                ruleForm: {
                    age: ''
                },
                rules: {
                    age: [
                        { required: false, message: '请输入年龄', trigger: 'blur' },
                        { type: 'number', message: '年龄必须为数字值', trigger: 'blur' },
                        { min: 1, max: 3, message: '长度在 1 到 3 个字符', trigger: 'blur' }
                    ]
                }
            };
        },
        methods: {
            submitForm (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm (formName) {
                this.$refs[formName].resetFields();
            }
        }
    };
script>

实际运行的结果是： 1，不输入任何内容的时候，会提示“年龄必须为数字值”；2，输入数字后又提示“长度在 1 到 3 个字符”，期待的结果是：1，不输入任何内容的时候，不做验证；2，输入1-3直接的数字，验证通过；

相关demo在线运行地址

vue.jselement-ui回复阅读 32.2k 如果对你有帮助，记得点赞支持

2 个回答得票最新voggen

• 1.2k

发布于 2018-09-28 ? 已被采纳回复如果对你有帮助，记得点赞支持Link：

感谢回答！这样也可以，就我写的那种方式有什么不对么？

回复2018-09-28 voggen：

可能不能连用

回复2018-09-28 不正经的大叔

• 1

发布于 2019-04-26 新手上路，请多包涵回复如果对你有帮助，记得点赞支持撰写回答

你尚未登录，登录后可以

• 和开发者交流问题的细节
• 关注并接收问题和回答的更新提醒
• 参与内容的编辑和改进，让解决方法与时俱进

注册登录相似问题

• <input type="number"/> ?

  项目中因为添加了全局样式箭头被移除了 {代码...} 但是在某个地方还需要这个箭头，在不改变全局样式的情况下，输入 {代码...} 但是却没有效果。是normal值不对吗，还是因为什么?

  1 回答2.3k 阅读? 已解决

• input type="number" maxlength 属性无效

  input 输入框 type="number" 情况下 maxlength 属性无效请问有什么好的解决方法吗？现在必须要使用 type = "number"谢谢各位大神

  4 回答9k 阅读

• value = ''，清除不了input type="number"、type="password"问题

  当input type="number"的value=0时，执行value = ''，0不会清除！？ 逻辑应该没有问题，其他数字都可以清空，我就想是不是''不是number所以有问题 项目用了react {代码...}

  8 回答6.5k 阅读

• input type="number" 在ios下显示问题

  在ios端，input type="number"上边框有黑色区域（已在图中用红色线条圈中）， Android无此问题 {代码...} {代码...} css代码：

  1 回答3.8k 阅读? 已解决

• ios端的输入框input type="number"无效

  ios端的输入框限制数字输入无效，在真机上还是能输入字符，请问有解决的办法吗，要能输入数字和小数点。谢谢

  2 回答8k 阅读

• iView配合async-validator，number，float，integer等验证数字的规则都验证不了。

  其他的规则就没问题。网上有方法说是v-model的问题，写成v-model.number就行；但是我加了.model就直接发送不了数据。请问有其他解决方法吗？

  1 回答4.8k 阅读

• 在移动端input type="number" 键盘没法弹起

  在移动端有没遇到过input type="number" 键盘没法弹起的情况吗？ {代码...}

  6 回答2.8k 阅读

• input type="number"里面的value怎么限制数字大小

  比如: {代码...} 我希望value不能超过5,应该怎么控制.文档给出max属性,但是并没什么用~

  3 回答17.1k 阅读

找不到问题？创建新问题

宣传栏带你从零到一全面掌握前端「新宠」
TypeScript从入门到实践「2020 版」 自顶向下学 React 源码
从理念到架构到实现到代码，透彻理解 Node.js高级实战·带你搭建动漫网站
紧贴业务，扩大前端职能，顺利迈入全栈