vue 文本框输入数字校验
以输入年龄为例:代码如下:<template><div><el-form :model="form" :rules="rules" ref="form" label-width="120px"><el-form-item :label="$t('form.Age')" prop='age...
·
以输入年龄为例:
代码如下:
<template>
<div>
<el-form :model="form" :rules="rules" ref="form" label-width="120px">
<el-form-item :label="$t('form.Age')" prop='age'>
<el-input type="age" v-model.number="form.age"
placeholder="年龄"></el-input>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
let validateAge = (rule, value, callback) => {
if (!value) {
return callback(new Error('请输入年龄'));
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('请输入数字'));
} else {
if (!(0 < parseInt(value) && parseInt(value) < 100)) {
callback(new Error('年龄必须介于1至99之间'));
} else {
callback();
}
}
}, 1000);
};
return {
form: {
age: undefined
},
rules: {
age: [
{ required: true, validator: validateAge, trigger: 'blur' }
]
}
}
},
methods: {
//表单中提交验证
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
//表单验证通过
} else {
return false;
}
});
},
// 重置按钮
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
更多推荐
已为社区贡献16条内容
所有评论(0)