<!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. 【CSS】隐藏多行文本框Textarea在IE中的垂直滚动栏

    在<[CSS]禁止Google浏览器同意定义调整多行文本框>(点击打开链接)中已经提及过怎样使多行文本框Textarea在一些DOM2的浏览器中固定下来. 这不,多行文本框Textarea ...

  2. 【cl】工程导入

    File>Open 导入成功

  3. c22---枚举

    // // main.c // 枚举基本概念 #include <stdio.h> int main(int argc, const char * argv[]) { // int sex ...

  4. adbd cannot run as root in production builds的解决方法

    部分手机root后,使用adb root会出现这个提示. 原因是root不彻底. adb shell之后进入到$界面,su一下才进入到#. 这个之后可以使用root功能了. 注意到,这个时候exit的 ...

  5. 【转】坑爹的AsyncTask之根本停不下来

    原文网址:http://www.jianshu.com/p/0c6f4b6ed558 上篇<坑爹的AsyncTask之内存泄露>已经简单的探讨过线程使用不当会造成内存泄露的问题,在Acti ...

  6. 获取id 获取当前点击元素节点的任意 属性

    <a id="haveproces" onclick="fnProces(event)" dataid="{{x.id}}" clas ...

  7. css中常用的七种三栏布局技巧总结

    三栏布局,顾名思义就是两边固定,中间自适应.三栏布局在开发十分常见,那么什么是三栏布局?例如当当网首页边商品导航和右边导航固定宽度,中间的主要内容随浏览器宽度自适应.效果如下图所示: 下面围绕的这样的 ...

  8. MAVEN学习笔记之Maven生命周期和插件简介（3）

    MAVEN学习笔记之Maven生命周期和插件简介(3) clean compile site三套生命周期相互独立. clean pre-clean 执行清理前的工作 clean 清理上一次构建生成的所 ...

  9. jquery mobile动态加载数据后无法渲染

    引自:http://blog.sina.com.cn/s/blog_025270e901016lst.html jquery mobile在动态添加html之后无法渲染控件,无法转换控件的办法! jq ...

  10. houxiurong.com 关于Tomcat7部署 一台机器部署两个项目，一个用域名访问，一个用IP访问

    该内容来自 http://houxiurong.com,转载请说明出处. 1.使用IP访问的项目放在Tomcat7 的webapps目录下面:比如:AAA 2.使用域名访问的项目放在Tomcat7的w ...