<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>及时验证</title>
<style>
#error{
color:red;
font-weight:bold;
}
</style>
<script type="text/javascript">
// Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
function OnInput (event) {
//alert ("The new content: " + event.target.value);
var value = event.target.value;
checkusername(value);
}
// Internet Explorer
function OnPropChanged (event) {
console.info(event)
if (event.propertyName.toLowerCase () == "value") {
var value = event.srcElement.value;
checkusername(value);
}
}
//验证用户名方法(只能是数字字母和中文,不能包括特殊字符)
function checkusername(value){
var regex = /^[0-9a-zA-Z\u4e00-\u9fa5]*$/;
if(regex.test(value) == true){
//格式正确
document.getElementById("error").innerHTML="";
}else{
//格式错误
document.getElementById("error").innerHTML="用户名格式错误,用户名由数字、字母、中文组成,不能包含特殊字符";
}
}
</script>
</head>
<body>
请输入用户名:
<input name="username" type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" placeholder="数字、字母、汉字" /><label id="error"></label>
</body>
</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. ASP.NET DropDownList FindByValue 未将对象引用设置到对象的实例 解决方法

    1.粗心把DataValueField中的字段名称写错了. 2.把DataBind()写在了FindByValue()后面了,以下代码是正确顺序: BLL.Student bllStu = new B ...

  2. ionic2环境搭建与hello word

    一.环境搭建 需要安装配置以下组件,具体参考:Cordova环境搭建, 我的版本信息如下: 这里要特别注意,node版本,ionic2需要 大于v6 ,而不是0.xx版本,否则会不支持报错. 二.设置 ...

  3. Python小问题汇总

    现在的时间适合写点最近的小总结,这中间涉及到python/git等问题,我就从python先说起吧. 一.Python 1. Python的异常处理 因为想到自己不断尝试写小程序的话会用到抛出异常信息 ...

  4. iOS之上架打包时报错:ERROR ITMS-90086: "Missing 64-bit support.

    根据错误信息在网上基本找到的解决方法是设置targets中build settings中的architectures中的内容 这是因为现在提交的app必须支持64位.  

  5. Apache Tomcat部署java web项目

    本教程安装环境为windows服务器 在服务器中下载安装JDK JDK下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8 ...

  6. ASP.NET MVC Url中带点号出现404错误的解决方案

    由于项目需求,项目的路由设计如下 config.Routes.MapHttpRoute( name: "Get/Put Sku", routeTemplate: "api ...

  7. mysql连接失败或出现“Too many connections”错误

    mysql连接失败或出现"Too many connections"错误 # 按自己服务器的配置文件路径修改 vi /etc/my.cnf 查找:max_connections 修 ...

  8. xaml中的依赖属性

    wpf使用依赖属性完成数据绑定.动画.属性变更通知.样式化等.对于数据绑定.绑定到.NET属性源上的UI元素的属性必须是依赖属性 .net的一般属性定义如下 private int val;      ...

  9. hdu 3045 Picnic Cows(斜率优化DP)

    题目链接:hdu 3045 Picnic Cows 题意: 有n个奶牛分别有对应的兴趣值,现在对奶牛分组,每组成员不少于t, 在每组中所有的成员兴趣值要减少到一致,问总共最少需要减少的兴趣值是多少. ...

  10. git 客户端提交

    01 按照git到本地 02 按照小乌龟操作面板, 03 (git 和小乌龟)自动加载到右键快捷方式