(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202210331808.2 (22)申请日 2022.03.31 (71)申请人 杭州玳数 科技有限公司 地址 310000 浙江省杭州市余杭区仓前街 道余杭塘路2301号海智中心8幢102 室-5 (72)发明人 张靖宇　陈吉平　宁海元　 (74)专利代理 机构 杭州裕阳联合专利代理有限 公司 33289 专利代理师 杨琪宇 (51)Int.Cl. G06F 21/46(2013.01) G06F 9/451(2018.01) (54)发明名称 一种轻量级密码强度校验的交互方法和系 统 (57)摘要 本发明公开了一种轻量级的密码强度校验 的交互方法和系统， 所述方法包括： 根据密码强 度层级配置meter标签， 设置meter标签的主体伪 类， 用于获取渲染元素； 根据所述密码强度层级 配置CCS渐变色， 并将所述渐变色分块； 配置密码 长度或复杂度对应的密码强度层 级， 并配置对应 的渐变色的分块展示层级； 输入密码后， 利用 meter标签的主体伪类和对应的密码强度层级 渲 染展示对应层级的渐变色分块。 所述方法和系统 利用Meter标签， 作为文案展示和渲染功能的主 体， 相比于传统的HTML渲染文案强度展 示区分方 案具有更少的代码量， 以及更流畅的运行功能。 权利要求书1页 说明书4页 附图1页 CN 114626055 A 2022.06.14 CN 114626055 A 1.一种轻量级的密码强度校验的交 互方法， 其特 征在于， 所述方法包括： 根据密码强度层级配置meter标签， 设置meter标签的主体伪类， 用于获取渲染元 素； 根据所述密码强度层级配置 CCS渐变色， 并将所述渐 变色分块； 配置密码长度或复杂度对应的密码强度层级， 并配置对应的渐 变色的分块展示层级； 输入密码后， 利用meter标签的主体伪类和对应的密码强度层级渲染展示对应层级的 渐变色分块。 2.根据权利要求1所述的一种轻量级的密码 强度校验的交互方法， 其特征在于， 所述方 法包括配置外层容器的Flex布局属性， 并设置外层容器的宽度像素值、 居中属性和上下边 距的像素值。 3.根据权利要求1所述的一种轻量级的密码强度校验的交互方法， 其特征在于， 利用 meter标签设置展示容器， 并将所述展示容器设置为盒模型， 并设置定位容器， 配置所述 meter标签的顶部边距和宽度。 4.根据权利要求1所述的一种轻量级的密码强度校验的交互方法， 其特征在于， 所述 meter标签的主体伪类的设置方法包括： 设置所述meter标签的主体伪类的高度、 宽度和边 框， 并利用C CS的webk it‑meter构建渐 变色所述meter标签的主体伪类的渐 变色方法。 5.根据权利要求4所述的一种轻量级的密码 强度校验的交互方法， 其特征在于， 利用所 述CCS的web kit‑meter构建渐变色方法包括： 配置所述meter标签的主体伪类渐变色方向， 以及配置渐 变色的颜色种类， 并配置渐 变色的像素长度。 6.根据权利要求4所述的一种轻量级的密码 强度校验的交互方法， 其特征在于， 利用所 述CCS的webkit ‑meter构建渐变 色方法包括： 配置密码 长度或复杂度的强度校验规则， 根据 所述强度校验规则的层级配置对应的渐变色颜色种类的颜色块， 并配置对应的颜色展示的 像素顺序， 当输入 满足指定强度校验层级的密码时， 通过渲染对应颜色块。 7.根据权利要求1所述的一种轻量级的密码 强度校验的交互方法， 其特征在于， 所述密 码强度校验规则包括： 根据所述密码强度校验规则配置对应的文字， 并对所述文字进行偏 移量、 高度、 垂直高度以及超出隐藏的配置， 或根据所述密码强度校验CCS的webkit ‑text‑ fill‑color配置文字的渐 变色。 8.根据权利要求1所述的一种轻量级的密码 强度校验的交互方法， 其特征在于， 利用所 述meter标签获取容器需要 展示的元 素， 监听输入 事件并获取输入的数据。 9.一种轻量级的密码强度 校验的交互系统， 其特征在于， 所述系统执行权利要求1 ‑8中 任意一项所述的一种轻量级的密码强度校验的交 互方法。 10.一种计算机可读存储介质， 其特征在于， 所述计算机可读存储介质存储有计算机程 序， 所述计算机程序可被处理器执行权利要求1 ‑8中任意一项所述的一种 轻量级的密码强 度校验的交 互方法。权　利　要　求　书 1/1 页 2 CN 114626055 A 2一种轻量级密码强度校验的交互方 法和系统 技术领域 [0001]本发明涉及互联 网大数据技术领域， 特别涉及一种轻量级密码强度校验交互方法 和系统。 背景技术 [0002]目前网站设计师需要将 不同的网站进行web用户界面进行设计， 大部分web设计师 是将UX和UI技术应用于网页设计。 目前常用的网页设计的编程技术包括HTML/CSS、 Javascript， 上述网页设计中通常需要用到较多的HTML代码， 且对于不同的渲染页面需要 较多的DOM元素的渲染， 从而使得网页设计的HTML代码冗长， 且页面渲染的时长较长， 不利 于网页设计的交 互。 发明内容 [0003]本发明其中一个发明目的在于提供一种轻量级的密码强度校验的交互方法和系 统， 所述方法和系统利用Meter标签， 作为文案展示和渲染功能的主体， 相比于传 统的HTML 渲染文案强度展示区分方案具有更少的代码量， 以及更流畅的运行功能。 [0004]本发明另一个发明目的在于提供一种轻量级的密码强度校验的交互方法和系统， 所述方法和系统利用CSS的Content属性进 行密码强度的文案输入， 可以实现不同强度密码 颜色更好的渲染性能。 [0005]本发明另一个发明目的在于提供一种轻量级的密码强度校验的交互方法和系统， 所述方法和系统由于利用了Meter标签和CSS的Content属性的文案输入， 并利用伪元素进 行渲染， 使得 大幅减少DOM元 素的渲染， 并减少渲染页面的时长 。 [0006]为了实现至少一个上述发明目的， 本发明进一步提供一种轻量级的密码强度校验 的交互方法， 所述方法包括： [0007]根据密码强度层级配置meter标签， 设置meter标签的主体伪类， 用于获取渲染元 素； [0008]根据所述密码强度层级配置 CCS渐变色， 并将所述渐 变色分块； [0009]配置密码长度或复杂度对应的密码强度层级， 并配置对应的渐变色的分块展示层 级； [0010]输入密码后， 利用meter标签的主体伪类和对应的密码强度层级渲染展示对应层 级的渐变色分块。 [0011]根据本发明其中一个较佳实施例， 所述方法包括配置外层容器的Flex布局属性， 并设置外层容器的宽度像素值、 居中属性和上 下边距的像素值。 [0012]根据本发明另一个较佳实施例， 利用met er标签设置展示容器， 并将所述展示容器 设置为盒模型， 并设置 定位容器， 配置所述meter标签的顶部边距和宽度。 [0013]根据本发明另一个较佳实施例， 所述met er标签的主体伪类的设置方法包括： 设置 所述meter标签的主体伪类的高度、 宽度和边框， 并利用CCS的web kit‑meter构建渐变色所说　明　书 1/4 页 3 CN 114626055 A 3