jQuery 版本的文本输入框检查器Input Check
/**
* power by wooshoo copyright 2008-2009
* 程序名：JQuery 专用输入检查器
* 内容：专门针对input[text password hidden]以及textarea的用户输入进行检查
* 检查的范围包括：字符数、是否包含特殊字符、是否为整数、是否符合email格式、是否为电话号码、
* 是否为网站地址、是否为图片地址、是否为浮点小数、是否为人民币货币、是否为日期格式
* 是否为时间格式、是否为日期时间格式、是否为密码格式（仅包含大小写字母、数字及底划线）、
* 暂不可用：是否为非英数特殊字符格式（即仅为中文、日文、韩文等大字符语言）、是否包含html标签、是否包含UBB标签、
*
*/
(function($) {
var wshc = $.fn.check = function(){
return wshc.fn.init(this);
}
DATETIME = {
FULL: "full",
SIMPLE: "simple",
ENGLISH: "english",
JAPANESE: "japanese",
CHINESE: "chinese"
}
wshc.fn = {
init: function(obj){
wshc.fn.val = obj.val();
return wshc.fn;
},
notNull: function(){
if(this.val !== "" || this.val !== undefined){
return true;
}
error("您没有输入任何字符。");
return false;
},
number: function(min,max){//检查字数是否超过限制
if(this.val.length >= min && this.val.length <= max){
return true;
}
error("您输入的字符超过了"+min+"-"+max+"的限制。");
return false;
},
specialChar: function(pat){//检查是否包含特殊字符
//特殊字符包括：\ / @ # $ % ^ & * = < > \n \r
//如果需要自定义，可以在参数中设定
pat = pat || /[\\\/\@\#\$\%\^\&\*\=\<\>\n\r]+/;
error("您输入的字符包含了一些特殊字符。");
return mat(this.val,pat);
},
isNum: function(len){//检查是否为数字
if(!isNaN(this.val)){
return true;
}
error("您输入的不是数字。");
return false;
},
integer: function(){//检查是否为整数
if(this.val == parseInt(this.val)){
return true;
}
error("您输入的不是整数。");
return false;
},
float: function(){//检查是否为小数
if(this.isNum() && !this.integer()){
return true;
}
error("您输入的不是小数。");
return false;
},
rmb: function(){//检查是否为货币（RMB标准格式为：0.00 or 10.00 除个位数外首位不为零）
var pat = /^([1-9][0-9]+|[0-9])\.[0-9]{2}$/;
error("您输入的不是人民币货币格式。");
return mat(this.val,pat);
},
email: function(pat){//检查是否符合电子邮件格式
pat = pat || /^[a-zA-Z0-9_\-\.]+@[a-zA-Z0-9_\-\.]+\.[a-zA-Z]{0,4}$/;
error("您输入的不是电子邮件格式。");
return mat(this.val,pat);
},
http: function(pat){//检查是否为网站的地址（包含http）
pat = pat || /^(http|HTTP):\/\/[^s]*/;
error("您输入的不是通用网址格式。");
return mat(this.val,pat);
},
url: function(pat){//检查是否为通信地址
pat = pat || /^[a-zA-z]+:\/\/[^s]*/;
error("您输入的不是通用通信协议格式。");
return mat(this.val,pat);
},
image: function(pat){//检查是否为图片地址(jpg gif png bmp jpeg )
pat = pat || /^(http|HTTP):\/\/[^s]*(jpg|JPG|png|PNG|gif|GIF|bmp|BMP|jpeg|JPEG)$/;
error("您输入的不是网页允许的图片格式。");
return mat(this.val,pat);
},
password: function(pat){
pat = pat || /^\w*$/;
error("您输入的不是密码格式。");
return mat(this.val,pat);
},
tel: function(pat){
pat = pat || /^\d{3}\-\d{8}$|^\d{4}\-\d{7}$/;
error("您输入的不是中国地区的固定电话格式。");
return mat(this.val,pat);
},
mobile: function(pat){
pat = pat || /^1\d{10}$/;
error("您输入的不是中国地区的移动电话格式。");
return mat(this.val,pat);
},
datatime: function(){
return DATETIME;
},
date: function(type){
var pat;
switch(type){
case DATETIME.FULL:
pat = /^(([1-9]\d{0,3}|0)\-\d{2}\-\d{2})|(([1-9]\d{0,3}|0)\.\d{2}\.\d{2})|(([1-9]\d{0,3}|0)\/\d{2}\/\d{2})$/;
break;
case DATETIME.SIMPLE:
pat = /^(\d{2}\-\d{1,2}\-\d{1,2})|(\d{2}\.\d{1,2}\.\d{1,2})|(\d{2}\/\d{1,2}\/\d{1,2})$/;
break;
case DATETIME.ENGLISH:
pat = /^\w* \d{1,2},(([1-9]\d{0,3}|0)| ([1-9]\d{0,3}|0))$/;
break;
case DATETIME.JAPANESE:
pat = /^(([1-9]\d{0,3}|0)年\d{2}月\d{2}日)$/;
break;
case DATETIME.CHINESE:
pat = /^(([1-9]\d{0,3}|0)年\d{2}月\d{2}日)$/;
break;
}
error("您输入的日期格式不正确。");
return mat(this.val,pat);
},
time: function(type){
var pat;
switch(type){
case DATETIME.FULL:
pat = /^\d{2}:\d{2}:\d{2}$/;
break;
case DATETIME.SIMPLE:
pat = /^\d{1,2}:\d{1,2}:\d{1,2}$/;
break;
case DATETIME.ENGLISH:
pat = /^\d{1,2}:\d{1,2}:\d{1,2}$/;
break;
case DATETIME.JAPANESE:
pat = /^\d{1,2}時\d{1,2}分\d{1,2}秒$/;
break;
case DATETIME.CHINESE:
pat = /^\d{1,2}时\d{1,2}分\d{1,2}秒$/;
break;
}
error("您输入的时间格式不正确。");
return mat(this.val,pat);
}
}
var mat = function(val,pat){
if (val.match(pat)) {
return true;
}
return false;
}
var error = function(err){
wshc.fn.error = err || "无格式错误。";
}
})(jQuery);
使用方法：
前提是，您已经导入了jQuery3.2的包了
JS:
<scrpit>
$(function(){
//检查字数是否超过限制
$(#"do_check").bind("click",function(){
alert($("#wooshoo_ipt").check().number());
alert($("#wooshoo_ipt").check().error);
});
});
</script>
HTML:
<body>
请输入：<input id="wooshoo_ipt" type="text" /><br/>
<a id="do_check">执行检查</a>
</body>
相关推荐
-
制作符合用户体验的漂亮的input输入框
今天来说说鄙人对input输入框在处理上的细节处理和心得,其实制作一个符合CSS标准.FF/IE7/IE6等主流浏览器全兼容.符合用户体验的input其实并不难.先点击看看下面的效果先! 我们-www.jb51.net表单效果 *{ margin:0; padding:0; } body{ font-size:63%; color:#000; } /*input*/ .input_on{ padding:2px 8px 0pt 3px; height:18px; border:1px solid
-
input 输入框内的输入事件详细分析
1.基础:本次分析原理就是在各个浏览器下input内容变化的时候触发事件的各种不兼容性.在ie下用onpropertychange事件,在其他浏览器里用input事件. 2.用例:对每个浏览器分别测试如下的情况: –输入英文字母时–开启输入法时–大小写不同时–输入运算符时–按下tab键时–输入法中按下空格时–按下控制键时–复制粘贴时–删除文本时–等等 3.测试开始:(只标出特殊情况,没标出的表示正常触发,每次只触发一次事件) chrome: +开启输入法时,可以捕捉到输入事件. +开启输入法的时
-
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
input 输入框获得和失去焦点时隐藏或者显示文字我们先看下效果图 输入框默认状态: 输入框获取焦点状态: 大家可以看效果图的搜索输入框,默认显示着"用户名/Email"的提示,当这个 input 输入框获得焦点时,就自动清空等待用户输入,当用户啥也没输入就离开这个 input 输入框时,输入框内又再次显示"用户名/Email"的提示.是不是很常见?很多搜索.登录.表单都会用到这个效果,但是我看了N多个网站,有90%以上是这么实现的: 复制代码 代码如下: &l
-
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
效果图 代码部分 复制代码 代码如下: // JavaScript Document (function($){ $.fn.extend({ "changeTips":function(value){ value = $.extend({ divTip:"" },value) var $this = $(this); var indexLi = 0; //点击document隐藏下拉层 $(document).click(function(event){ if($(
-
js监听输入框值的即时变化onpropertychange、oninput
要达到的效果 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.比如即时显示输入框已经被输入的字节数,或者即时读取输入的值来进行搜索引导,也就是google的关联搜索效果等. 只要我们能捕获即时事件就能做到很多事情. 需要了解的知识 首先,我们需要了解onchange和onpropertychange的不同: IE下,当一个HTML元素的属性改变的时候,都能通过 onpropertychange来即时捕获. onchange在属性值改变时还必须使得当前元
-
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
复制代码 代码如下: <input value="请输入用户名" type="text"> <input value="请输入密码" type="text"> <input value="提交" type="submit"> <script> $(function(){ //输入框中文字颜色控制 $("input:not(:las
-
input输入框的自动匹配(原生代码)
今天看群里有人发起了人人网以前一些面试题,我以前也转载过一些,恰好闲着,挑选一题来做做,练个手. 本题有以下要求: 1. 使用原生代码实现,不可使用任何框架: 2. 对 input框中输入的字符进行匹配,将匹配到的内容以菜单的形式展现在 input框的下方: 3. 只针对英文字符进行匹配,并且匹配到的内容在菜单中加粗: 4. 通过键盘上的上下箭头可以对菜单进行选择,按下回车后将选中的内容写入到 input框中: 思 路 捕捉输入变化,用用户输入的值(下称输入值)去匹配列表项,这里假设列表项是查询
-
javascritp实现input输入框相关限制用法
1.取消按钮按下时的虚线框 在input里添加属性值 hideFocus 或者 HideFocus=true 2.只读文本框内容 在input里添加属性值 readonly 3.防止退后清空的TEXT文档(可把style内容做做为类引用) <INPUT style=behavior:url(#default#savehistory); type=text id=oPersistInput> 4.ENTER键可以让光标移到下一个输入框 <input onkeydown="
-
jQuery 版本的文本输入框检查器Input Check
复制代码 代码如下: /** * power by wooshoo copyright 2008-2009 * 程序名:JQuery 专用输入检查器 * 内容:专门针对input[text password hidden]以及textarea的用户输入进行检查 * 检查的范围包括:字符数.是否包含特殊字符.是否为整数.是否符合email格式.是否为电话号码. * 是否为网站地址.是否为图片地址.是否为浮点小数.是否为人民币货币.是否为日期格式 * 是否为时间格式.是否为日期时间格式.是否为密码格
-
JS 仿支付宝input文本输入框放大组件的实例
input输入的时候可以在后边显示数字放大镜 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS 仿支付宝input文本输入框放大组件</title> <script src="js/jquery.min.js"></script> <style>
-
js与jquery实时监听输入框值的oninput与onpropertychange方法
本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时监听文本框 value 值的变化,然后匹配相关内容. 初接项目,首先想到的是 JQ 里的 change,但是马上排除此方法,因为 change 是在文本框失去焦点时才会触发.曲线救国一下,想到用 keydown 来解决.其他一切还好,只是当不通过键盘操作,而是通过鼠标来复制粘贴时,这个事件是无法触发
-
用jquery快速解决IE输入框不能输入的问题
在IE10以上版本,微软为了提高IE输入框的便利性,增加了文本内容全部删除和密码眼睛功能,但是有些时候打开新的页面里,输入框却被锁定无法编辑,需要刷新一下页面,或者如果输入框有内容需要点击一下输入框后面的叉叉后才能输入.但是 我们需要的是当下需要输入内容.那怎么办呢? 以用下面的方法解决: $("input[type='text']").each(function () { $(this).focus(function () { $(this).select(); }); }); $(
-
jquery+ajax+text文本框实现智能提示完整实例
本文实例讲述了jquery+ajax+text文本框实现智能提示的方法.分享给大家供大家参考,具体如下: 模仿百度查询的智能提示 先看看效果图: 代码部分: CSS代码: <style type="text/css"> #searchresult { width: 130px; position: absolute; z-index: 1; overflow: hidden; left: 130px; top: 71px; background: #E0E0E0; bord
-
javascript特殊文本输入框网页特效
本文实例为大家分享了特殊js文本输入框网页特效,供大家参考,具体内容如下 实例一:让文本框只带有下划线 <script type="text/javascript"> function changeTextStyle(){ //让文本框只带有下划线 //获得文本框的DOM var myText = document.getElementById("myText"); myText.style.borderColor = 'black'; //设置边框颜色
-
jquery实用技巧之输入框提示语句
我们在编写网页的时候不可避免的会遇到输入框,那么怎么设计输入框才能更加优雅呢?不同的人会有不同的答案,下面分享一个比较不错的设计. 效果图 细节 这个效果主要是通过JQuery来实现,我的思路如下: 输入框获取鼠标焦点之前,显示原标签的value属性值:获取了鼠标焦点之后,如果当前value有值,那就清空,否则恢复:密码框特殊照顾,待会讲. 实现的代码如下: $("#address").focus(function(){ var address_text = $(this).val()
-
jQuery实现简易的输入框字数计数功能示例
本文实例讲述了jQuery实现简易的输入框字数计数功能.分享给大家供大家参考,具体如下: 运行效果图如下: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.7.2.min.js"></scr
-
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
做项目的时候有这么一个需求,客户信息显示出来后我要搜索查找相关的客户,并把相关的客户信息全部显示出来,因为一个客户全部信息我写在一个div里面 所以显示的时候就是显示整个div.先看看实现的效果: 当我输入瓦窑村 就把相关带瓦窑的客户信息显示出来并把瓦窑村字体设置红色, 其他的就不显示:下面看html代码: <body> <div class="bar bar-header-secondary" style="top:0"> <di
-
PyQt5 文本输入框自动补全QLineEdit的实现示例
一.QCompleter类 自动补全会用到的一个类 主要代码 def init_lineedit(self): # 增加自动补全 self.completer = QCompleter(items_list) # 设置匹配模式 有三种: Qt.MatchStartsWith 开头匹配(默认) Qt.MatchContains 内容匹配 Qt.MatchEndsWith 结尾匹配 self.completer.setFilterMode(Qt.MatchContains) # 设置补全模式 有三种