<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <meta http-equiv="content-type" content="text/html;charset=utf-8">

    <title>111</title>

</head>

<body>

<label for="inputDemo">请输入：</label>

<input name="inputDemo" id="inputDemo" type="text" value=""/>

<span id="tips" style="color:red;"></span>

<br/>

<span id="check" style="width:60px;height:30px;line-height: 30px;display: inline-block;text-align: center;cursor: pointer;background-color: #eee;">检验</span>

<script type="text/javascript">

    window.onload = function(){

        var tip = '只能输入英文和数字，且首位必须是字母，字母总数不能超过3个，总长度不能超过20！';

        var tip2 = '字母总数不能超过3个';

        var tip3 = '检验成功';

        var btn_check = document.getElementById('check');

        if(btn_check.addEventListener){

            btn_check.addEventListener('click',inputDo,false);

        } else if(btn_check.attachEvent){

            btn_check.attachEvent('onclick',inputDo);

        }

        function inputDo(){

            var inputVal = document.getElementById('inputDemo').value;

            var reg = /^[a-zA-Z][0-9a-zA-Z]{0,19}$/;

            if(!inputVal.match(reg)){

                document.getElementById('tips').innerText =  tip;

            }else{

                var letter = 0;

                var letterArr = inputVal.split('');

                for(var i=0;i<letterArr.length;i++){

                    var asc = letterArr[i].charCodeAt();

                    if((asc>=97&&asc<=122)||((asc<=90&&asc>=65))){

                        letter++;

                        if(letter>3){

                            document.getElementById('tips').innerText = '字母总数不能超过3个';

                            return ;

                        }

                    }

                }

                if(letter<=3){

                    document.getElementById('tips').innerText =  tip3;

                }

            }

        }

    }

</script>

</body>

</html>

js 只能输入英文和数字，且首位必须是字母，字母总数不能超过3个，总长度不能超过20！的更多相关文章

  1. js只能输入数字、汉字、字母等正则匹配

    只能输英文:<input type="text" onkeyup="value=value.replace(/[^a-zA-Z]/g,'')"> 只 ...

  2. input输入框限制输入英文，数字，汉字

    <h1>js验证输入框内容</h1><br /><br /> 只能输入英文<input type="text" onkeyup ...

  3. JavaScript控制输入框中只能输入中文、数字和英文

    1.问题背景 遇到这样一个问题:有一个输入框,要求只能输入中文.数字和英文(即过滤特殊字符串) 2.JS代码 function  checkUsername() { //正则表达式 var reg = ...

  4. JS只能输入数字，数字和字母等的正则表达式

    1.只能输入英文 <input type="text" onkeyup="value=value.replace(/[^a-zA-Z]/g,'')"> ...

  5. js 只能输入数字和小数点

    <html><head><meta http-equiv="content-Type" content="text/html;charset ...

  6. js只能输入数字和小数点

    1.文本框只能输入数字代码(小数点也不能输入)<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafter ...

  7. js判断输入是否为数字的具体实例

    这篇文章介绍了js判断输入是否为数字的具体实例,有需要的朋友可以参考一下 <html xmlns="http://www.3lian.com/"> <head&g ...

  8. [转]Win10输入法图标消失且只能输入英文的解决方法

    今天电脑开机后发现输入法图标不见了,而且只能输入英文,上网查了很多资料终于找到了解决方案,现摘录如下,以防再次遇到问题,便于查找.谢谢提供解决方案的大牛,如有侵权,请联系本人进行删除(文末放置了原文地 ...

  9. js限制input只能输入有效的数字，有且只有一个小数点，第一个不能为小数点-备

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. UML的基本图(二)

     Both sequence diagrams and communication diagrams are kinds of interaction diagrams. An interacti ...

  2. Flex布局 Flexbox属性具体解释

    原文:A Visual Guide to CSS3 Flexbox Properties Flex布局官方称为CSS Flexble Box布局模型是CSS3为了提高元素在容器中的对齐.方向.顺序,甚 ...

  3. 国外物联网平台初探（五） ——Exosite Murano

    定位 Murano是一个基于云的IoT软件平台,提供安全.可扩展的基础设施,支持端到端的生态系统,帮助客户安全.可扩展地开发.部署和管理应用.服务以及联网产品. 功能 Murano平台简化了整个IoT ...

  4. linux 在线实验

    https://www.shiyanlou.com/courses/running/2

  5. 【docker】python: can't open file 'helloworld.py': [Errno 13] Permission denied

    运行容器提示权限问题 docker run  -v $PWD/myapp:/usr/src/myapp  -w /usr/src/myapp python:3.5 python helloworld. ...

  6. Gerapy 使用详解

    https://blog.csdn.net/fengltxx/article/details/79894839

  7. A - Dubstep

    Problem description Vasya works as a DJ in the best Berland nightclub, and he often uses dubstep mus ...

  8. 使用Micrisoft.net设计方案 第三章Web表示模式

    第三章Web表示模式 体系结构设计者在设计第一个作品时比较精简和干练.在第一次设计时,并清除自己做什么,因此比较小心谨慎.第二个作品是最危险的一个作品,此时他会对第一个作品做修饰和润色,以及把第一次设 ...

  9. ios - masonry第三方库使用自动布局（参考：http://www.cocoachina.com/ios/20141219/10702.html）

    #import "ViewController.h" #import "Masonry.h" #define kWeakSelf(weakSelf) __wea ...

  10. CI中的分页

    根据MVC的思想,分页是需要传数据到模型中,把页码传过去,在模型中根据页码分配: 更多分页类函数可以通过CI手册的分页类查看: $this -> load ->library('pagin ...