iis服务器助手广告广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >validate 注册页的表单数据校验实现详解
  • 253

0
分享到

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

2024-04-02 19:04:59 253人浏览 八月长安
摘要

目录1.注册页是什么2.为什么需要注册页3.注册页如何实现3.1分析业务需求3.2获取数据 v-model双向绑定3.3校验数据3.4method中的发送数据3.5处理数据4总结1.

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 注册页表单数据校验的资料请关注编程网其它相关文章！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: validate 注册页的表单数据校验实现详解

本文链接: https://www.lsjlt.com/news/168802.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • validate 注册页的表单数据校验实现详解
    目录1.注册页是什么2.为什么需要注册页3.注册页如何实现3.1分析业务需求3.2获取数据 v-model双向绑定3.3校验数据3.4method中的发送数据3.5处理数据4总结1....
    99+
    2024-04-02
  • JS实现注册界面表单校验
    本文实例为大家分享了JS实现注册界面表单校验的具体代码，供大家参考，具体内容如下 设计效果： 源码： <!DOCTYPE html> <html>     ...
    99+
    2024-04-02
  • JavaScript中如何完成注册页面表单校验
    这篇文章主要为大家展示了“JavaScript中如何完成注册页面表单校验”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“JavaScript中如何完成注册页面表单...
    99+
    2024-04-02
  • js实现注册页面校验功能
    本文实例为大家分享了js实现注册页面的校验代码，供大家参考，具体内容如下 基本操作 document.getElementById()：获取页面元素alert()：向页面弹出提示框。...
    99+
    2024-04-02
  • element多个表单校验的实现
    在项目中，经常会遇到表单检验，单个表单检验可查看element的官网文档，里面有详细的介绍。在这里我分享在实际项目中遇到多个表单同时进行校验以及我的解决方法，欢迎大家留言，一起探讨相...
    99+
    2024-04-02
  • hibernate-validator后端表单数据校验的使用示例详解
    目录hibernate-validator后端表单数据校验的使用1、hibernate-validator介绍2、hibernate-validator常用注解3、 hibernat...
    99+
    2024-04-02
  • JavaScript正则表达式实现注册信息校验功能
    目录注册信息校验需求案例分析Java和JavaScript正则表达式的对比 Java中也有正则表达式,默认情况下必须要精确匹配 ;而在JS中默认是模糊匹配，只要字符串包含了正则表达式...
    99+
    2024-04-02
  • jQuery怎么实现注册正则表单验证
    使用jQuery实现注册正则表单验证的步骤如下：1. 添加jQuery库文件到HTML页面中：```html```2. 编写HTML...
    99+
    2023-08-11
    jQuery
  • Java利用自定义注解实现数据校验
    目录JSR303介绍引入依赖常用注解开启校验数据校验测试自定义的封装错误信息统一异常处理分组校验创建分组校验接口添加校验注解开启分组校验自定义校验编写自定义的校验注解编写自定义的校验...
    99+
    2024-04-02
  • js前端表单数据处理和校验怎么实现
    这篇文章主要介绍了js前端表单数据处理和校验怎么实现的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇js前端表单数据处理和校验怎么实现文章都会有所收获，下面我们一起来看看吧。1.数据处理当表单在视图所展示的数据并...
    99+
    2023-07-02
  • element多个表单校验的实现方法
    这篇文章给大家分享的是有关element多个表单校验的实现方法的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。在项目中，经常会遇到表单检验，单个表单检验可查看element的官网文档，里面有详细的介绍。在这里我分享...
    99+
    2023-06-15
  • Spring boot怎么实现超灵活的注解式数据校验
    本篇内容主要讲解“Spring boot怎么实现超灵活的注解式数据校验”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Spring boot怎么实现超灵活的注解式数据校验”吧!...
    99+
    2023-06-21
  • Ajax注册用户时如何实现表单验证功能
    这篇文章主要讲解了“Ajax注册用户时如何实现表单验证功能”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Ajax注册用户时如何实现表单验证功能”吧！很多时候在网站上注册时，我们会发现，注册表...
    99+
    2023-06-08
  • SpringBoot数据校验功能的实现
    1.pom.xml <xml version="1.0" encoding="UTF-8"> <project xmlns="http://maven.apache...
    99+
    2024-04-02
  • 如何实现AJAX制作自动校验的表单
    这篇文章主要讲解了“如何实现AJAX制作自动校验的表单”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何实现AJAX制作自动校验的表单”吧！传统网页在注册时...
    99+
    2024-04-02
  • SpringBoot通过AOP与注解实现入参校验详情
    目录前言：注解标记通过AOP对方法进行增强测试Get请求测试POST请求解决方法代码再次测试POST请求前言： 问题源头： 在日常的开发中，在Service层经常会用到对某一些必填参...
    99+
    2024-04-02
  • C#实现的4种常用数据校验方法小结(CRC校验,LRC校验,BCC校验,累加和校验)
    CRC即循环冗余校验码（Cyclic Redundancy Check）：是数据通信领域中最常用的一种查错校验码，其特征是信息字段和校验字段的长度可以任意选定。循环冗余检查（CRC）...
    99+
    2024-04-02
  • JavaScript表单验证实现过程详解
    目录一. 作用二. 需求三. 实现一. 作用 如果没有表单验证，错误的数据就会发往服务端，会造成服务端压力过大； 所以在前端对数据进行过滤，以减轻服务端压力； 二. 需求 1. 当输...
    99+
    2023-01-30
    JavaScript表单验证 JS表单验证
  • 详解Java如何实现数值校验的算法
    给定一个字符串如何判断它是否为数值类型？例如：字符串+100、5e2、-123、3.1416以及-1E-16都表示数值，为数值类型，但12e、1a3.14、1.2.3、+-5以及12...
    99+
    2024-04-02
  • Java实现优雅的参数校验方法详解
    目录一、引子二、如何优雅地校验参数2.1 官方指导意见2.2 注解用法说明一、引子 要对方法的参数进行校验，最简单暴力的写法是这个样子： public static void...
    99+
    2024-04-02
软考高级职称资格查询
iis服务器助手广告
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作