vue3 使用element-plus 表单校验

vue3 没有this！vue3 没有this！vue3 没有this！

template

<el-form
  label-position="top"
  ref="loginformRef"
  label-width="100px"
  :model="loginform"
  hide-required-asterisk
>
  <el-form-item
  prop='username'
  label="username"
  :rules="[
      {
        required: true,
        message: 'Please input username',
        trigger: 'blur',
      }
    ]"
  >
    <el-input v-model='loginform.username' placeholder="Please input username" ></el-input>
  </el-form-item>
  <el-form-item
  class="clearfix"
  label="password"
  prop='password'
  :rules="[
      {
        required: true,
        message: 'Please input password',
        trigger: 'blur',
      }
    ]"
  >
    <el-input v-model='loginform.password' show-password placeholder="Please input password"></el-input>
  </el-form-item>
  <el-form-item class="login_btn_box clearfix">
    <el-button @click="login()" class="login_btn" round>Login</el-button>
  </el-form-item>
</el-form>

script

<script setup>
import {reactive,ref} from 'vue';
import {ElMessage} from 'element-plus';

const loginform = reactive({
    username:'',
    password:''
})
const loginformRef = ref(null);

const login = ()=>{
  loginformRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success('login successfully !')
    } else {
      ElMessage.error('error submit !')
      return false
    }
  })
}
</script>