validate 注册页的表单数据校验实现详解

更新时间：2022年09月30日 15:53:47 作者：风无雨

这篇文章主要为大家介绍了validate 注册页的表单数据校验实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

1.注册页是什么

当我们使用一个从未使用过的网站时,想要注册账号,点击注册账号时看到的网页就是注册页注册页例子如下:

我们看到以下的注册页中,有两大类信息:

第一大类是用户信息类,

包括用户名,密码和email,他们都有自己的取值规则 ,例如用户名显示不得小于3个字符

第二大类是验证码类,一般有两种,

一种是短信或邮箱验证,这是为了绑定手机号或邮箱,

还有一种就下图中的真人验证,为了避免机器人恶意访问信息量过大,通过验证计算题或者识别字母的方式来确定是真人访问

2.为什么需要注册页

目的:

注册页的目的是让用户注册账号
用户通过账号密码来登录网站
网站记录用户的账户密码,建立一个记录每一个用户信息的数据库

数据校验

用户名和密码都有一定的命名和设定规则
为了避免不符合规则的命名和密码发送到服务器,造成服务器压力过大
我们需要在前端页面对数据进行初筛,符合规则要求的才会被发送到服务器
服务器再进行用户名是否重复的校验

3.注册页如何实现

本次所使用的技术栈:vue2.0,axios,element-ui,vuex,vue-router
需要实现的界面如下:

3.1分析业务需求

1.获取数据: v-model双向绑定三个数据,分别是username.password,repassword
2.校验数据
(1)在data中添加校验规则
(2)在模板中配置规则
(3)处理最终结果
3.发送数据: 通过axios发送数据
4.处理数据: 判断axios返回的code值,来处理数据

初始html模板如下

小贴士:

input框的前置icon图标通过prefix-icon="el-icon-user"实现

如果想要实现点击小眼睛实现密码显示和保密.可以在el-input框便签加上show-password实现

<!-- 注册的表单区域 -->
  <el-form>
    <!-- 用户名 -->
    <el-form-item>
      <el-input placeholder="请输入用户名" prefix-icon="el-icon-user"></el-input>
    </el-form-item>
    <!-- 密码 -->
    <el-form-item>
      <el-input type="password" prefix-icon="el-icon-lock" placeholder="请输入密码"></el-input>
    </el-form-item>
    <!-- 确认密码 -->
    <el-form-item>
      <el-input type="password" prefix-icon="el-icon-lock" placeholder="请再次确认密码"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" class="btn-reg">注册</el-button>
      <el-link type="info" @click="$router.push('/login')">去登录</el-link>
    </el-form-item>
  </el-form>

3.2获取数据 v-model双向绑定

首先在data中定义表单数据对象,包含用户名,密码和第二次密码

 data() {
    return {
      form: {
        username: "",
        password: "",
        repassword: "",
      },
      }

然后在表单的三个input框中使用v-model绑定上面的三个数据

 <!-- 注册的表单区域 -->
      <el-form >
        <el-form-item >
          <el-input
            placeholder="请输入用户名"
            prefix-icon="el-icon-user"
            v-model="form.username"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
            v-model="form.password"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item >
          <el-input
            placeholder="请输入再次确认密码"
            prefix-icon="el-icon-lock"
            v-model="form.repassword"
            show-password
          ></el-input>
        </el-form-item>
      </el-form>

3.3校验数据

首先在data中定义数据校验规则

formRules: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
          {
            pattern: /^[a-zA-Z0-9]{1,10}$/,
            message: "用户名必须是1-10位的字母数字",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          {
            pattern: /^\S{6,15}$/,
            message: "密码必须是6-15位的非空字符",
            trigger: "blur",
          },
        ],
        repassword: [
          { required: true, message: "请再次确认密码", trigger: "blur" },
          {
            pattern: /^\S{6,15}$/,
            message: "密码必须是6-15位的非空字符",
            trigger: "blur",
          },
          // 使用 validator 属性，来应用自定义的校验规则
          {
            validator: (rule, value, callback) => {
              // 形参中的 value 表示被绑定的元素的值
              if (value !== this.form.password) {
                // 校验失败
                callback(new Error("两次密码不一致！"));
              } else {
                // 校验成功
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },

然后对html中的form部分标签中增加内容

在el-form中:model绑定form,:rules绑定formRules,
在el-form-item中prop绑定form中的数据,注意这里不需要写form.username,只需要写username

<!-- 注册的表单区域 -->
      <el-form :model="form" :rules="formRules" ref="formRef">
        <el-form-item prop="username">
          <el-input
            placeholder="请输入用户名"
            prefix-icon="el-icon-user"
            v-model="form.username"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
            v-model="form.password"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item prop="repassword">
          <el-input
            placeholder="请输入再次确认密码"
            prefix-icon="el-icon-lock"
            v-model="form.repassword"
            show-password
          ></el-input>
        </el-form-item>
      </el-form>

3.4method中的发送数据

首先给html中的注册按钮绑定一个点击事件@click='doRegister'

<el-button type="primary" style="width: 100%" @click="doRegister">注册</el-button>

然后在methods里定义事件doRegister:

通过$refs获得表单的dom元素
使用validate对数据进行校验,如果成功发送ajax
这里使用了promise的语法糖async-await,来实现同步的写法实现异步的效果

// 2.方法
  methods: {
    // 2.1注册
    doRegister() {
      // (1).检查表单时是否校验通过
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          // (2).校验通过,发送ajax
          const { data: res } = await this.$axios.post("/api/reg", {
            ...this.form,
          });
        }
      });
    },
  },

3.5处理数据

根据ajax返回的数据中的code来判断,是注册成功还是注册失败

(这里要通过后端提供的接口文档来确定什么code是失败,什么code是成功)
我这里code为0是成功,1是失败

注册成功跳转登录页, this.$router.push("/login");通过路由实现
弹出成功信息框: this.$message.success(res.message);
错误则弹出失败信息框:this.$message.error(res.message)

     // 2.方法
  methods: {
    // 2.1注册
    doRegister() {
      // (1).检查表单时是否校验通过
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          // (2).校验通过,发送ajax
          const { data: res } = await this.$axios.post("/api/reg", {
            ...this.form,
          });
          // (3).处理数据
          if (res.code === 0) {
            // 跳转登录页
            this.$router.push("/login");
            // 弹出信息框
            this.$message.success(res.message);
          } else {
            this.$message.error(res.message);
          }
        }
      });
    },
  },

4总结

业务思路

1.获取数据

2.校验数据

3.发送请求

4.处理响应数据

以上就是validate 注册页的表单数据校验实现详解的详细内容，更多关于validate 注册页表单数据校验的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

vue几个常用跨域处理方式介绍
本篇文章给大家详细介绍了vue跨域处理问题的方式以及相关知识点介绍，对此有兴趣的朋友学习下。
2018-02-02
vue实现div拖拽互换位置
这篇文章主要为大家详细介绍了vue实现div拖拽互换位置的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-12-12
使用Vue实现简易的车牌输入键盘
这篇文章主要为大家详细介绍了如何使用Vue实现简易的车牌输入键盘效果,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以了解下
2023-11-11
Vue中使用debugger在浏览器中不起作用的问题及解决
这篇文章主要介绍了Vue中使用debugger在浏览器中不起作用的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-06-06
简单实现一个vue公式编辑器组件demo
这篇文章主要介绍了轻松实现一个简单的vue公式编辑器组件示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2024-01-01
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
本篇文章主要介绍vue2.0 移动端实现下拉刷新和上拉加载更多的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-04-04
vue3中封装axios请求最新实现步骤
这篇文章主要给大家介绍了关于vue3中封装axios请求的最新实现步骤,在Vue 3中可以通过封装axios来实现接口的统一管理和调用,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-04-04
vue2 webpack proxy与nginx配置方式
这篇文章主要介绍了vue2 webpack proxy与nginx配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
Vue微信小程序和uniapp配置环境地址
在微信小程序中，可以使用全局配置和使用开发、体验、生产环境的地址，这篇文章主要介绍了Vue微信和uniapp配置环境地址,需要的朋友可以参考下
2023-07-07
基于vue-cli3创建libs库的实现方法
这篇文章主要介绍了基于vue-cli3创建libs库的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-12-12