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

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

【Vue】element-ui表单想验证一个范围内的数字，type=

尝试在<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)
            }
          }]
        }

以上是 【Vue】element-ui表单想验证一个范围内的数字，type="number"如何配合min和max及非必填项验证 的全部内容， 来源链接： utcz.com/a/76982.html

回到顶部