vue3表单校验

<template>

    <el-form ref="dom" :model="form" :rules="rules" label-width="80px">

    <el-form-item  prop="name">

   <el-input

          size="large"

          v-model="form.name"

          placeholder="用户名"

          type="text"

          maxlength="50"

        >

          <template #prepend>

            <el-icon><User /></el-icon>

          </template>

        </el-input>

    </el-form-item>

    <el-form-item  prop="password">

        <el-input

          size="large"

          v-model="form.password"

          placeholder="密码"

          type="text"

          maxlength="50"

        >

          <template #prepend>

            <el-icon><Lock /></el-icon>

          </template>

        </el-input>

      </el-form-item>

        <el-button

        @click="submit"

          type="primary"

          >登录</el-button

        >

  </el-form>

</template>

<script>

import { ref, reactive, toRefs } from 'vue'

export default {

    setup() {

      // 表单元素

    const dom = ref(null)

    const data =toRefs(

       reactive({

        form:{

          name: 'admin',

         password: '123456'  

        }  ,

    })  

    )  

// 校验规则

const rules = {

  name: [{ required: true, message: '请输入用户名', trigger: ["blur",'change'] }],

  password: [{ required: true, message: '请输入密码', trigger: ["blur",'change'] }]

}

    const submit = () => {

        // 开始校验

    dom.value.validate(valid => {

    console.log('校验结果', valid)

  })

    }

    return{

        ...data,

        submit,

        rules,

        dom

    }

    }

}

</script>