一种轻量级密码强度校验的交互方法和系统与流程

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


背景技术：

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


技术实现要素：

3.本发明其中一个发明目的在于提供一种轻量级的密码强度校验的交互方法和系统，所述方法和系统利用meter标签，作为文案展示和渲染功能的主体，相比于传统的html渲染文案强度展示区分方案具有更少的代码量，以及更流畅的运行功能。
4.本发明另一个发明目的在于提供一种轻量级的密码强度校验的交互方法和系统，所述方法和系统利用css的content属性进行密码强度的文案输入，可以实现不同强度密码颜色更好的渲染性能。
5.本发明另一个发明目的在于提供一种轻量级的密码强度校验的交互方法和系统，所述方法和系统由于利用了meter标签和css的content属性的文案输入，并利用伪元素进行渲染，使得大幅减少dom元素的渲染，并减少渲染页面的时长。
6.为了实现至少一个上述发明目的，本发明进一步提供一种轻量级的密码强度校验的交互方法，所述方法包括：
7.根据密码强度层级配置meter标签，设置meter标签的主体伪类，用于获取渲染元素；
8.根据所述密码强度层级配置ccs渐变色，并将所述渐变色分块；
9.配置密码长度或复杂度对应的密码强度层级，并配置对应的渐变色的分块展示层级；
10.输入密码后，利用meter标签的主体伪类和对应的密码强度层级渲染展示对应层级的渐变色分块。
11.根据本发明其中一个较佳实施例，所述方法包括配置外层容器的flex布局属性，并设置外层容器的宽度像素值、居中属性和上下边距的像素值。
12.根据本发明另一个较佳实施例，利用meter标签设置展示容器，并将所述展示容器设置为盒模型，并设置定位容器，配置所述meter标签的顶部边距和宽度。
13.根据本发明另一个较佳实施例，所述meter标签的主体伪类的设置方法包括：设置所述meter标签的主体伪类的高度、宽度和边框，并利用ccs的webkit-meter构建渐变色所
述meter标签的主体伪类的渐变色方法。
14.根据本发明另一个较佳实施例，利用所述ccs的webkit-meter构建渐变色方法包括：配置所述meter标签的主体伪类渐变色方向，以及配置渐变色的颜色种类，并配置渐变色的像素长度。
15.根据本发明另一个较佳实施例，利用所述ccs的webkit-meter构建渐变色方法包括：配置密码长度或复杂度的强度校验规则，根据所述强度校验规则的层级配置对应的渐变色颜色种类的颜色块，并配置对应的颜色展示的像素顺序，当输入满足指定强度校验层级的密码时，通过渲染对应颜色块。
16.根据本发明另一个较佳实施例，所述强度校验规则包括：根据所述密码强度校验规则配置对应的文字，并对所述文字进行偏移量、高度、垂直高度以及超出隐藏的配置，或根据所述密码强度校验ccs的webkit-text-fill-color配置文字的渐变色。
17.根据本发明另一个较佳实施例，利用所述meter标签获取容器需要展示的元素，监听输入事件并获取输入的数据。
18.为了实现至少一个上述发明目的，本发明进一步提供一种轻量级的密码强度校验的交互系统，所述系统执行上述一种轻量级的密码强度校验的交互方法。
19.本发明进一步提供一种计算机可读存储介质，计算机可读存储介质存储有计算机程序，所述计算机程序可被处理器执行所述一种轻量级的密码强度校验的交互方法。
附图说明
20.图1显示的是本发明一种轻量级的密码强度校验的交互方法的流程示意图。
21.图2显示的是传统的密码强度校验颜色区分代码示意图。
22.图3显示的是本发明中利用meter标签的密码强度校验的颜色区分代码示意图。
具体实施方式
23.以下描述用于揭露本发明以使本领域技术人员能够实现本发明。以下描述中的优选实施例只作为举例，本领域技术人员可以想到其他显而易见的变型。在以下描述中界定的本发明的基本原理可以应用于其他实施方案、变形方案、改进方案、等同方案以及没有背离本发明的精神和范围的其他技术方案。
24.可以理解的是，术语“一”应理解为“至少一”或“一个或多个”，即在一个实施例中，一个元件的数量可以为一个，而在另外的实施例中，该元件的数量可以为多个，术语“一”不能理解为对数量的限制。
25.请结合图1，本发明提供了一种轻量级的密码强度校验的交互方法和系统，其中所述方法包括如下步骤：首先需要预先配置密码强度校验的规则，其中所述密码强度校验规则包括根据不同密码长度配置对应的强度，比如当输入的密码长度为1-3个时，设定为低强度的密码，密码长度为4-6为中强度密码，6位以上长度的密码为高强度。或者本发明可以设置不同密码类型的密码强度校验规则，比如在1-3个密码中存在至少一个非数字型密码，则将该密码强度校验设定为中强度，密码长度为4-6位的密码中存在至少2个非数字密码类型，则将该密码强度定义为高强度。在完成所述密码强度校验规则的预先配置后，进一步利用meter标签和ccs渐变色配置不同强度密码的渲染操作。
26.值得一提的是，本发明核心在于利用meter标签生成meter标签伪类主体作为渲染的元素，请结合图1和图2，相比于传统的密码强度校验颜色区分代码，本发明利用meter标签进行密码强度校验的颜色区分代码量将大幅减少，如图2中的代码量相比于图1的代码量减少了40％-60％,且由于利用meter标签伪类主体作为渲染元素，使得大幅减少dom的渲染数，从而使得html代码的整体页面渲染时长大幅降低，提高代码的运行效率。
27.具体而言，所述密码强度校验方法包括：设置全部元素的外边距为0，并且设置全部元素的内边距为0，且设置输入框内的边框不存在，从而可以形成完整的输入框。进一步设置外层容器的flex布局属性，其中进一步设置所述外层容器的宽度width，本发明中可以设置所述外层容器的宽度为600像素(600px)，以及对所述外层容器设置包括但不仅限于居中设置、上下边距的像素值等。需要说明的是，所述外层容器为用于展示的flex布局元素。
28.进一步利用meter标签设置展示容器为盒模型，即所述展示容器为block，并通过position设置所述展示容器的定位。进一步可以设置所述展示容器的顶部间距margin-top、宽度width等，比如可设置展示容器的顶部间距margin-top为7像素，以及宽度width为150像素。进一步利用所述meter标签配置主体伪类(webkit-meter-bar)，其中所述meter标签主体伪类用于获取当前元素，其中配置所述meter标签主体伪类的宽度、高度和边框，在本发明其中一个较佳实施例中，可以设置所述meter标签主体伪类的宽度为150像素值(150px)，以及设置所述meter标签主体伪类的高度为16像素值，并设置所述meter标签主体伪类的边框为不存在。
29.本发明进一步利用ccs的webkit-meter中渐变色属性(linear-gradient)来进一步对所述meter标签主体伪类配置不同的渐变色，并将不同的渐变色进行分块处理。以上述宽度为150像素值的meter标签主体伪类为例，利用所述ccs中的渐变色属性中分别设置渐变色的方向为从左往右，且将已经定位的展示容器中定义从0-49像素的范围内颜色为红色，定义49-51像素为灰色隔断，51-99像素为橙色，99-101像素为灰色隔断，101-150像素为绿色，需要说明的是，上述定义的分块的渐变色仅仅是举例说明，本发明对如何进行渐变色分块不再具体限定。
30.在完成所述渐变色分块的定义后，进一步根据预先设定的密码强度校验等级分配对应的渐变色分块，其中当校验所述密码强度为低等级时，通过ccs的背景(background)属性设置渐变色中的红色，从而可以执行所述红色的渲染；当校验所述密码强度为中等级时，通过所述ccs的背景属性设置渐变色中的橙色，从而可以通过ccs执行所述橙色的渲染；当校验所述密码强度为高等级时，通过所述ccs的背景属性设置渐变色中的绿色，从而可以通过所述ccs执行所述绿色的渲染操作。需要说明的是，所述ccs的背景(background)为meter标签中的键值(value)的参数，在value中输入对应的背景颜色和渐变色方式即可完成所述meter标签主体伪类的渐变色渲染操作。
31.也就是说，根据所述密码强度校验规则设定的不同强度密码等级，可以配置对应的渐变色的颜色块，利用所述meter标签配置主体伪类生成需要渲染的元素，并通过ccs属性中的渐变色和背景设置完成不同强度密码等级的渲染操作，可以大幅减少dom渲染机制，通过精简的代码可以实现高效的程序运转。
32.本发明进一步配置文案内容(content),并利用meter标签对所述配置的文案内容进行定位(position)，本发明进一步对配置的所述文案根据渐变色块的位置分别设置包括
左偏移量、右偏移量、高度、垂直行高，水平居中和超出隐藏等操作。并进一步利用ccs中的webkit-text-fill-color设置渐变色，其中所述渐变色的像素范围和上述渐变色块范围相同：定义从0-49像素的范围内颜色为红色，定义49-51像素为灰色隔断，51-99像素为橙色，99-101像素为灰色隔断，101-150像素为绿色。并根据预设的强度检验等级分别对“低、中、高”分别配置对应的颜色，以完成所述文案的颜色定义。
33.特别地，根据本发明公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分从网络上被下载和安装，和/或从可拆卸介质被安装。在该计算机程序被中央处理单元(cpu)执行时，执行本技术的方法中限定的上述功能。需要说明的是，本技术上述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是但不限于电、磁、光、电磁、红外线段、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线段的电连接、便携式计算机磁盘、硬盘、随机访问存储器(ram)、只读存储器(rom)、可擦式可编程只读存储器(eprom或闪存)、光纤、便携式紧凑磁盘只读存储器(cd-rom)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本技术中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本技术中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线段、电线段、光缆、rf等等，或者上述的任意合适的组合。
34.附图中的流程图和框图，图示了按照本发明各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
35.本领域的技术人员应理解，上述描述及附图中所示的本发明的实施例只作为举例而并不限制本发明，本发明的目的已经完整并有效地实现，本发明的功能及结构原理已在实施例中展示和说明，在没有背离所述原理下，本发明的实施方式可以有任何变形或修改。