<!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. Web API接口设计（学习）

    1.在接口定义中确定MVC的GET或者POST方式 由于我们整个Web API平台是基于MVC的基础上进行的API开发,因此整个Web API的接口,在定义的时候,一般需要显示来声明接口是[HttpG ...

  2. 我是这样记录javascript知识的------Day31

    在陆续研究了几个javascript的几个小应用后,也算对javascript有了更深一点的认识,头脑中大约都有些印象,总体上说却有些模糊,这时.我知道,是时候看看w3cshool的这部分介绍了. 没 ...

  3. Codeforces Round 313(div1)

    A题: 题目大意: 给出内角全为120度的六边形的六条边的边长,求由多少边长为1的等边三角形构成. 解题思路: 将六边形补全为一个大的等边三角形,则大的等边三角形的边长为六边形的相邻三边之和,接着减去 ...

  4. win7 32位支持多大内存|win7 32位旗舰版最多能识别多少内存

    win7 32位支持多大内存|win7 32位旗舰版最多能识别多少内存 内存的大小决定系统运行速度,所以不少人认为只要内存加大就行了,其实这是不对的,因为win7 32位能支持的内存大小是有限制的,并 ...

  5. 【Linux】YUM Repositories for CentOS, RHEL & Fedora Systems

    这里是官方wiki:https://wiki.centos.org/AdditionalResources/Repositories 一.简介 YUM(Yellowdog Updater Modifi ...

  6. python 飞机大战 实例

    飞机大战 #coding=utf-8 import pygame from pygame.locals import * import time import random class Base(ob ...

  7. DataTable和List相互转换的类

    DataTable与List相互转换 .NET后台数据处理,从数据库中的捞出的数据格式一般是List和DataTable的格式.现在将两种格式相互转换的心得记录下来以便以后查找(直接上代码). pub ...

  8. 前端-JS思维导图

    看不清的朋友右键保存或者新窗口打开哦!喜欢我可以关注我,还有更多前端思维导图笔记

  9. hdu2819 Swap 最大匹配（难题）

    题目大意: 给定一个元素的值只有1或者0的矩阵,每次可以交换两行(列),问有没有方案使得对角线上的值都是1.题目没有限制需要交换多少次,也没限制行交换或者列交换,也没限制是主对角线还是副对角线.虽然没 ...

  10. div 内容水平垂直居中

    对于前端布局来说.总有一些图片水平垂直居中老是不好看,影响整体美观,百度一大堆各种自适应方法,终于找到了一种比较简单,适用于所有场景的方法.. 1.对于布局来说.一个div搞定. <div id ...