[发明专利]一种轻量级密码强度校验的交互方法和系统

说明书

本发明公开了一种轻量级的密码强度校验的交互方法和系统，所述方法包括：根据密码强度层级配置meter标签，设置meter标签的主体伪类，用于获取渲染元素；根据所述密码强度层级配置CCS渐变色，并将所述渐变色分块；配置密码长度或复杂度对应的密码强度层级，并配置对应的渐变色的分块展示层级；输入密码后，利用meter标签的主体伪类和对应的密码强度层级渲染展示对应层级的渐变色分块。所述方法和系统利用Meter标签，作为文案展示和渲染功能的主体，相比于传统的HTML渲染文案强度展示区分方案具有更少的代码量，以及更流畅的运行功能。

技术领域

本发明涉及互联网大数据技术领域，特别涉及一种轻量级密码强度校验交互方法和系统。

背景技术

目前网站设计师需要将不同的网站进行web用户界面进行设计，大部分web设计师是将UX和UI技术应用于网页设计。目前常用的网页设计的编程技术包括HTML/CSS、Javascript，上述网页设计中通常需要用到较多的HTML代码，且对于不同的渲染页面需要较多的DOM元素的渲染，从而使得网页设计的HTML代码冗长，且页面渲染的时长较长，不利于网页设计的交互。

发明内容

本发明其中一个发明目的在于提供一种轻量级的密码强度校验的交互方法和系统，所述方法和系统利用Meter标签，作为文案展示和渲染功能的主体，相比于传统的HTML渲染文案强度展示区分方案具有更少的代码量，以及更流畅的运行功能。

本发明另一个发明目的在于提供一种轻量级的密码强度校验的交互方法和系统，所述方法和系统利用CSS的Content属性进行密码强度的文案输入，可以实现不同强度密码颜色更好的渲染性能。

本发明另一个发明目的在于提供一种轻量级的密码强度校验的交互方法和系统，所述方法和系统由于利用了Meter标签和CSS的Content属性的文案输入，并利用伪元素进行渲染，使得大幅减少DOM元素的渲染，并减少渲染页面的时长。

为了实现至少一个上述发明目的，本发明进一步提供一种轻量级的密码强度校验的交互方法，所述方法包括：

根据密码强度层级配置meter标签，设置meter标签的主体伪类，用于获取渲染元素；

根据所述密码强度层级配置CCS渐变色，并将所述渐变色分块；

配置密码长度或复杂度对应的密码强度层级，并配置对应的渐变色的分块展示层级；

输入密码后，利用meter标签的主体伪类和对应的密码强度层级渲染展示对应层级的渐变色分块。

根据本发明其中一个较佳实施例，所述方法包括配置外层容器的Flex布局属性，并设置外层容器的宽度像素值、居中属性和上下边距的像素值。

根据本发明另一个较佳实施例，利用meter标签设置展示容器，并将所述展示容器设置为盒模型，并设置定位容器，配置所述meter标签的顶部边距和宽度。

根据本发明另一个较佳实施例，所述meter标签的主体伪类的设置方法包括：设置所述meter标签的主体伪类的高度、宽度和边框，并利用CCS的webkit-meter构建渐变色所述meter标签的主体伪类的渐变色方法。

根据本发明另一个较佳实施例，利用所述CCS的webkit-meter构建渐变色方法包括：配置所述meter标签的主体伪类渐变色方向，以及配置渐变色的颜色种类，并配置渐变色的像素长度。

根据本发明另一个较佳实施例，利用所述CCS的webkit-meter构建渐变色方法包括：配置密码长度或复杂度的强度校验规则，根据所述强度校验规则的层级配置对应的渐变色颜色种类的颜色块，并配置对应的颜色展示的像素顺序，当输入满足指定强度校验层级的密码时，通过渲染对应颜色块。