element plus input验证

<template>
  <el-form
    ref="formRef"
    :model="numberValidateForm"
    label-width="100px"
    class="demo-ruleForm"
    :rules="rules"
  >
    <el-form-item
      label="age"
      prop="age"
    >
      <el-input
        v-model.number="numberValidateForm.age"
        type="text"
        autocomplete="off"
      />
    </el-form-item>
  </el-form>
</template>


<script>
import { reactive, ref } from 'vue'
export default {
  setup() {
    const rules = reactive({
      age: [
        { required: true, message: 'age is required' },
        { type: 'number', message: 'age must be a number' },
      ]
    })


    const numberValidateForm = reactive({
      age: '',
    })


    return{rules, numberValidateForm}
  }
}


</script>