登录的表单验证

最新推荐文章于 2024-04-19 11:01:49 发布

Shriley_X

最新推荐文章于 2024-04-19 11:01:49 发布

阅读量3k

点赞数 3

分类专栏： shriley的vue学习文章标签： vue js

本文链接：https://blog.csdn.net/Shriley_X/article/details/109902356

版权

shriley的vue学习专栏收录该内容

0 篇文章 0 订阅

订阅专栏

最近在学习如何使用 VUE 框架编写后台管理系统，首先完成的是登录页面，登录页面中需要给 Form 表单配置登录验证，现总结如下：

参考文档

Element组件库

登录页面中创建组件使用的是 Element 组件库中的Form表单在这里插入图片描述
使用文档：Element中Form表单

该文档中包含表单验证的实现方法教学，本文参考了该篇文档。

完成基本的登录功能后，登录页面如下
在这里插入图片描述

现在开始配置登录验证

验证规则绑定

所有的验证在配置规则前都需要设置下面三步

1. 将 From 组件的 model 绑定表单数据对象

<template>
  <div class="login-container">
    <div class="login-form-wrap">
      <el-form
          class="login-form"
          :model="user"
      >
      </el-form>
     </div>
   </div>
</template>

将需要验证的 Form 表单 el-form 的 model 属性设置为表单传输的数据对象 user

2. 将需验证的表单项的 prop 绑定表单对象中的数据项

<template>
  <div class="login-container">
    <div class="login-form-wrap">
        <el-form>
           <el-form-item prop="mobile">
            <!-- 输入框 input 组件 双向绑定 from 数据 -->
              <el-input
                v-model="user.mobile"
                placeholder="请输入手机号"
              ></el-input>
              </el-form-item>
          <el-form-item prop="code">
            <!-- 输入框 input 组件 双向绑定 from 数据 -->
              <el-input
                v-model="user.code"
                placeholder="请输入验证码"
              ></el-input>
          </el-form-item>
          <el-form-item prop="agree">
            <el-checkbox v-model="user.agree">
              我已阅读并同意用户协议和隐私条款</el-checkbox>
          </el-form-item>
        </el-form>
    </div>
  </div>
</template>

将需要验证的三个el-form-Item 表单项 手机号、验证码和用户协议 的 prop 属性值指定为表单数据对象user中的数据名称 data、code和agree 在这里插入图片描述

3. 将 Form 组件的 rules 绑定验证规则数据

新建数据对象 formRules ，用来配置具体规则

<script>
export default {
  data () {
    return {
      formRules: {}
    }
  }
}
</script>

Element 中的 Form 组件提供了表单验证的功能，只需要通过 rules 属性传入

<template>
  <div class="login-container">
    <div class="login-form-wrap">
      <el-form
        class="login-form"
        :model="user"
        :rules="formRules"
      >
      </el-form>
    </div>
  </div>
</template>

将 Form 组件 el-form 的 rules 属性值设置为 data 中的数据对象 formRules

配置规则

在数据对象 formRules 中配置规则
Element 中约定好了 Form 组件的表单验证规则
使用文档：验证规则

一般规则

上述约定好的规则中部分常用的规则说明如下图：
在这里插入图片描述

required
required 规则用来设置是否为必须的，值为true则必须填写该表单项
message
message 用来设置验证是啊比提示信息，即表单项中的数据不满足验证规则时显示的提示信息
trigger
trigger 用来设置触发验证的时机，属性值有两种

属性值	意义
blur	失去焦点时触发验证
change	表单项数据改变时触发验证

pattern
使用正则表达式配置规则

<script>
export default {
  data () {
    return {
      formRules: {// 要验证的数据名称：规则列表[]
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'change' },
          { pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确的手机号', trigger: 'change' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'change' },
          { pattern: /^\d{6}$/, message: '请输入正确的验证码格式', trigger: 'change' }
        ]
      }
    }
  }
}
</script>

当前设置的 mobile 手机号 的验证规则：

require规则：必须填写，未填写时显示验证失败提示信息：“请输入手机号”
pattern规则：是以1开头第二位是3或5或7或8或9的9位整字，不满足时显示验证失败提示信息：‘请输入正确的手机号’

当前设置的 code 验证码 的验证规则：

require 规则：必须填写，未填写时显示验证失败提示信息：“请输入验证码”
pattern 规则：是6位整数，不满足时显示验证失败提示信息：“输入正确的验证码格式”

自定义规则

Element自身约定好的表单验证规则不满足需要时，可以自定义规则。
自定义验证规则的函数为 validator

参数

validator函数的参数是 rule , value 和 callback ，valid 参数传入验证的数据对象的值。

返回值
validate 函数的返回值通过callback来设置
一般情况下：

验证情况	返回值
通过	callback（）
失败	callback（new Error（‘验证失败提示信息’））

validator 验证函数不是外部调用的，而是当 Element 的 Form 表单组件触发验证时自己内部调用，使用时只需要提供函数处理的逻辑

<script>
export default {
  data () {
    return {
      formRules: {// 要验证的数据名称：规则列表[]
        agree: [
          {
            // 自定义验证规则
            validator: (rule, value, callback) => {
              if (value) {
                // 验证通过
                callback()
              } else {
                // 验证失败
                callback(new Error('请勾选用户协议'))
              }
            },
            trigger: 'change'
          }
        ]
      }
    }
  }
}
</script>

当前设置的 agree 用户协议 的规则：

当 agree = true 即已勾选用户协议时返回 callback() ，验证成功。
当 agree = false 即未勾选用户协议时返回验证失败提示信息：“请勾选用户协议”

手动触发验证

登录页面需要在点击登录按钮时触发验证，通过 Form 组件的 validate() 方法实现
在这里插入图片描述

1.设置 From 组件的 ref

<template>
  <div class="login-container">
    <div class="login-form-wrap">
      <el-form
        class="login-form"
        ref="login-form"
        :model="user"
        :rules="formRules"
      >
      </el-form>
    </div>
  </div>
</template>

给 Form 组件 el-form 设置一个 ref，起一个名字。

调用 validate()

<script>
export default {
    methods: {
        onLogin () {
          // 表单验证
          // validate 方法是异步的
          this.$refs['login-form'].validate(valid => {
            // 如果表单验证失败，停止请求提交
            if (!valid) {
              return
            }

            // 验证通过，提交登录
            this.login()
          })
        }
    }
}
</script>

在登录按钮绑定的方法 onLogin() 中，通过 ref 获取 Form 组件 el-form ，调用 validate() 方法，触发表单验证。

验证失败
退出 onLogin() 方法，不提交登录请求
验证通过
提交登录请求

结果

最终的表单如下：

输入为空

改变了默认页面的数据，触发验证，显示验证的表单项未填写时的验证失败提示信息
输入格式错误

改变了默认页面的数据，触发验证，显示验证的表单项不满足格式时的验证失败提示信息
点击登录按钮
点击登录前的默认页面

点击登录后

点击登录按钮，触发验证。
未勾选用户协议，显示用户协议表单项的数据不满足自定义规则时的验证失败提示信息

上方展示的代码均仅限于实现该步骤的功能的部分，完整代码如下：

<template>
  <!-- 根节点 -->
  <div class="login-container">
    <div class="login-form-wrap">
      <!--
          el-form 表单组件
          每个表单项都必须使用 el-form-item 组件包裹
       -->

      <div class="login-head">
        <h1>登录</h1>
        <!-- <div class="logo"></div> -->
      </div>
      <!--
        配置 Form 表单验证：
        1、必须给 el-from 组件绑定 model 为表单数据对象
        2、给需要验证的表单项 el-form-Item 绑定 prop 属性
            注意prop属性需要制定表单对象中的数据名称
        3、通过 el-form 组件的 rule 属性配置验证规则

        手动触发表单验证：
        1. 给 el=from 设置 ref  （起个名字）
        2. 通过 ref 获取 el-form 组件，调用组件的 validate 方法进行验证
      -->

      <el-form
        class="login-form"
        ref="login-form"
        :model="user"
        :rules="formRules"
      >
        <!-- 提示文本 -->
        <el-form-item prop="mobile">
            <!-- 输入框 input 组件 双向绑定 from 数据 -->
            <el-input
              v-model="user.mobile"
              placeholder="请输入手机号"
            ></el-input>
        </el-form-item>
        <el-form-item prop="code">
            <!-- 输入框 input 组件 双向绑定 from 数据 -->
            <el-input
              v-model="user.code"
              placeholder="请输入验证码"
            ></el-input>
        </el-form-item>
          <el-form-item prop="agree">
            <el-checkbox v-model="user.agree">
              我已阅读并同意用户协议和隐私条款</el-checkbox>
          </el-form-item>
        <el-form-item>
            <el-button
              class="login-btn"
              type="primary"
              :loading="loginLoading"
              @click="onLogin"
            >登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { login } from '@/api/user' // 按需加载

export default {
  name: 'LoginIndex',
  components: {},
  props: {},
  data () {
    return {
      user: {
        mobile: '13911111111', // 手机号
        code: '246810', // 验证码
        agree: false // 是否同意协议
      },
      // checked: false, // 是否同意协议的选中状态
      loginLoading: false, // 登录的 loading 状态
      formRules: { // 表单验证规则配置
        // 要验证的数据名称：规则列表[]
        mobile: [
          // 必填项
          { required: true, message: '请输入手机号', trigger: 'change' },
          { pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确的手机号', trigger: 'change' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'change' },
          { pattern: /^\d{6}$/, message: '请输入正确的验证码格式', trigger: 'change' }
        ],
        agree: [
          {
            // 自定义验证规则
            validator: (rule, value, callback) => {
              if (value) {
                // 验证通过
                callback()
              } else {
                // 验证失败
                callback(new Error('请勾选用户协议'))
              }
            },
            // message: '请勾选同意用户协议',
            trigger: 'change'
          }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    onLogin () {
      // // 获取表单数据(根据接口要求绑定数据)
      // const user = this.user

      // 表单验证
      // validate 方法是异步的
      this.$refs['login-form'].validate(valid => {
        // 如果表单验证失败，停止请求提交
        if (!valid) {
          return
        }

        // 验证通过，提交登录
        this.login()
      })
    },

    login () {
      // 开启登陆中 loading...
      this.loginLoading = true

      login(this.user).then(res => {
        console.log(res) // 提取数据

        // 登录成功
        this.$message({
          message: '登录成功',
          type: 'success'
        })

        // 关闭 loading...
        this.loginLoading = false

        // 将接口返回的用户相关数据存储到本地
        window.localStorage.setItem('user', JSON.stringify(res.data.data))

        // 跳转到首页
        this.$router.push({
          name: 'home'
        })
      }).catch(err => {
        // 登陆失败
        console.log('登录失败', err) // 错误提示
        this.$message.error('登录失败，手机号或验证码错误')

        // 关闭 loading...
        this.loginLoading = false
      })
    }
  }
}
</script>

<style scoped lang="less">
.login-container {
  // 整个页面
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  // form 内容
  display: flex; // 默认水平排列
  flex-direction: column; // 设置上下排列
  // form 水平居中
  justify-content: center;
  // form 垂直居中
  align-items: center;
  // 背景图片
  background: url("./login_bg.jpg") no-repeat;
  background-size: cover;
  .login-form-wrap {
    min-width: 300px;
    padding: 30px 50px 10px;
    background-image: linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
    .login-head {
      display: flex;
      justify-content: center;
      color: #5d8dfd;
      .logo {
        width: 200px;
        height: 57px;
        // background: url("./logo_index.png") no-repeat;
        background-size: contain;
      }
    }
    // form
    .login-form{
      .login-btn{
        width: 100%;
        background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);
        }
    }
  }
}
</style>

该代码包含其他功能的实现，仅供参考。

以上为个人总结的登录的表单验证，如有错误请多包含，欢迎在评论区指出。
也欢迎其他学习VUE的小伙伴在评论区一起交流，祝所有看到这篇博客还看到结尾这里的人都能成为前端大佬！

Shriley_X

关注

3
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
登录的表单验证

最近在学习使用 VUE 框架打造后台管理系统，首先完成的是登录页面，登录页面中需要给 Form 表单配置登录验证，现总结如下：参考文档Element组件库网页前期是使用 Element 组件库中的Form表单创建的组件使用文档网址：Element中Form表单该文档中包含表单验证的实现方法教学，本文参考了该篇文档。完成基本的登录功能后，开始配置登录验证配置一般验证给 From 组件设置 model 绑定表单数据对象<template> <div class="lo
复制链接

扫一扫