登录页面设置用户必须勾选且阅读完某种协议才能登录或注册

这篇具有很好参考价值的文章主要介绍了登录页面设置用户必须勾选且阅读完某种协议才能登录或注册。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.功能需求

    其实在很多软件的开发过程中,都会出现登录页面,尤其是一个成熟完整的系统,其中的登录页面多多少少的都属有用户须知的隐私协议,那么怎么在用户登录或者注册前让用户稍微浏览一下这个隐私协议呢?我们可以通过监听隐私协议的滚动以及用户是否点击了勾选隐私协议

2.页面展示

稍微粗糙的页面展示如下,当且仅当用户点击了勾选同意协议以及将相关协议浏览到底部的时候,这是点击登录,才会显示登录成功。如下了中的操作结果

登录页面设置用户必须勾选且阅读完某种协议才能登录或注册

 登录页面设置用户必须勾选且阅读完某种协议才能登录或注册

 3.实现步骤

    其实要实现这个功能大致就两个核心,一是判断用户是否点击了这个勾选框,二是判断用户是否将隐私信息全部阅读完成,即监测滑轮是否移动到底部(不是浏览器的滚轮,而是这个盒子的滚轮)

    3.1 监测是否滑动到底部

    其实如果将一个元素的overflow设置为scroll的话,那我们就可以通过scrollTopscrollHeightclientHeight,这三个属性来获取元素是否滑动到了底部

 登录页面设置用户必须勾选且阅读完某种协议才能登录或注册

    watchPrivacy() {
      let ReadMainBox = this.$refs.ReadMainBox
      // console.log(ReadMainBox.scrollTop);       
      //元素滚动距离元素本身顶部的距离
      // console.log(ReadMainBox.scrollHeight);    
      //元素本身的高度加上padding和scroll的最大距离
      // console.log(ReadMainBox.clientHeight);    
      //clientHeight 为盒子的高度,不加上外边距和内边距
      if (ReadMainBox.scrollHeight - ReadMainBox.scrollTop !== ReadMainBox.clientHeight) 
     {
        alert('请阅读完隐私内容条')
        this.readFlag = false
      } else {
        this.readFlag = true
      }
    },

由于在Vue中不建议我们直接使用document来获取DOM元素,因此我们使用$refs来获取我们上面标注好的相关元素,这上面我大致做了一些关于这三个元素的相关说明,大致就是通过scrollHeight - scrollTop来判断是否等于clientHeight。如果等于的话就可以得出是移动到了底部,反之就未移动到底部。

    3.2 监测用户是否勾选

其实监测用户是否勾选就很简单了,我们可以动态绑定checked,然后通过一个变量来看是否勾选,勾选了就设置checked为true,反之就设置为false。

    3.3 是否能点击登录按钮

在我的代码中没有这个处理,但是其实实现也并不难,我们可以通过绑定一个disabled,用是否勾选以及是否滑动到底部来判断,但满足这两个是,就可以点击,反之就不能点击

4.全部代码

<template>
  <div class="MainBox">
    <div class="ReadMainBox" ref="ReadMainBox">相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议
      相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议
      相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议
      相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议
      相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议
      相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议
      相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议
      相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议
      相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议
      相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议
      相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议
      相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议
      相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议
      相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议
      相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议
      相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议
      相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议
      相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议
      相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议
    </div>
    <div class="MainBoxBottom">
      <input type="checkbox" @click="checkPrivacy" :checked="checkFlag">
      <span class="checkBtnInfo">勾选同意协议</span>
    </div>
    <div class="loginBtn" @click="userLogin">点击登录</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkFlag: false,
      readFlag:false,
    }
  },
  methods: {
    checkPrivacy() {
      this.checkFlag = !this.checkFlag
    },
    //用来看是否隐私滑动到了底部 
    watchPrivacy() {
      let ReadMainBox = this.$refs.ReadMainBox
      // console.log(ReadMainBox.scrollTop);       //元素滚动距离元素本身顶部的距离
      // console.log(ReadMainBox.scrollHeight);    //元素本身的高度加上padding和scroll的最大距离
      // console.log(ReadMainBox.clientHeight);    //clientHeight 为盒子的高度,不加上外边距和内边距
      if (ReadMainBox.scrollHeight - ReadMainBox.scrollTop !== ReadMainBox.clientHeight) {
        alert('请阅读完隐私内容条')
        this.readFlag = false
      } else {
        this.readFlag = true
      }
    },
    userLogin() {
      this.watchPrivacy()
      console.log(this.readFlag,this.checkFlag);
      if(this.readFlag && this.checkFlag){
        console.log('登录成功');
      }else{
        alert('请读完隐私信息')
        console.log('请读完隐私信息');
      }
    },
  }
}
</script>

<style lang="less" scoped>
.MainBox {
  margin: 100px auto;
  width: 800px;
  height: 420px;
  border: 1px solid #ccc;

  .ReadMainBox {
    margin: 10px auto;
    width: 400px;
    height: 300px;
    overflow-y: scroll;
    border: 1px solid #ccc;
  }

  .MainBoxBottom {
    margin: 10px auto;
    align-items: center;
    width: 400px;
    height: 30px;
    line-height: 30px;
    justify-content: space-around;
    font-size: 14px;

    .checkBtnInfo {
      margin-left: 5px;
      position: relative;
      top: -2px;
    }
  }

  .loginBtn {
    margin: 0 auto;
    width: 100px;
    padding: 10px 5px;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
  }
}
</style>

 5.总结

    其实完成这个业务功能很简单,主要就是判断用户是否将隐私项滚动到了底部,然后就是是否勾选了。其实这背后还有待提升,假设隐私内容是一个组件(其实设计到父子间怎么通知是否滑动到底部) 或者   是一个新的页面, 用户勾选了再去查看隐私内容,涉及到跳转就会有页面销毁,数据保留的相关问题。其实当这个业务复杂化的时候我们处理的情况就不在是这么单一,涉及到的相关问题欢迎各位在评论区中进行相关的探讨,一起学习,一起进步文章来源地址https://www.toymoban.com/news/detail-402961.html

到了这里,关于登录页面设置用户必须勾选且阅读完某种协议才能登录或注册的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 用layui写用户登录页面遇到的问题

    原因:link标签和script标签中的type属性没写,导致应该是script或者这个css没有识别出来 解决办法:link标签里面加上type为text/css, script标签中加上type为 在你需要不改变的盒子外面加一层盒子 基本上都要加一个margin:0 padding = 0; HTML`CSS_网站页面不同浏览器兼容性问题解决 - 菲比月

    2024年02月02日
    浏览(52)
  • react go实现用户历史登录列表页面

    refer: http://ip-api.com/ 1.首先需要创建一个保存用户历史的登录的表,然后连接go 2.在用户登录的时候,获取用户的IP IP位置,在后端直接处理数据即可(不需要在前端传递数据) (1)增加路由: (2)在model里增加(例如:models/history_login_logs.go)     (3) 在登录后的方法中增加

    2024年02月12日
    浏览(33)
  • uniapp获取用户信息(登录及个人中心页面的实现)

    因为在微信小程序中wx.getuserInfo已经失效,所以我们在uniapp中也应该使用wx.getUserProfile来获取用户信息 页面的逻辑 一上来加载个人中心页,当用户点击未登录三个字时跳转登录页 登录页点击微信登录应该跳出授权弹窗获取用户的授权信息(使用wx.getUserProfile) 当用户点击同意

    2024年02月11日
    浏览(52)
  • vue项目登录页面实现记住用户名和密码

    记录一下实现的逻辑,应该分两步来理解这个逻辑 首次登录,页面没有用户的登录信息,实现逻辑如下: 用户输入用户名和密码登录,用户信息为名为form的响应式对象,v-model分别对应两个输入框 用户点击登录实现登录功能 判断是否勾选了记住密码,v-model一个CheckBox,勾选

    2024年02月15日
    浏览(44)
  • 【自用】VUE 获取登录用户名 显示在其他页面上

    步骤1: 安装 js-cookie 依赖 步骤2: 在登录页面中引入 js-cookie 依赖 步骤1: 步骤1: 在其他页面中引入 js-cookie 依赖 步骤2: 设定一个 computed 计算属性,并在其中写入获取登录界面 cookies 的方法: 步骤3: 在需要使用的地方使用 插值表达式 {{xxx}} 来使用它! (请注意,我们需

    2024年02月01日
    浏览(47)
  • WordPress用户登录登出后重定向到指定页面的实现方法

    这篇文章将向您展示WordPress用户登录后如何重定向到指定页面或者文章的技巧。 一、重定向到网站管理面板。 将以下代码添加到您的当前主题的 functions.php 文件中: PHP Code 复制内容到剪贴板   function  soi_login_redirect( $redirect_to ,  $request ,  $user )    {         return  ( is_

    2023年04月23日
    浏览(45)
  • Ubuntu设置允许root用户登录

    Ubuntu激活root用户 设置允许root通过ssh默认登录 设置允许root用户登录桌面(默认不允许) 在 \\\"auth required pam_succeed_if.so user != root quiet_success\\\" 前加#号注释,然后保存关闭。 在 \\\"auth required pam_succeed_if.so user != root quiet_success\\\" 前加#号注释,保存关闭。 重启ubuntu系统,使用root用户登

    2024年02月11日
    浏览(45)
  • 微信小程序登录页验证与页面跳转(二) ---结合SpringBoot和MySQL实现多用户登录

    Spring Boot的开发环境如下: 1、IDEA:2020 2、JDK版本:1.8 3、MySQL 版本:8 代码如下(示例): 打开IDEA,新建项目: 这里选择Spring lnitializr: 在接下来的页面中进行如下配置: 进行下一步:选择SpringBoot的版本,这里选择的是2.7.14 然后: 设置项目所在路径和设置项目名称: 项

    2024年01月22日
    浏览(58)
  • MySQL设置远程登录(为root用户设置远程登陆权限)

    如果是8以前的版本可以使用 重启MySQL服务,此时应当可以连接成功。 在MySQL8之后,使用 GRANT 命令的使用不会默认创建新账户,所以如果你执行上面的语句显示 恭喜你,你应当使用的是MySQL8的版本。 既然问题是使用 GRANT 时不会创建新账户,那我们先新建一下就好了。 此时,

    2024年02月16日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包