1.  <html>
  2.      <head>
  3.          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4.          <title>及时验证</title>
  5.          <style>
  6.              #error{
  7.                  color:red;
  8.                  font-weight:bold;
  9.              }
  10.          </style>
  11.          <script type="text/javascript">
  12.        // Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
  13.              function OnInput (event) {
  14.                  //alert ("The new content: " + event.target.value);
  15.                  var value = event.target.value;
  16.                  checkusername(value);
  17.              }
  18.        // Internet Explorer
  19.              function OnPropChanged (event) {
  20.              console.info(event)
  21.                  if (event.propertyName.toLowerCase () == "value") {
  22.                      var value = event.srcElement.value;
  23.                      checkusername(value);
  24.                  }
  25.              }
  26.          //验证用户名方法(只能是数字字母和中文，不能包括特殊字符)
  27.          function checkusername(value){
  28.              var regex = /^[0-9a-zA-Z\u4e00-\u9fa5]*$/;
  29.              if(regex.test(value) == true){
  30.                  //格式正确
  31.                  document.getElementById("error").innerHTML="";
  32.              }else{
  33.                  //格式错误
  34.                  document.getElementById("error").innerHTML="用户名格式错误，用户名由数字、字母、中文组成，不能包含特殊字符";
  35.              }
  36.          }
  37.          </script>
  38.      </head>
  39.      <body>
  40.          请输入用户名：
  41.          <input name="username" type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" placeholder="数字、字母、汉字" /><label id="error"></label>
  42.      </body>
  43.  </html>

JavaScript input框输入实时校验的更多相关文章

  1. input框输入金额显示千分位

    比如输入:1000000,则显示为1,000,000(或者是保留3位小数:1,000,000.000) 知识点: 1)JavaScript parseFloat() 函数: 定义:parseFloat ...

  2. js控制input框输入数字时，累计求和

    input框输入数字时,自动开始计算累加 <div class="form-group"> <label for="inputPassword3&quo ...

  3. js input框输入1位数字后自动跳到下一个input框聚焦

    // input框输入1位数字后自动跳到下一个input聚焦 function goNextInput(el){ var txts = document.querySelectorAll(el); f ...

  4. input框输入手机号码分隔显示

    在input框输入手机号码时,自动加入空格按照3,4,4位显示,如: 实现方法如下: <label>手机号码</label><input type="text& ...

  5. 模拟邮箱输入邮箱地址、收藏标签。input框输入内容后回车，内容显示成小方块并带删除按钮。

    模拟邮箱输入邮箱地址.收藏标签: 文本框输入文字后按回车键或者分号键,输入框中的文字变成小块并带删除按钮和操作. 页面代码: <!DOCTYPE html> <%@ page lan ...

  6. [TimLinux] JavaScript input框的onfocus/onblur/oninput/onchange事件介绍

    1. onfocus事件 input框获取到焦点时,触发了该事件,比如获取到焦点时,修改input框的背景色.这个功能其实可以使用css的伪类:focus来定义. 2. onblur事件 这个与onf ...

  7. input 框输入数字相关

    input框限制只能输入正整数,逻辑与和或运算 有时需要限制文本框输入内容的类型,本节分享下正则表达式限制文本框只能输入数字.小数点.英文字母.汉字等代码. 例如,输入大于0的正整数 代码如下: &l ...

  8. javascript input只输入数字和字母

    <input type="text" placeholder="请输入您的用户名..."> <script type="text/j ...

  9. 基于Element-UI的el-table，input框输入实现排序功能

    最终效果如下 实现要求: 如果输入的内容不是非负整数,那么提示报错,并且将值变为输入前的内容: 如果输入正确,则当输入的内容发生改变并且失去焦点以后,触发事件,重新获取列表: 实现思路 使用原生的in ...

随机推荐

  1. Elasticsearch 2.3 （ELK）Geo_point绘图、日志Date时间获取实例

    前言:本文源于天天是雾霾新闻,我想利用kibana画一下一线城市雾霾图,希望对想利用经纬度在kibana绘图和获取日志本身时间绘图的同学有所帮助.有什么疑问或者纠错,可以给我发邮件 一.数据准备 为了 ...

  2. 【.NET】字符串处理类库

    类名:DealString,方法清单列好在头上. /// 1.截取字符串,最后加3个小数点 /// 2.获得指定Url的参数的string类型值 /// 3.判断数据类型 /// 4.过滤JS标记 / ...

  3. iOS -不同模拟器字体适配

    1.先建立一个UILabel的分类 导入#import <objc/runtime.h>头文件 2.在.m文件中写入如下代码 //不同设备的屏幕比例(当然倍数可以自己控制) #define ...

  4. 电脑自动重启（Kernel-Power 41 (63) error）的一些解决办法

    查看是否有两个声卡驱动,如果有,尝试关闭其中一个. 可能是内存的问题,用memtest测试.如果有多于一个内存条,仅使用其中的一个试试. 更改电源设置,使机器工作在低耗状态. 更新所有驱动,尤其是主板 ...

  5. jQuery的css

    1.css(name|pro|[,val|fn]) 访问匹配元素的样式属性. 参数name 描述: 取得第一个段落的color样式属性的值. $("p").css("co ...

  6. dirty cow exp

    公司搞底层的改了一下,说做到了几个不死机 /* * (un)comment correct payload first (x86 or x64)! * * $ gcc cowroot.c -o cow ...

  7. AxonVR:体验有触觉有温度的VR世界

    提到VR,通常指的是 Oculus Rift 及 HTC Vive的头盔:它们以视觉及听觉使你感到身处虚拟世界.头盔成功的在视觉及听觉感官上蒙骗了你,但我们体验现实的感官不仅于此.绝大多数的VR产品忽 ...

  8. js两种生成对象模式（公有成员和成员私有）

    假设有个需求,创建一个book类,有isbn码,书名,作者 :可以对isbn进行数据完整性校验:--js设计模式 <script type="text/javascript" ...

  9. 谷歌游览器对<input type='file'> change只能响应1次解决和样式的改变

    在项目过程中遇到的需要上传本地文件,file的原始控件不太美观,但是这个控件和button有点不太一样, 改变这个样式的思路就是在控件外面套一层链接,然后把file控件的透明度设置为0(透明).样式只 ...

  10. 从minist database（t10k-images-idx3-ubyte）中读取图片

    matlab代码(亲测,可运行出来): % Matlab_Read_t10k-images_idx3.m % 用于读取MNIST数据集中t10k-images.idx3-ubyte文件并将其转换成bm ...