实现表单验证的步骤

表单验证的实现步骤

代码示例

表单代码：

<el-form :model="form" ref="form" :rules="rules" class="form">
    <el-form-item class="form-item" prop="username">
      <el-input
        placeholder="用户名/手机"
        v-model="form.username"
        @focus="hideErrMsg('username')"
      >
      </el-input>
    </el-form-item>

    <el-form-item class="form-item" prop="password">
      <el-input
        placeholder="密码"
        type="password"
        v-model="form.password"
        @focus="hideErrMsg('password')"
      >
      </el-input>
    </el-form-item>

表单验证规则：

 rules: {
        username: [
          {
            //prop：对象的属性也是一个对象而且包含一些属性,配置这些属性就用prop
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
          { min: 11, message: "账号格式错误 tips:不低于11位", trigger: "blur" },
          { max: 11, message: "账号格式错误 tips：最多11位", trigger: "blur" },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur", //blur元素失去焦点时触发的事件
          },
          {
            min: 6,
            message: "密码不能小于6位",
            trigger: "blur",
          },
        ],
      },

通过$refs获取到表单

 methods: {
    async handleLoginSubmit() {
      // 验证表单
      const isValid = await this.$refs.form.validate();
      if (isValid) {
        const res = await login(this.form);

这个写法的前提是封装axios 以及请求

封装代码 ：myaxios.js

import axios from 'axios'
// 配置基准路径
axios.defaults.baseURL = "http://157.122.54.189:9095"
export default axios

封装请求：user.js

import axios from '@/utils/myaxios.js'

export const login = (formData) => {
    return axios({
        url: "/accounts/login",
        method: "post",
        data: formData,
    })
}

注意点：

1、要通过 this.$refs.form.validate()获取到表单
2、通过prop=‘要验证的表单名’绑定验证的rules