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