jquery在线测试,js在线测试
jQuery实现手机号正则验证输入及自动填充空格功能
本文实例讲述了jQuery实现手机号正则验证输入及自动填充空格功能。分享给大家供大家参考，具体如下：
创新互联建站是一家集网站建设,广汉企业网站建设,广汉品牌网站建设,网站定制,广汉网站建设报价,网络营销,网络优化,广汉网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。
先来看看运行效果（在删除时连删即可）：
具体代码：
!DOCTYPE
html
html
lang="en"
head
meta
charset="UTF-8"
titleDocument/title
/head
body
input
type="text"
id="inp"
script
src="jquery-1.12.3.min.js"/script
script
$(function(){
$("#inp").keyup(function(){
/*
手机号验证时：
var
pattern
=
/^1[3|4|5|7|8]\d{1}\s\d{4}\s\d{4}$/;
pattern.test(str);
*/
_self
=
$(this);
if(_self.val().length
==
3
||
_self.val().length
==
8){
var
str
=
_self.val()+"
";
_self.val(str);
}
});
});
/script
/body
/html
PS：这里再为大家提供2款非常方便的正则表达式工具供大家参考使用：
JavaScript正则表达式在线测试工具：
正则表达式在线生成工具：
更多关于jQuery相关内容可查看本站专题：《jQuery正则表达式用法总结》、《jQuery字符串操作技巧总结》、《jQuery操作xml技巧总结》、《jQuery扩展技巧总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
jquery 多图片预览
给你重新写了一个，直接拷贝到记事本另存为html就可以调试(Jquery是在线引用的)。
以下代码在IE8和FF下测试通过。
另：程序如果有什么问题可以HI我。
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""
html
head
title New Document /title
script src="" type="text/javascript"/script
script type="text/javascript"
//全局变量
var FileCount=0;//上传文件总数
//添加上传文件按钮
function addFile(obj)
{
var filePath=$(obj).prev().val();
var FireFoxFileName="";
//FireFox文件的路径需要特殊处理
if(window.navigator.userAgent.indexOf("Firefox")!=-1)
{
FireFoxFileName=filePath;
filePath=$(obj).prev()[0].files.item(0).getAsDataURL();
}
if(!checkFile(filePath,FireFoxFileName))
{
$(obj).prev().val("");
return;
}
if(filePath.length==0)
{
alert("请选择上传文件");
return false;
}
FileCount++;
//添加上传按钮
var html='span';
html+='input id="f'+FileCount+'" name="'+FileCount+'" type="file"/ ';
html+='input type="button" value="添加" onclick="addFile(this)"/';
html+='/span';
$("#fil").append(html);
//添加图片预览
html='li';
html+='img id="img'+(FileCount-1)+'" src="'+filePath+'" width="100" height="100" style="cursor:pointer;" alt="暂无预览" /';
html+='br/';
html+='a href="#" name="img'+(FileCount-1)+'" onclick="DelImg(this)"删除/a';
html+='/li';
$("#ImgList").append(html);
}
//删除上传文件（file以及img）
function DelImg(obj)
{
var ID=$(obj).attr("name");
ID=ID.substr(3,ID.length-3);
$("#f"+ID).parent().remove();
$(obj).parent().remove();
return false;
}
//检查上传文件是否重复,以及扩展名是否符合要求
function checkFile(fileName,FireFoxFileName)
{
var flag=true;
$("#ImgList").find(":img").each(function(){
if(fileName==$(this).attr("src"))
{
flag=false;
if(FireFoxFileName!='')
{
alert('上传文件中已经存在\''+FireFoxFileName+'\'!');
}
else
{
alert('上传文件中已经存在\''+fileName+'\'!');
}
return;
}
});
//文件类型判断
var str="jpg|jpeg|bmp|gif";
var fileExtName=fileName.substring(fileName.indexOf(".")+1);//获取上传文件扩展名
if(FireFoxFileName!='')//fireFox单独处理
{
fileExtName=FireFoxFileName.substring(FireFoxFileName.indexOf(".")+1);
}
//alert(fileExtName);
if(str.indexOf(fileExtName.toLowerCase())==-1)
{
alert("只允许上传格式为jpg，jpeg，bmp，gif的文件。");
flag=false;
}
return flag;
}
/script
style type="text/css"
.fil
{
width:300px;
}
.fieldset_img
{
border:1px solid blue;
width:550px;
height:180px;
text-align:left;
}
.fieldset_img img
{
border:1px solid #ccc;
padding:2px;
margin-left:5px;
}
#ImgList li
{
text-align:center;
list-style:none;
display:block;
float:left;
margin-left:5px;
}
/style
/head
body
p上传预览图片:br
div id="fil" class="fil"
span
input id="f0" name="f0" type="file"/
input type="button" value="添加" onclick="addFile(this)"/
/span
/div
/p
div id="ok"
fieldset class="fieldset_img"
legend图片展示/legend
ul id="ImgList"
!--li
img id="img1" width="100" height="100" style="cursor:pointer;"
br/
a href="#" name="img1" onclick="DelImg(this)"删除/a
/li--
/ul
/fieldset
/div
/body
/html
jQuery插件form-validation-engine正则表达式操作示例
本文实例讲述了jQuery插件form-validation-engine正则表达式操作。分享给大家供大家参考，具体如下：
form-validation-engine是一个不错的表单验证插件，示例如下：
(function($)
{
$.fn.validationEngineLanguage
=
function()
{};
$.validationEngineLanguage
=
{
newLang:
function()
{
$.validationEngineLanguage.allRules
=
{"required":{
//
Add
your
regex
rules
here,
you
can
take
telephone
as
an
example
"regex":"none",
"alertText":"*
必选字段",
"alertTextCheckboxMultiple":"*
请选择选项",
"alertTextCheckboxe":"*
需要这个复选框"},
"length":{
"regex":"none",
"alertText":"*在
",
"alertText2":"
和
",
"alertText3":
"
之间"},
"maxCheckbox":{
"regex":"none",
"alertText":"*
检查允许超过"},
"minCheckbox":{
"regex":"none",
"alertText":"*
请选择
",
"alertText2":"
选项"},
"confirm":{
"regex":"none",
"alertText":"*
你的字段不匹配"},
"telephone":{
"regex":"/^[0-9\-\(\)\
]+$/",
"alertText":"*
无效的号码"},
"email":{
"regex":"/^[a-zA-Z0-9_\.\-]+\@([a-zA-Z0-9\-]+\.)+[a-zA-Z0-9]{2,4}$/",
"alertText":"*
无效的邮箱"},
"date":{
"regex":"/^[0-9]{4}\-\[0-9]{1,2}\-\[0-9]{1,2}$/",
"alertText":"*
无效的日期，必须是YYYY-MM-DD的格式"},
"onlyNumber":{
"regex":"/^[0-9\
]+$/",
"alertText":"*
只允许输入数字"},
"noSpecialCaracters":{
"regex":"/^[0-9a-zA-Z]+$/",
"alertText":"*
有非法字符"},
"ajaxUser":{
"file":"validateUser.php",
"extraData":"name=eric",
"alertTextOk":"*
这个用户是合法的",
"alertTextLoad":"*
加载中，请等待",
"alertText":"*
这个用户已经存在"},
"ajaxName":{
"file":"validateUser.php",
"alertText":"*
这个名字已经被使用",
"alertTextOk":"*
这个名字是可以的",
"alertTextLoad":"*
加载中，请等待"},
"onlyLetter":{
"regex":"/^[a-zA-Z\
\']+$/",
"alertText":"*
只允许输入字母"},
"validate2fields":{
"nname":"validate2fields",
"alertText":"*
你必须有姓和名"}
}
}
}
})(jQuery);
$(document).ready(function()
{
$.validationEngineLanguage.newLang()
});
这里面有不少正则表达式，很有意思。
很有意思的form表单验证。
PS：这里再为大家提供2款非常方便的正则表达式工具供大家参考使用：
JavaScript正则表达式在线测试工具：
正则表达式在线生成工具：
更多关于jQuery相关内容可查看本站专题：《jQuery正则表达式用法总结》、《jQuery字符串操作技巧总结》、《jQuery操作xml技巧总结》、《jQuery扩展技巧总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
jQuery如何实现一个显示数字，双击后变成可输入框？
说一下思路啊，把输入框和div重叠放在一起！通过控制div和输入框的display的block和none来控制，当然div中显示的数字要和文本框录入的数字同步起来！
jquery怎样获得同辈的前几个和后几个元素
你好！
获取同辈的元素，有个siblings()方法，这个可以获取到同级的所有元素;
还有prev()、next()分别获取之前和之后的元素，这是取向前或向后的一个元素;
prevAll()、nextAll()是获取之前和之后的所有同级元素;
ul
lilist item 1/li
lilist item 2/li
li class="third-item"list item 3/li
lilist item 4/li
lilist item 5/li
/ul
$("li.third-item").siblings(); //可以获取4个li元素
$("li.third-item").prev(); //取得item2
$("li.third-item").next(); //取得item4
$("li.third-item").prevAll(); //取得item1 itme2
$("li.third-item").nextAll(); //取得item4 item5
还有种方式就是通过siblings()方法获取到同级元素后，使用eq()方法定位元素
var $lis = $("li:last").siblings();
$lis.eq(0)
希望对你有帮助！
什么是事件起泡，用jquery阻止事件起泡
通俗的说就是例如一个div元素，并且有后代元素，当对这个div设置了某个事件，它的后代元素也会执行。
!DOCTYPE html
html
head
meta charset="utf-8"
title在线测试页面/title
script type="text/javascript" src=""/script
style
*{ padding:0;margin:0;font-size:12px; }
.pa{ width:100px;height:100px;border:1px solid gray; overflow:hidden;}
.chi{ width:100px;height:20px;background-color:#faa;float:left;line-height:20px;text-align:center; }
.chi:hover{background-color:skyblue;}
/style
/head
body
div class="pa"
div class="chi"1/divdiv class="chi"2/div
/div
button重置/button
/body
script type="text/javascript"
$(function(){
$(".pa").click(function(){
$(this).animate({"border-radius":"20px"},500);
});
$(".chi").click(function(e){
e.stopPropagation(); // 阻止向上冒泡，注释这句代码可以查看效果，现在是已经阻止了
});
$("button").click(function(){
$(".pa").animate({"border-radius":"0"},500);
});
});
/script
/html
分享题目：jquery在线测试,js在线测试
文章URL：http://scyanting.com/article/dsdgdpo.html
