JavaScript input框输入实时校验
<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框输入实时校验的更多相关文章
- input框输入金额显示千分位
比如输入:1000000,则显示为1,000,000(或者是保留3位小数:1,000,000.000) 知识点: 1)JavaScript parseFloat() 函数: 定义:parseFloat ...
- js控制input框输入数字时,累计求和
input框输入数字时,自动开始计算累加 <div class="form-group"> <label for="inputPassword3&quo ...
- js input框输入1位数字后自动跳到下一个input框聚焦
// input框输入1位数字后自动跳到下一个input聚焦 function goNextInput(el){ var txts = document.querySelectorAll(el); f ...
- input框输入手机号码分隔显示
在input框输入手机号码时,自动加入空格按照3,4,4位显示,如: 实现方法如下: <label>手机号码</label><input type="text& ...
- 模拟邮箱输入邮箱地址、收藏标签。input框输入内容后回车,内容显示成小方块并带删除按钮。
模拟邮箱输入邮箱地址.收藏标签: 文本框输入文字后按回车键或者分号键,输入框中的文字变成小块并带删除按钮和操作. 页面代码: <!DOCTYPE html> <%@ page lan ...
- [TimLinux] JavaScript input框的onfocus/onblur/oninput/onchange事件介绍
1. onfocus事件 input框获取到焦点时,触发了该事件,比如获取到焦点时,修改input框的背景色.这个功能其实可以使用css的伪类:focus来定义. 2. onblur事件 这个与onf ...
- input 框输入数字相关
input框限制只能输入正整数,逻辑与和或运算 有时需要限制文本框输入内容的类型,本节分享下正则表达式限制文本框只能输入数字.小数点.英文字母.汉字等代码. 例如,输入大于0的正整数 代码如下: &l ...
- javascript input只输入数字和字母
<input type="text" placeholder="请输入您的用户名..."> <script type="text/j ...
- 基于Element-UI的el-table,input框输入实现排序功能
最终效果如下 实现要求: 如果输入的内容不是非负整数,那么提示报错,并且将值变为输入前的内容: 如果输入正确,则当输入的内容发生改变并且失去焦点以后,触发事件,重新获取列表: 实现思路 使用原生的in ...
随机推荐
- Thymeleaf 笔记
th:each=”aname : ${namelist}” th:if=”${name} == ‘SERVICED’” 页面使用Map集合 <div th:each="osl : ${ ...
- ruby操作mongo DB
web自动化中,对操作日志功能进行验证(操作日志存在mongoDB中). 为了避免前面操作产生的日志影响结果校验,我们需要先清除之前的所有操作日志. require 'mongo' host = '1 ...
- ajax/fetch上传富文本时出现中文乱码的解决方案(百分号问题)
最近正在编写自己的项目,其中遇到了nodejs后台接受到的富文本参数显示中文乱码的问题 一开始我以为是字符编码方式的错误,于是在请求参数的地方设置了utf-8,也就是: headers: { 'Con ...
- 无线网卡连接internet,有线网卡向另一台电脑分享网络(笔记本当有线路由器)
有一台笔记本和一台台式机,都放在卧室内 笔记本能用无线网卡连接到客厅的路由器,台式机没有配备无线网卡,不能上网 要从客厅的路由器那边拉一条网线到卧室内连接台式机显然很蠢,在卧室内购置一台中继路由器也不 ...
- 移动端-H5预加载页面
利用简洁的图片预加载组件提升h5移动页面的用户体验 阅读目录 1. 实现思路 2. demo说明 3. 注意事项 4. 总结 在 做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未 ...
- openui5中的RESTful实现odata协议
这篇文章第一次看到就一见如故,它是对过去一个时代分布式计算模型的总结,<分布式计算编程模型之RPC>:http://www.infoq.com/cn/news/2016/04/Distri ...
- 修改html 属性,css样式。
一 通过修改标签属性来改变它的样式 js设置和获取标签的属性 <script type="text/javascript"> window.onload = func ...
- DP! | 不要怂!
跟一个博客刷: http://blog.csdn.net/cc_again/article/details/25866971 一.简单基础dp 1.递推 HDU 2084 #include <b ...
- Python学习笔记——基础篇1【第三周】——set集合
set集合 不允许重复的元素出现(相当于特殊的列表) set 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 练习:寻找差异 # 数据库中原有 old_dic ...
- 链表中LinkList L与LinkList *L 借鉴
链表中LinkList L与LinkList *L的区别以及(*L).elem,L.elem L->next,(*L)->next的区别typedef struct Node{int el ...