element-ui表单想验证一个范围内的数字，type="number"如何配合min和max及非必填项验证
https://segmentfault.com/q/1010000016549539
element-ui表单想验证一个范围内的数字，type="number"如何配合min和max及非必填项验证
- 66
使用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直接的数字，验证通过；
阅读 32.2k
