技术文章
当前位置:首页 > Javascript技术文章 > JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位

让JS验证密码不能为空的实例代码

  • 发布时间:
  • 作者:码农之家原创
  • 点击:170

这篇文章主要知识点是关于js、密码验证、JS验证码实现代码 js实现随机8位验证码 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

JavaScript基础教程
  • 类型:JS教程大小:14 MB格式:PDF出版:人民邮电出版社作者:陈建瓯
立即下载

更多Javascript相关的学习资源可以参阅 Javascript电子书程序设计电子书 等栏目。

JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位

废话不多说了,直接给大家贴代码了,具体代码如下所示:

checkpassword = function(v){
var numasc = 0;
var charasc = 0;
var otherasc = 0;
if(0==v.length){
return "密码不能为空";
}else if(v.length<8||v.length>12){
return "密码至少8个字符,最多12个字符";
}else{
for (var i = 0; i < v.length; i++) {
var asciiNumber = v.substr(i, 1).charCodeAt();
if (asciiNumber >= 48 && asciiNumber <= 57) {
numasc += 1;
}
if ((asciiNumber >= 65 && asciiNumber <= 90)||(asciiNumber >= 97 && asciiNumber <= 122)) {
charasc += 1;
}
if ((asciiNumber >= 33 && asciiNumber <= 47)||(asciiNumber >= 58 && asciiNumber <= 64)||(asciiNumber >= 91 && asciiNumber <= 96)||(asciiNumber >= 123 && asciiNumber <= 126)) {
otherasc += 1;
}
}
if(0==numasc) {
return "密码必须含有数字";
}else if(0==charasc){
return "密码必须含有字母";
}else if(0==otherasc){
return "密码必须含有特殊字符";
}else{
return true;
}
}
};

以上所述是小编给大家介绍的JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!

JS验证码实现代码

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<script language="javascript">
var code; //在全局 定义验证码
function createCode()
{ //创建验证码函数
 code = "";
 var codeLength =4;//验证码的长度
 var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f','g','h','i','j','k',
  'l','m','n','o','p','q','r','s','t','u','v','w','x','y','z');//所有候选组成验证码的字符,当然也可以用中文的
 for(var i=0;i<codeLength;i++)
 { 
 var charIndex =Math.floor(Math.random()*36);
 code +=selectChar[charIndex]; 
 }
// 设置验证码的显示样式,并显示
 document.getElementById("discode").style.fontFamily="Fixedsys"; //设置字体
 document.getElementById("discode").style.letterSpacing="5px"; //字体间距
 document.getElementById("discode").style.color="#0ab000"; //字体颜色
 document.getElementById("discode").innerHTML=code; // 显示
}
function but()
{//验证验证码输入是否正确
 var val1=document.getElementById("t1").value;
 var val2=code;
 if(val1!=val2){
  alert("验证码错误!");
 document.getElementById('t1').value="";
  }
 }
</script>

验证码框         

 <div class="input">
    <input id="t1" type="text" name="u" placeholder="验证码" onblur="but()" />
    <span id="discode"></span>
    <input type="button" value="换一换" class="c" onClick="createCode()">
    </div>

效果

JS验证码实现代码

总结

以上所述是小编给大家介绍的JS验证码实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!

js实现随机8位验证码

开发思路:

1.画出放置验证码的模块、一个写有“看不清…”的小块,以及输入验证码的文本框
2.获取各个模块
3.封装一个函数Yan_ma(),设置验证码为8位,里面含有数字,小写字母,小写字母和中文。每种类型出现的可能性为25%。
4.随机数字在0-9,之间。对Math.ramand()向下取整。
5.随机大小写字母使用fromCharCode() 方法:将 Unicode 编码转为一个字符,例如:

var n = String.fromCharCode(65);
cosole.log(n);
//输出j结果为A

大写字母(65-91) 小写字母(97-123)

var s = String.fromCharCode(Math.floor(Math.random() * 26 + 65));
var s = String.fromCharCode(Math.floor(Math.random() * 26 + 97));

6.随机中文,声明变量letter放置中文字符串,使用charAt()随机在letter中获得某个汉字。

var letter = "如若可以亲爱的请许我青灯墨下执一笔素笺今生为你吟尽千回百转念";
var s = letter.charAt(Math.floor(Math.random() * letter.length));

7.给每位验证码设随机的颜色,字体大小,相对文本位置,旋转角度。给颜色封装一个函数,使用十六进制颜色(如:#ffffff)

//随机颜色
 function fontcolor(){
    var s1="";
    for(var k=0;k<6;k++){
     var z=[0,1,2,3,4,5,6,7,8,9,"a","b","c","d","e","f"];
     var m=z[Math.floor(Math.random() * z.length)];
     s1 +=m;
    }
    return "#"+s1;
   }

随机位置和随机旋转角度的方法相同

随机位置可能为向上下左右偏移 8px, 随机旋转角度可能为绕着z轴旋转(±45度)。

8.提前声明一个空字符串 str 让每位验证码用字符串连接起来.

var s = String.fromCharCode(Math.floor(Math.random() * 26 + 97));
str+="<span style ='transform:rotatez("+ zhuan +"deg);left:"+topset+"px; color: " +color +" ;font-size:"+size+"px ;top:"+topset+"px'>"+s+"</span>";
 arr+=s;

9.让8位验证码出现在第一个大模块中的innerHTML中。

10.给写有“看不清”的span标签添加点击事件,点击时,调用函数Yan_ma,刷新验证码。

11.如果输入的验证码不正确,则弹出“验证成功”,否则弹出“验证失败”。

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>随机验证码</title>
 <script>
  var arr="";
  window.onload=function() {
   var maa = document.getElementsByClassName("block")[0];
   var looking = document.getElementById("look");
   var put = document.getElementById("text");
   var btnn = document.getElementById("btn");
   Yan_ma(maa);
   looking.onclick=function (){
    Yan_ma(maa);
   };
   btnn.onclick=function(){
    if(put.value.toLowerCase()==arr.toLowerCase()){
     alert ("验证成功");
    }
    else{
     alert ("验证失败");
     Yan_ma(maa);
    }
   }

  };


    function Yan_ma(aim) {
    arr ="";
    var str="";
    for (var i = 0; i < 8; i++) {
     //随机数 Math.random 0-1 的随机值
     var n = Math.random();
     //随机颜色
     var color=fontcolor();
     //随机大小
     var size=Math.floor (Math.random ()*12 +20);
     //随机位置
     var g=Math.random() <0.5 ? -1: 1;
     var topset=Math.random ()*g*8;
     //随机旋转
     var h=Math.random() <0.5 ? -1: 1;
     var zhuan=Math.random ()*h*45;
     if (n < 0.25) {
      //随机数字
      var s = Math.floor(Math.random() * 10);
      str+="<span style='transform:rotatez("+ zhuan +"deg);left:"+topset+"px; color: " +color +";font-size:"+size+"px ;top:"+topset+"px'>"+s+"</span>";
      arr+=s;
     }
     //随机大写字母 //65-91
     else if (n >= 0.25 && n < 0.5) {
      var s = String.fromCharCode(Math.floor(Math.random() * 26 + 65));
      str+="<span style='transform:rotatez("+ zhuan +"deg); left:"+topset+"px; color: " +color +";font-size:"+size+"px ;top:"+topset+"px'>"+s+"</span>";
      arr+=s;
     }
     //随机小写字母 97-123
     else if (n >=0.5 && n < 0.75) {
      var s = String.fromCharCode(Math.floor(Math.random() * 26 + 97));
      str+="<span style ='transform:rotatez("+ zhuan +"deg);left:"+topset+"px; color: " +color +" ;font-size:"+size+"px ;top:"+topset+"px'>"+s+"</span>";
      arr+=s;
     }
     //随机文字
     else {
      var letter = "如若可以亲爱的请许我青灯墨下执一笔素笺今生为你吟尽千回百转念";
      var s = letter.charAt(Math.floor(Math.random() * letter.length));
      str+="<span style='transform: rotatez("+ zhuan +" deg) ; left:"+topset+"px; color: " +color +";font-size:"+size+"px;top:"+topset+"px '>"+s+"</span>";
      arr+=s;
     }
    }
    aim.innerHTML =str;
   }

   function fontcolor(){
    var s1="";
    for(var k=0;k<6;k++){
     var z=[0,1,2,3,4,5,6,7,8,9,"a","b","c","d","e","f"];
     var m=z[Math.floor(Math.random() * z.length)];
     s1 +=m;
    }
    return "#"+s1;
   }

 </script>
 <style>
  .block{
   width:250px;
   height:60px;
   background:url("bg2.png") no-repeat center;
   background-size: 100%;
   text-align: center;
   line-height: 60px;
  }
  .block span{
   position: relative;
   display: inline-block;
   width:20px;
   margin:5px 3px;
  }
  #look{
   color: #9200ff;
  }
  #look:hover{
   cursor: pointer;
  }
 </style>
</head>
<body>
<div class="block">
</div>
<span id="look">看不清...</span>
<br/>
<input type="text" id="text" placeholder="请输入验证码" />
<button id="btn">验证</button>
</body>
</html>

出现的验证码

js实现随机8位验证码

当输入正确验证码时

js实现随机8位验证码

当没输入错误验证码时

js实现随机8位验证码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于Javascript的全部知识点内容总结,大家还可以在下方相关文章里找到javascript的写法总结、 js实现方块上下左右移动效、 webpack 2的react开发配置详解、 等javascript文章进一步学习,感谢大家的阅读和支持。

上一篇:Javascript实现的机器学习类库的原理

下一篇:BootStrap Fileinput上传插件实例详解

展开 +

收起 -

JS验证密码 相关电子书
JS验证密码 学习笔记
网友NO.784736

JS验证码实现代码

废话不多说了,直接给大家贴代码了,具体代码如下所示: script language="javascript"var code; //在全局 定义验证码function createCode(){ //创建验证码函数 code = ""; var codeLength =4;//验证码的长度 var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f','g','h','i','j','k', 'l','m','n','o','p','q','r','s','t','u','v','w','x','y','z');//所有候选组成验证码的字符,当然也可以用中文的 for(var i=0;icodeLength;i++) { var charIndex =Math.floor(Math.random()*36); code +=selectChar[charIndex]; }// 设置验证码的显示样式,并显示 document.getElementById("discode").style.fontFamily="Fixedsys"; //设置字体 document.getElementById("discode").style.letterSpacing="5px"; //字体间距 document.getElementById("discode").style.color="#0ab000"; //字体颜色 document.getElementById("discode").innerHTML=code; // 显示}function but(){//验证验证码输入是否正确 var val1=document.getElementById("t1").valu……

网友NO.138314

vuejs简单验证码功能完整示例

本文实例讲述了vuejs简单验证码功能。分享给大家供大家参考,具体如下: !DOCTYPE htmlhtmlhead meta charset="UTF-8"/headbody div id="app" !-- 验证码输入框 -- input type="text" v-model="aaa" @blur="checkNum" / !-- 验证码切换按钮 -- input type="button" v-model="bbb" @click="createCode"/ !-- 提示信息 -- span type="text" {{ ccc }}/span /div/body !-- import Vue before Element -- script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"/script script new Vue({ el: '#app', data: function() { return { aaa:"", bbb:"", ccc:"提示信息" } }, created(){ this.createCode();//初始化生成一个4位数的验证码 }, methods: { createCode(){ var code = ""; var codeLength = 4;//验证码的长度 var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 'S','T','U','V','W','X','Y','Z');//随机数 for(var i = 0; i codeLength; i++) { //循环操作 var index = Math.floor(Math.random()*36);//取得随机……

网友NO.592582

使用 Node.js 模拟滑动拼图验证码操作的示例代码

近几年,网页上各种新型验证码层出不穷,其中一种比较常见的是滑动验证码,比如下图这种。 本文介绍了一种使用纯前端方法寻找滑动终点并模拟滑动的方法。 我们需要三个依赖库: puppeteer 、 Resemble.js 以及canvas 。其中 puppeteer 用于打开并操作页面, Resemble.js 及 canvas 用于寻找滑动验证码的终点位置。相关依赖如下: "dependencies": { "canvas": "^1.6.7", "puppeteer": "^0.12.0", "resemblejs": "^2.2.6"} 接下来是实现要点。首先,引入所需的库,定义一些常量。 const fs = require('fs')const puppeteer = require('puppeteer')const resemble = require('resemblejs')const Canvas = require('canvas')const URL = 'xxx' // 验证码页面访问地址const width = 600const height = 400const slider_width = 44const sleep = duration = { return new Promise(resolve = { setTimeout(resolve, duration) })} 接下来,使用 puppeteer 打开验证码页面: const browser = await pup……

网友NO.147159

js+canvas实现滑动拼图验证码功能

上图为网易云盾的滑动拼图验证码,其应该有一个专门的图片库,裁剪的位置是固定的。我的想法是,随机生成图片,随机生成位置,再用canvas裁剪出滑块和背景图。下面介绍具体步骤。 首先随便找一张图片渲染到canvas上,这里#canvas作为画布,#block作为裁剪出来的小滑块。 canvas width="310" height="155" id="canvas"/canvascanvas width="310" height="155" id="block"/canvasvar canvas = document.getElementById('canvas') var block = document.getElementById('block') var canvas_ctx = canvas.getContext('2d') var block_ctx = block.getContext('2d') var img = document.createElement('img') img.onload = function() { canvas_ctx.drawImage(img, 0, 0, 310, 155) block_ctx.drawImage(img, 0, 0, 310, 155) }; img.src = 'img.jpg' 下面考虑如何裁剪出拼图的形状,拼图形状比较复杂,首先我们画一个正方形,接着上边的代码写: var x = 150, y = 40, w = 42, r = 10, PI = Math.PI function dr……

网友NO.673813

js+canvas实现验证码功能

刚刚开始接触canvas,写个验证码小功能练练手,实现效果图如下: 主要代码如下: html !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" meta http-equiv="X-UA-Compatible" content="ie=edge" titleDocument/title link rel="stylesheet" href="index.css" rel="external nofollow" /headbody div class="wrapper" div class="inputBox" input type="text" class = 'inputCaptcha' placeholder = "请输入验证码" span class="captchaIcon"/span /div p class="errorText"/p div class="canvasBox" div class="imageBox" canvas width =300 height=80 id = 'canvasCaptcha'/canvas input type="button" class='refresh' /div /div button class="captchaSubmit"submit/button /div script src='./jquery.js'/script script src = './index.js'/script/body/html css * { margin: 0; padding: 0;}.wrapper { width: 345px; border: 1px solid #ccc; border-radius: 10px; padding: 20px 10px; margin: 30px 30px;}.inputBox { width: 345px; margin: 0 aut……

<
1
>

Copyright 2018-2020 xz577.com 码农之家

电子书资源由网友、会员提供上传,本站记录提供者的基本信息及资源来路

鸣谢: “ 码小辫 ” 公众号提供回调API服务、“ 脚本CDN ”提供网站加速(本站寻求更多赞助支持)

版权投诉 / 书籍推广 / 赞助:520161757@qq.com

上传资源(网友、会员均可提供)

查看最新会员资料及资源信息