<!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. 寻找不到iframe元素

    一直找不到元素,是因为有两层iframe的 找iFrame元素方法如下 1.iFrame有ID 或者 name的情况//进入id="frame1"的frame中,定位id=&quo ...

  2. oc2---类

    // main.m // 第一个OC类,OC中的类其实本质就是一个结构体, 所以p这个指针其实就是指向了一个结构体,创建一个对象就是创建一个结构体指针, #import <Foundation/ ...

  3. 软件开发 —— 重构（refactor）

    0. 代码坏味道 Large Class,过大的类:Large method,过长的(成员)函数: 1. 基本内涵 在不改变代码外在行为的前提下对代码做出修改,以改进代码的内部结构的过程. -- &l ...

  4. 【NOIP 2004】 虫食算

    [题目链接] https://www.luogu.org/problemnew/show/P1092 [算法] 搜索 + 剪枝 直接搜索显然会超时,考虑剪枝 1 : 优化搜索顺序 2 : 假设我们已经 ...

  5. Kaggle之泰坦尼克号幸存预测估计

    上次已经讲了怎么下载数据,这次就不说废话了,直接开始.首先导入相应的模块,然后检视一下数据情况.对数据有一个大致的了解之后,开始进行下一步操作. 一.分析数据 1.Survived 的情况 train ...

  6. QlikSense系列(3)——QlikSense建立数据模型

    QlikSense管理数据在帮助中写的比较清楚 https://help.qlik.com/zh-CN/sense/3.1/Subsystems/Hub/Content/LoadData/load-d ...

  7. SSRS 报表 如何加参数

    SSRS 报表 如何加参数 连接上以后出现一个问题 就是给报表加上参数以后报表不断刷新,跟上次那个报表刷新是同样的问题.那么下面我们来解决一下. 1. 这是给报表添加默认参数进入页面后就不断的刷新刷新 ...

  8. Hibernate框架学习(十)——查询优化

    一.类级别查询 1.get方法:没有任何策略,调用即立即查询数据库加载数据. 2.load方法:是在执行时不发送任何SQL语句,返回一个对象,使用该对象时才执行查询:应用类级别的加载策略. 1> ...

  9. Kettle通用数据贴源作业设计

    本设计基于以下需求提出 1. 快速接入数据源表(贴源/落地) 2. 无须给单独表开发转换/作业 3. 动态生成数据源连接, 表字段等信息(预先保存在数据仓库中) 本设计所需条件 1. 数据源为关系型数 ...

  10. java keytool证书工具使用小结（转载）

    原文地址:http://www.micmiu.com/lang/java/keytool-start-guide/ Keytool 是一个Java数据证书的管理工具 ,Keytool将密钥(key)和 ...