以输入年龄为例:

代码如下: 

<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>

 

Logo

前往低代码交流专区

更多推荐