当前位置:小鱼儿玄机二站 > 关于计算机 > 原生js实现数字字母混合验证码的简易实例,ja

原生js实现数字字母混合验证码的简易实例,ja

文章作者:关于计算机 上传时间:2019-09-03

本文实例陈述了原生js完成数字字母混合验证码的上上下下代码,着眼是注释很详细,便于我们知晓,特分享给大家供我们参照他事他说加以考察。具体如下:
运行效果截图如下:

javascript验证内容为数字以及长度为10的总结实例

图片 1

<html>
<head>
  <script type="text/javascript">
    function valid() {
      var numVal = document.getElementById("num").value;
      if(numVal!=undefined&&numVal!=""){
        if(!validateNum(numVal)){
          return ;
        }
      } else {
        alert("没有输入任何值!")
        return ;
      }
      alert("数据格式正确,可以提交");
    }
    //验证必须是10为数字
    function validateNum(str)
    {
      if(str.length != 10)
      {
        alert("发票代码必须是10位");
        return false;
      }
      else
      {
        for(var i=0; i<str.length; i++)
        {
          if(str.charAt(i)<'0' || str.charAt(i)>'9')
          {
            alert("发票代码只能是数字");
            return false;
          }
        }
      }
      return true;
    }
  </script>
</head>
<body>
<input type="text" name="num" id="num"/>
<input type="button" value="验证" onclick="valid()" />
</body>
</html> 

切切实实代码如下:

以上那篇javascript验证内容为数字以及长度为10的简便实例正是我分享给我们的全部内容了,希望能给我们三个参谋,也可望大家多多帮忙脚本之家。

<!DOCTYPE html>
<html>
<head>
  <meta charset="gb2312">
  <title></title>
  <style type="text/css">
    body, div {
      margin: 0;
      padding: 0;
      font-size: 18px;
      font-family: "微软雅黑";
      -webkit-user-selelct: none;
    }

    #code {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -25px;
      margin-left: -50px;
      width: 100px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      border: 1px solid #ff0000;
      cursor: pointer;
      letter-spacing: 5px;
    }
  </style>
</head>
<body>
<div id="code">
  xdF2
</div>
<script type="text/javascript">
  //当前验证码获取的随即范围
  var codeStr = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
  //思想:0-61索引 只需要随机生成4个索引,然后charAt可以获取随机4个索引。
  var oDiv = document.getElementById("code");

  function getRandom(n, m) {
    n = Number(n);       //转换n,m,结果不是数字就是NaN
    m = Number(m);
    if (isNaN(n) || isNaN(m)) {     //判断n,m,是不是有效数字,如果n或m其中一个传入的不是数字
      return Math.random();      //返回 【0-1)之间的随机小数
    }
    if (n > m) {             //如果n大于m,则交换位置
      var temp = n;
      n = m;
      m = temp;
    }
    return Math.round(Math.random() * (m - n) + n);          //返回,取m,n之间的随机整数。
  }


  function getCode() {       
    var str = "";        //定义一个空字符串备用
    for (var i = 0; i < 4; i++) {    //遍历4个索引
      var ran = getRandom(0, 61);      //调用getRandom方法,随机获取一个索引0-61里的随机索引
      str += codeStr.charAt(ran);      //把codeStr字符串里,我们指定获取ran(这个4个索引);
    }
    oDiv.innerHTML = str;       //呈现在页面上
  }

  getCode();              //调用方法

  oDiv.onclick = function () {
    getCode();
  }
</script>
</body>
</html>

您可能感兴趣的篇章:

  • JS正则表明式相配检查测试各个数值类型(数字证实)
  • 原生js达成数字字母混合验证码的粗略实例
  • javascript兑现数字验证码的大致实例
  • javascript达成数字+字母验证码的轻巧实例
  • JS正则表达式验证数字代码
  • js保留两位小数方法总括
  • JS完结保留n位小数的四舍五入难点示例
  • JavaScript如何完毕对数字保留两位小数壹人自动补零
  • 落到实处js保留小数点后N位的代码
  • js保留小数点后二个人的写法
  • js浮点数保留两位小数点示例代码(四舍五入)
  • js验证整数加入保障留小数点的简短实例
  • JS验证输入的是不是是数字及保留二位小数难点

您也许感兴趣的稿子:

  • javascript验证内容为数字以及长度为10的轻易实例
  • JS正则表明式相配检查评定各类数值类型(数字印证)
  • javascript落到实处数字验证码的简要实例
  • javascript贯彻数字+字母验证码的大约实例
  • JS正则表达式验证数字代码
  • js保留两位小数方法总计
  • JS达成保留n位小数的四舍五入难点示例
  • JavaScript怎么样落到实处对数字保留两位小数一个人自动补零
  • 兑现js保留小数点后N位的代码
  • js保留小数点后二人的写法
  • js浮点数保留两位小数点示例代码(四舍五入)
  • js验证整数加入保证留小数点的简练实例
  • JS验证输入的是不是是数字及保留几个人小数难点

本文由小鱼儿玄机二站发布于关于计算机,转载请注明出处:原生js实现数字字母混合验证码的简易实例,ja

关键词: