javascript实现前端input密码输入强度验证_javascript技巧

来源:脚本之家  责任编辑:小易  

最简单的就是,用JS获取服务器空间的ID,模拟触发服务器控件事件,比如:document.getElementById("#服务器控件ID#").click();www.zgxue.com防采集请勿采集本网。

本文实例为大家分享了js实现密码输入强度验证的具体代码,供大家参考,具体内容如下

javascript是前端开发语言,经常与html、css技术一起构成前端开发。javascript一般通过ajax与后台进行数据交互。完整的JavaScript实现包含三个部分:ECMAScript,文档对象模型,字节顺序记号。

需求:

1.需要对用户输入的密码进行验证,验证的级别分为强中弱,如果输入的密码强度少于6时,则不会验证,只有密码强度在6-20时才会进行验证。

web前端的javascript主要用于用户交互以及事件处理。主要作用如下: JavaScript常用来完成以下任务 2、对浏览器事件作出响应 一个完整的 JavaScript 实现是由以下 3 个不同部分组成的:

相关的正则

javascript:void(0)\"onclick=\"Fsubmenu('基础')\"class=\"top\">基础信息 你只要在href属性中添加javascript:或javascript:void(0)就会既是手形,又不会跳转了。

//密码为八位及以上并且字母数字特殊字符三项都包括 var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g"); //密码为七位及以上并且字母、数字、特殊字符三项中有两项,强度是中等 var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g"); var enoughRegex = new RegExp("(?=.{6,}).*", "g");

当然可以,但用c++做后台实现http是不是有点累了,js只能通过http协议与后台交互,或是用插件或是新版浏览器支持websocket与后台交互。后台安全也非常重要

2.密码的显示与隐藏,点击小眼可以对密码进行显示或者隐藏。

javascript是前端开copy发语言,经常与html、css技术一起构成前端开发。javascript一般通过ajax与后台进行数据交互。其实和javascript有个知相同名称的java 是后端开发语言,他俩虽然都有java这

具体代码

html部分:

<div class="wrapper"> <div class="input_box"> <input type="password" name="" placeholder="请输入密码" oninput="passValidate(this)" id="inputPwd" value=""> <div class="eye_icon"></div> </div> <p>请至少使用字母、数字、符号两种类型组合的密码,长度为6~20位。</p> <ul class="pwdStrength"> <li class="weak"></li> <li class="middle"></li> <li class="strong"></li> <li class="result"></li> </ul></div>

css部分:

* { margin: 0; padding: 0; box-sizing: border-box; } .wrapper { width: 500px; height: 200px; border: 1px solid #eee; margin: 100px auto; display: flex; align-items: center; flex-direction: column; } .input_box{ width: 80%; display: flex; align-items: center; } .input_box input { width: 82%; height: 30px; border: none; outline: none; border: 1px solid #D2B48C; border-radius: 12px; margin: 10px 0px; padding-left: 15px; } .eye_icon{ width: 20px; height: 20px; background-image: url('./open_eye.png'); background-repeat: no-repeat; background-position: center content; background-size: cover; margin-left: 10px; } .wrapper p { width: 80%; height: 60px; line-height: 26px; font-size: 14px; color: #339999; } .pwdStrength { width: 80%; list-style: none; height: 30px; display: none; flex: 1; } .weak, .middle, .strong { height: 15px; width: 30px; border: 1px solid black; background: rgb(238, 238, 238); } .middle { border-left: 0; border-right: 0; } .result { width: 30px; height: 15px; font-size: 14px; line-height: 14px; text-align: center; margin-left: 10px; }

JS部分:

//密码的可见与隐藏、 console.log($('#inputPwd')) var eyeFlag = false; $('.eye_icon').click(function(){ if(!eyeFlag){ $(this).css({'background-image': 'url(' + "./close_eye.png" + ')'}); $('#inputPwd').attr('type','text'); }else{ $(this).css({'background-image': 'url(' + "./open_eye.png" + ')'}); $('#inputPwd').attr('type','password') } eyeFlag = !eyeFlag; }) //密码强度验证 function passValidate(e) { var pwd = $.trim(e.value); if (pwd === '') { $('.pwdStrength').css({'display':'none'}) $('.weak').css({ 'background': 'rgb(238, 238, 238)' }); $('.middle').css({ 'background': 'rgb(238, 238, 238)' }); $('.strong').css({ 'background': 'rgb(238, 238, 238)' }); $('.result').text('') } else { $('.pwdStrength').css({'display':'flex'}) //密码为八位及以上并且字母数字特殊字符三项都包括 var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g"); //密码为七位及以上并且字母、数字、特殊字符三项中有两项,强度是中等 var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g"); var enoughRegex = new RegExp("(?=.{6,}).*", "g"); if (false == enoughRegex.test(pwd)) { } else if (strongRegex.test(pwd)) { $('.strong').css({ 'background': '#33ff33' }); $('.result').text('强') } else if (mediumRegex.test(pwd)) { $('.middle').css({ 'background': '#FFC125' }); $('.strong').css({ 'background': 'rgb(238, 238, 238)' }); $('.result').text('中') } else { $('.weak').css({ 'background': '#EE4000' }); $('.middle').css({ 'background': 'rgb(238, 238, 238)' }); $('.strong').css({ 'background': 'rgb(238, 238, 238)' }); $('.result').text('弱') } }}

效果

密码强度为弱

密码强度为中:

密码强度为强

在Web开发中,JavaScript很重要,算法也2113很重要。下面整理了一下一5261些常见的算法在4102JavaScript下的实现,包括二分法、求字1653符串长度、数组去重、插入排序、选择排序、希尔排序、快速排序、冒泡法等等。仅仅是为了练手,不保证高效与美观,或许还有Bug,有时间再完善吧。1.二分法:function binary(items,value){var startIndex=0,stopIndex=items.length-1,midlleIndex=(startIndex+stopIndex)>>>1;while(items[middleIndex]!=value && startIndexif(items[middleIndex]>value){stopIndex=middleIndex-1;}else{startIndex=middleIndex+1;}middleIndex=(startIndex+stopIndex)>>>1;}return items[middleIndex]!=value ? false:true;}2.十六进制颜色值的随机生成:function randomColor(){var arrHex=["0","2","3","4","5","6","7","8","9","a","b","c","d"],strHex="#",index;for(var i=0;i < 6; i++){index=Math.round(Math.random()*15);strHex+=arrHex[index];}return strHex;}一个求字符串长度的方法:function GetBytes(str){var len=str.length,bytes=len;for(var i=0;i < len;i++){if(str.CharCodeAt>255){bytes++;}}return bytes;}3.js实现数组去重:Array.protype.delRepeat=function(){var newArray=new Array();var len=this.length;for(var i=0;i < len;i++){for(var j=i+1;j < len;j++){if(this[i]==this[j]){++i;}}newArray.push(this[i]);}return newArray;}4.插入排序。所谓的插入排序,就是将序列中的第一个元素看成一个有序的子序列,然后不段向后比较交换比较交换。function insertSort(arr){var key;for(var j = 1; j < arr.length ; j++){//排好序的var i = j - 1;key = arr[j];while(i >= 0 && arr[i] > key){arr[i + 1] = arr[i];i --;}arr[i + 1] = key;}return arr;}5.选择排序。其实基本的思想就是从待排序的数组中选择最小或者最大的,放在起始位置,然后从剩下的数组中选择最小或者最大的排在这公司数的后面。function selectionSort(data){var i, j, min, temp , count=data.length;for(i = 0; i < count - 1; i++) {/* find the minimum */min = i;for (j = i+1; j < count; j++){if (data[j] < data[min]){ min = j;}}/* swap data[i] and data[min] */temp = data[i];data[i] = data[min];data[min] = temp;}return data;}6.希尔排序,也称递减增量排序算法。其实说到底也是插入排序的变种。function shellSort(array){var stepArr = [1750, 701, 301, 132, 57, 23, 10, 4, 1]; // reverse()在维基上看到这个最优的步长较小数组var i = 0;var stepArrLength = stepArr.length;var len = array.length;var len2 = parseInt(len/2);for(;i < stepArrLength; i++){if(stepArr[i] > len2){continue;}stepSort(stepArr[i]);}// 排序一个步长function stepSort(step){//console.log(step) 使用的步长统计var i = 0, j = 0, f, tem, key;var stepLen = len%step > 0 ? parseInt(len/step) + 1 : len/step;for(;i < step; i++){// 依次循环列for(j=1;/*j < stepLen && */step * j + i < len; j++){//依次循环每列的每行tem = f = step * j + i;key = array[f];while((tem-=step) >= 0){// 依次向上查找if(array[tem] > key){array[tem+step] = array[tem];}else{break;}}array[tem + step ] = key;}}}return array;}7.快速排序。其实说到底快速排序算法就系对冒泡排序的一种改进,采用的就是算法理论中的分治递归的思想,说得明白点,它的做法就是:通过一趟排序将待排序的纪录分割成两部分,其中一部分的纪录值比另外一部分的纪录值要小,就可以继续分别对这两部分纪录进行排序;不段的递归实施上面两个操作,从而实现纪录值的排序。function quickSort(arr,l,r){if(l < r){var mid=arr[parseInt((l+r)/2)],i=l-1,j=r+1;while(true){while(arr[++i] < mid);while(arr[--j]>mid);if(i>=j)break;var temp=arr[i];arr[i]=arr[j];arr[j]=temp;}quickSort(arr,l,i-1);quickSort(arr,j+1,r);}return arr;}8.冒泡法:function bullSort(array){var temp;for(var i=0;i < array.length;i++){for(var j=array.length-1;j > i;j--){if(array[j] < array[j-1]){temp = array[j];array[j]=array[j-1];array[j-1]=temp;}}}return array;}内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • js 密码强度验证(兼容ie,火狐,谷歌)
  • javascript 简单验证代码(用户名,密码,邮箱)
  • javascript实现密码验证
  • js密码强度实时验证代码
  • js 验证密码强弱的小例子
  • angularjs验证重复密码的方法(两种)
  • js验证手机号、密码、短信验证码代码工具类
  • js正则表达式验证密码强度
  • js如何验证密码强度
  • 原生js实现密码强度验证功能
  • js中的时间转换—毫秒转换成日期时间的示例代码
  • js与sql方式随机生成高强度密码示例
  • js操作输入框中选择内容兼容ie及其他主流浏览器
  • js字符串的切分用法实例
  • js函数进阶之继承用法实例分析
  • js获取上传文件的绝对路径实现方法
  • javascript控制div层透明属性由浅变深由深变浅逐渐显示
  • js实现数组的增删改查操作示例
  • js获取当前时间的实例代码(昨天、今天、明天)
  • javascript仿网易选项卡制作代码
  • web前端javascript能实现什么算法或者计算
  • 怎样在前端Javascript中调用C#方法简单实现
  • 怎样在前端Javascript中调用C#方法简单实现
  • 怎样在前端Javascript中调用C#方法简单实现
  • javascript是前端还是后端?
  • web前端的javascript主要用于交互吗
  • web前端javascript一个问题
  • c++做后台,javascript做前端可行吗
  • javascript是前端还是后端
  • 一个关于javascript的问题 【js ,css,html web前端 网页制作】
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjs 密码强度验证(兼容ie,火狐,谷歌)javascript 简单验证代码(用户名,密码,邮箱)javascript实现密码验证js密码强度实时验证代码js 验证密码强弱的小例子angularjs验证重复密码的方法(两种)js验证手机号、密码、短信验证码代码工具类js正则表达式验证密码强度js如何验证密码强度原生js实现密码强度验证功能js中的时间转换—毫秒转换成日期时间的示例代码js与sql方式随机生成高强度密码示例js操作输入框中选择内容兼容ie及其他主流浏览器js字符串的切分用法实例js函数进阶之继承用法实例分析js获取上传文件的绝对路径实现方法javascript控制div层透明属性由浅变深由深变浅逐渐显示js实现数组的增删改查操作示例js获取当前时间的实例代码(昨天、今天、明天)javascript仿网易选项卡制作代码js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js删除数组里的某个元素方法js 将json字符串转换为json对象的javascript深入理解js闭包简介bootstrap model弹出框的使用js实现随机颜色的3种方法与颜色格式的转化你应该了解的javascript array.map()五种不提示直接关闭网页窗口的js示例代码详解微信小程序文件下载--视频和图片使用layui+ajax实现简单的菜单权限管理及二维码图片生成器qrcode.js简单介绍js中async/await实现异步调用的方法javascript中错误使用var造成undefinedjavascript之面向对象--方法
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved