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>