前端学习日记---表单提交校验功能的实现

基于Element-Plus插件实现

首先需要去官网配置“按需导入”功能

网址为：A Vue 3 UI Framework | Element Plus (element-plus.org)

基础表单校验

提交界面：

操作如下

示例：（注意下方针对agree配置的rule是自定义规则，）

import { ref } from 'vue'
// 表单数据对象
const userInfo = ref({
  account: '1311111111',
  password: '123456',
  agree: true
})

// 规则数据对象
const rules = {
  account: [
    { required: true, message: '用户名不能为空' }
  ],
  password: [
    { required: true, message: '密码不能为空' },
    { min: 6, max: 24, message: '密码长度要求6-14个字符' }
  ],
  agree: [
    {
      validator: (rule, val, callback) => {
        return val ? callback() : new Error('请先同意协议')
      }
    }
  ]
}

html代码如下

<div class="form">
        //第一步，在el-form上绑定表单（:model），绑定规则(:rules)
      <el-form ref="formRef" :model="userInfo" :rules="rules" status-icon>
        //第二步，在form-item上绑定规则(prop)
        <el-form-item prop="account" label="账户">
        //第三步，在输入框中实现双向绑定(用v-model)
          <el-input v-model="userInfo.account" />
        (下面如：上方的二、三步骤相同)
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input v-model="userInfo.password" />
        </el-form-item>
        <el-form-item prop="agree" label-width="22px">
          <el-checkbox v-model="userInfo.agree" size="large">
            我已同意隐私条款和服务条款
          </el-checkbox>
        </el-form-item>
        <el-button size="large" class="subBtn" >点击登录</el-button>
      </el-form>
    </div>

注意为防止用户一开始就点击提交按钮，必须对按钮设置事件监听（作提交统一校验），监听上方表单内容是否符合规则

代码如下：

//获取表单组件实例 此处后续需用ref绑定el-form组件（上方的html代码未对el-form进行绑定）
const formRef = ref(null);

//此处为点击提交按钮后对应的事件操作
const submitForm=()=>{

//调用实例方法 （）
formRef.value.validate((valid) => {
  //valid：表单中的所有项都通过校验，才为true
  if (valid) {
    //vaild为true则跳转到首页
  router.push('/')
  ElMessage.success('登录成功')
  }
  else {
    ElMessage.error('登录失败')
  }
})

}

以上即可基本完成对应表单提交的内容校验功能