H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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

使用ELement-ui的表单时候,想验证数字类型,在验证规则里写了type=”number”后,无效果,在线运行地址

图片描述

尝试在<el-input v-model.number=”ruleForm.age”></el-input>上添加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在线运行地址

回答:

换正则试试

 { pattern:/^\d{1,3}$/, message: '长度在 1 到 3 个字符', trigger: 'blur' }

回答:

 rules: {
          averageCaseRunTime: [{
            type: 'number',
            trigger: 'blur',
            required: false,
            message: '平均用例运行时长必须为数字值',
            
            // 解决方案:在rules 中验证这个功能的时候,对填写的数值进行判断
            transform (value) {
              return _.toNumber(value)
            }
          }]
        }

本文地址:H5W3 » element-ui表单想验证一个范围内的数字,type="number"如何配合min和max及非必填项验证

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址