Vue2黑马人力资源项目1（表单校验）

weixin_63298649

已于 2024-05-01 14:39:59 修改

阅读量390

点赞数 3

CC 4.0 BY-SA版权

文章标签：前端 java javascript

于 2024-04-30 15:49:02 首次发布

本文链接：https://blog.csdn.net/weixin_63298649/article/details/138248318

文章讲述了在Vue.js项目中如何使用el-form组件进行表单验证，包括prop和v-model的区别、设置必填和格式校验规则，以及自定义验证逻辑。还介绍了数据持久化和使用Vuex进行状态管理的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用模板中的icon图标

 <div class="dashboard-text">name: {{ name }}</div>
    <!--使用图标组件 <svg-icon />，已经全局注册过-->
    <!--设置iconClass属性=“文件名（没有后缀）”,去icons文件夹下找-->

    <svg-icon icon-class="example" />
  </div>

给表单增加验证

1.给form表单添加rules验证 ref属性 model双向绑定

 <!--给form表单添加验证 ref属性 model双向绑定-->
        <el-form ref="form" :rules="loginRules" :model="loginForm">

script代码

export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        mobile: '',
        password: '',
        isAgree: false
      },

      loginRules: {
        mobile: [
          {
            // 必填校验
            required: true,
            message: 'must input'
          },
          {
            // 格式校验
            pattern: /^1[3-9]\d{9}$/,
            message: '格式不对',
            // 触发校验方式
            trigger: 'blur'

          }
        ],
        password: [],
        isAgree: []
      }

    }
    // rules与model数据的区别是：rules是数组，因为有很多条数据
  }
}

表单代码：

在这段Vue.js代码中，`prop`和`v-model`是两个不同的概念，它们共同工作实现表单输入的功能。

- `prop`：在Vue.js中，`prop`是组件的一个属性，它用于定义组件可以接受的来自父组件的数据。在这个例子中，`prop="mobile"`表明`<el-form-item>`组件期望接收一个名为`mobile`的数据属性。

- `v-model`：这是一个Vue.js的双向绑定指令，它用于在表单控件和数据模型之间同步数据。在这个例子中，`v-model="loginForm.mobile"`将输入框与`loginForm`对象中的`mobile`属性建立了双向绑定关系。这意味着输入框中输入的任何内容都会实时更新到`loginForm.mobile`属性中，而`loginForm.mobile`属性的变化也会即时反映到输入框中。

总的来说，`prop`用于组件之间的数据传递，而`v-model`用于实现表单控件与数据模型之间的双向绑定。这两个概念虽然不同，但在Vue.js中经常一起使用，以实现复杂的表单交互功能

<el-form-item prop="mobile">
            <el-input v-model="loginForm.mobile" placeholder="please input usernames" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" placeholder="please input password" />
          </el-form-item>
          <el-form-item prop="isAgree">
            <el-checkbox>using accord</el-checkbox>
          </el-form-item>
          <el-button v-model="loginForm.isAgree" style="width: 350px" type="primary" block>login</el-button>
          <el-form-item />

设置账号和密码的校验规则

密码还加了show-password

<el-input v-model="loginForm.password" placeholder="please input password" show-password />

 mobile: [
          {
            // 必填校验
            required: true,
            message: 'must input',
            trigger: 'blur'
          },
          {
            // 格式校验
            pattern: /^1[3-9]\d{9}$/,
            message: '格式不对',
            // 触发校验方式
            trigger: 'blur'
          }
        ],
        password: [{
          required: true,
          message: 'must input',
          trigger: 'blur'
        },
        {
          min: 6,
          max: 16,
          message: '长度6-16',
          trigger: 'blur'

        }
        ],

设置用户是否勾选的自定义校验

绑定之后设置检验

<el-form-item prop="isAgree">
            <el-checkbox v-model="loginForm.isAgree">using accord</el-checkbox>
          </el-form-item>

isAgree: [
          // 这里需要使用自定义验证validator
          // 不用required是因为它只能检测 null undefined  ""
          {
            validator: (rule, value, callback) => {
              // rule校验规则
              // value校验的值
              // callback函数-promise resolve reject
              // calback() callback(new Error('需要勾选'))
              value ? callback() : callback(new Error('需要勾选'))
            }
          }

给登录按钮注册点击事件，对表单进行整体校验

通过ref获取from表单元素，调用已有的validate方法，对整个表单进行校验

          <el-button style="width: 350px" type="primary" block @click="login">login</el-button>

  methods: {
    login() {
      // 通过ref获取from表单元素，调用已有的validate方法，对整个表单进行校验
      this.$refs.form.validate((isOk) => {
        if (isOk) {
          alert('快速通过')
        }
      }

      )
    }
  }

总结

点击按钮调用actinons里的方法，同时传递数据，返回token，提交给mutations，mutations调用方法，将token存给state

//user.js

const state = {
  token: null
}
// 用来修改数据,要修改state里的数据，必须通过mutations
const mutations = {
  setToken(state, token) {
    state.token = token
  }
}
// 用来存放异步数据
const actions = {
  // context上下文，传入参数
  login(context, data) {
    console.log(data)
    // 提交mutations里的数据，调用context里的默认方法
    context.commit('setToken', '123456')
  }
}

index.vue

data() {
    return {
      loginForm: {
        mobile: '',
        password: '',
        isAgree: false
      },

      loginRules: {
        mobile: [
          {
            // 必填校验
            required: true,
            message: 'must input',
            trigger: 'blur'
          },
          {
            // 格式校验
            pattern: /^1[3-9]\d{9}$/,
            message: '格式不对',
            // 触发校验方式
            trigger: 'blur'
          }
        ],
        password: [{
          required: true,
          message: 'must input',
          trigger: 'blur'
        },
        {
          min: 6,
          max: 16,
          message: '长度6-16',
          trigger: 'blur'
        }
        ],
        isAgree: [
          // 这里需要使用自定义验证validator
          // 不用required是因为它只能检测 null undefined  ""
          {
            validator: (rule, value, callback) => {
              // rule校验规则
              // value校验的值
              // callback函数-promise resolve reject
              // calback() callback(new Error('需要勾选'))
              value ? callback() : callback(new Error('需要勾选'))
            }
          }
        ]
      }

    }
    // rules与model数据的区别是：rules是数组，因为有很多条数据
  },
  methods: {
    login() {
      // 通过ref获取from表单元素，调用已有的validate方法，对整个表单进行校验
      this.$refs.form.validate((isOk) => {
        if (isOk) {
          alert('快速通过')
          // 调用user.js里的actions里的异步方法login
          this.$store.dispatch('user/login', this.loginForm)
        }
      }

      )

数据持久化

调用user.js里的actions里的异步方法login

usr.js

// vuex的用户模块
// 按照需要从根据模块导入，以实现存储
import { getToken, setToken, removeToken } from '@/utils/auth'
// 用来存放数据
const state = {
  token: getToken()// 调用加括号,从缓存中读取初始值
}
// 用来修改数据,要修改state里的数据，必须通过mutations
const mutations = {
  setToken(state, token) {
    state.token = token
    // 同步到缓存
    setToken(token)
  },
  removeToken() {
    // 删除vuex的token
    state.token = null
    removeToken()
  }
}

inddex.vue

 methods: {
    login() {
      // 通过ref获取from表单元素，调用已有的validate方法，对整个表单进行校验
      this.$refs.form.validate((isOk) => {
        if (isOk) {
          alert('快速通过')
          // 调用user.js里的actions里的异步方法login
          this.$store.dispatch('user/login', this.loginForm)
        }
      }

      )
    }
  }