1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Test</title>
  6. <script type="text/javascript" language="javascript" src="jquery.js"></script>
  7. <script type="text/javascript" language="javascript" >
  8. function validata(){
  9. if($("#username").val()==""){
  10. document.write("请输入名字");
  11. return false;
  12. }
  13. if($("#password").val()==""){
  14. document.write("请输入密码");
  15. return false;
  16. }
  17. if($("#telephone").val()==""){
  18. document.write("请输入电话号码");
  19. }
  20. if($("#email").val()==""){
  21. $("#email").val("shuangping@163.com");
  22. }
  23. }
  24. function isInteger(obj){
  25. reg=/^[-+]?\d+$/;
  26. if(!reg.test(obj)){
  27. $("#test").html("<b>Please input correct figures</b>");
  28. }else{
  29. $("#test").html("");
  30. }
  31. }
  32. function isEmail(obj){
  33. reg=/^\w{3,}@\w+(\.\w+)+$/;
  34. if(!reg.test(obj)){
  35. $("#test").html("<b>请输入正确的邮箱地址</b>");
  36. }else{
  37. $("#test").html("");
  38. }
  39. }
  40. function isString(obj){
  41. reg=/^[a-z,A-Z]+$/;
  42. if(!reg.test(obj)){
  43. $("#test").html("<b>只能输入字符</b>");
  44. }else{
  45. $("#test").html("");
  46. }
  47. }
  48. function isTelephone(obj){
  49. reg=/^(\d{3,4}\-)?[1-9]\d{6,7}$/;
  50. if(!reg.test(obj)){
  51. $("#test").html("<b>请输入正确的电话号码！</b>");
  52. }else{
  53. $("#test").html("");
  54. }
  55. }
  56. function isMobile(obj){
  57. reg=/^(\+\d{2,3}\-)?\d{11}$/;
  58. if(!reg.test(obj)){
  59. $("#test").html("请输入正确移动电话");
  60. }else{
  61. $("#test").html("");
  62. }
  63. }
  64. function isUri(obj){
  65. reg=/^http:\/\/[a-zA-Z0-9]+\.[a-zA-Z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/;
  66. if(!reg.test(obj)){
  67. $("#test").html($("#uri").val()+"请输入正确的inernet地址");
  68. }else{
  69. $("#test").html("");
  70. }
  71. }
  72. //document加载完毕执行
  73. $(document).ready(function() {
  74. // do something here
  75. //隔行换色功能
  76. $("p").each(function(i){
  77. this.style.color=['red','green','blue','black'][i%2]
  78. });
  79. //eq(2)获取$("p")集合的第3个元素
  80. $("p").eq(2).click(function(){$("#display").css("color","blue")});
  81. //所有test中的p都附加了样式"over"。
  82. $("#test>p").addClass("over");
  83. //test中的最后一个p附加了样式"out"。
  84. $("#test p:last").addClass("out");
  85. //选择同级元素还没看懂
  86. //$('#faq').find('dd').hide().end().find('dt').click(function()
  87. //选择父级元素
  88. $("a").hover(
  89. function(){$(this).parents("p").addClass("out")},
  90. function(){$(this).parents("p").removeClass("out")})
  91. //hover鼠标悬停效果，toggle每次点击时切换要调用的函数  ,
  92. //trigger(eventtype): 在每一个匹配的元素上触发某类事件,
  93. //bind(eventtype,fn)，unbind(eventtype): 事件的绑定与反绑定从每一个匹配的元素中（添加）删除绑定的事件。
  94. //方法的连写
  95. $("#display").hover(function(){
  96. $(this).addClass("over");
  97. },function(){
  98. $(this).removeClass("over");
  99. })
  100. .click(function(){alert($("#display").text())});
  101. if($.browser.msie){//判断浏览器，若是ie则执行下面的功能
  102. //聚焦
  103. $("input[@type=text],textarea,input[@type=password]")
  104. .focus(function(){$(this).css({background:"white",border:"1px solid blue"})})
  105. //也可以这样连着写,
  106. //.blur(function(){$(this).css({background:"white",border:"1px solid black"})})
  107. //失去焦点
  108. //css样式可以通过addClass()来添加
  109. $("input[@type=text],textarea,input[@type=password]")
  110. .blur(function(){$(this).css({background:"white",border:"1px solid black"});});
  111. }
  112. });
  113. </script>
  114. <style type="text/css">
  115. .over{
  116. font-size:large;
  117. font-style:italic;
  118. }
  119. .out{
  120. font-size:small;
  121. }
  122. </style>
  123. </head>
  124. <body >
  125. <div id="display">demo</div>
  126. <div id="test">
  127. <p>adfa<a>dfasfa</a>sdfasdf</p>
  128. <p>adfadfasfasdfasdf</p>
  129. <p>adfadfasfasdfasdf</p>
  130. <p>adfadfasfasdfasdf</p>
  131. </div>
  132. <form id="theForm">
  133. isString<div><input type="text" id="username" onblur="isString(this.value)"/></div>
  134. isInteger<div><input type="text" id="password" onblur="isInteger(this.value)"/></div>
  135. isTelephone<div><input type="text" id="telephone" onblur="isTelephone(this.value)"/></div>
  136. isMobile<div><input type="text" id="mobile" onblur="isMobile(this.value)"/></div>
  137. isEmail<div><input type="text" id="email" onblur="isEmail(this.value)"/></div>
  138. isUri<div><input type="text" id="uri" onblur="isUri(this.value)"/></div>
  139. <div><input type="button" value="Validata" onclick="return validata();"  /></div>
  140. </form>
  141. </body>

</html>

原文地址：http://www.cnblogs.com/luluping/archive/2008/05/04/1181434.html

2014028-jQuery与正则表达式[转]的更多相关文章

  1. JQuery之正则表达式

    1.定义正则表达式 /.../  用于定义正则表达式 /.../g 表示全局匹配 /.../i 表示不区分大小写 /.../m 表示多行匹配 2.匹配正则表达式 非全局模式,不分组 var patte ...

  2. jQuery 之正则表达式篇

    从本文开始,我将陆续的更新关于jQuery源代码的博客.首先,jQuery源代码分析一直是我的一个计划和追求.查看jQuery源代码,探索大牛们深邃的思想,精神的碰撞.Google 搜索不难发现,探索 ...

  3. jquery常用正则表达式

    1.邮箱验证正则表达式:/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/ 2.手机验证正则表达式:/^ ...

  4. Jquery Validate 正则表达式实用验证代码

    jQuery.validate 的正则验证功能,包括手机号码.电话号码.邮政编码.QQ号码.IP地址.字母和数字.中文的验证等. 手机号码验证 以下为引用内容:  jQuery.validator.a ...

  5. 一些常用的jquery数字正则表达式

    使用 <script type="text/javascript"> function validate(){ var reg = new RegExp("^ ...

  6. Jquery Validate 正则表达式实用验证代码常用的

    jQuery.validate 的正则验证功能,包括手机号码.电话号码.邮政编码.QQ号码.IP地址.字母和数字.中文的验证等 手机号码验证 以下为引用内容: 代码如下: jQuery.validat ...

  7. [jQuery]常用正则表达式

    验证网址:^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$电子 ...

  8. JQuery使用正则表达式验证手机号，邮箱，身份证（含有港澳台），网址

    自己对正则验证也没系统用过,这次自己做个demo,一下子把这些全都用上了,下次有需要直接来拿了. 以下代码是在页面使用JQuery进行验证的,也有在后台进行验证的,可以试试,都一样的原理. 直接上代码 ...

  9. jquery:给正则表达式添加变量

    http://www.2cto.com/kf/201402/277766.html 正则表达式普通用法:var checkString=/^.*\S+.*$/;  //注意正则表达式没有引号 chec ...

  10. jquery的正则表达式

    正则表达式 位置: ^      开头 $      结尾 次数: *      0或多个 +      1或多个 ?      0或1个 {n}     就是n个 {n,}   至少n个 {n,m} ...

随机推荐

  1. NGINX源代码剖析 之 CPU绑定(CPU亲和性)

    作者:邹祁峰 邮箱:Qifeng.zou.job@gmail.com 博客:http://blog.csdn.net/qifengzou 日期:2014.06.12 18:44 转载请注明来自&quo ...

  2. Android开发代码混淆经验（Eclipse）

    为了防止自己的劳动成果被别人窃取,混淆代码能有效防止被反编译,下面来总结以下混淆代码的步骤: 2.编辑项目下的proguard-project.txt,添加不需要混淆的规则(model.泛型.反射.第 ...

  3. 【JavaScript】JavaScript Promise 探微

    http://www.html-js.com/article/Promise-translation-JavaScript-Promise-devil-details 原文链接:JavaScript ...

  4. TP复习7

    //编写search方法,实现搜索 public function search(){ //获取post的数据,根据数据组装查询的条件,根据条件从数据库中获取数据,返回给页面中遍历 if(isset( ...

  5. zoj 3627 Treasure Hunt II （贪心）

    本文出自   http://blog.csdn.net/shuangde800 题目链接:zoj-3627 题意 直线上有n个城市, 第i个城市和i+1个城市是相邻的.  每个城市都有vi的金币.   ...

  6. iOS开发——开发必备OC篇&彩票实战之精华讲解

    彩票实战之精华讲解 在这段时间自己研究并学习关于彩票项目开发的时候遇到各种坑,各种技术点以前或许之前用过但是却用起来不是那么熟悉,所以没遇到一个重点的地方我就会记录一下,希望不会再有下次. 本文主要讲 ...

  7. java 图的邻接矩阵

    有向图 在有向图中,结点对<x ,y>是有序的,结点对<x,y>称为从结点x到结点y的一条有向边,因此,<x,y>与<y,x>是两条不同的边.有向图中的 ...

  8. mysql博客

    http://blog.csdn.net/mchdba/article/details/9190771 本帖最后由 mchdba 于 2014-2-10 17:15 编辑 公司招聘MySQL DBA, ...

  9. 使用NIO提升性能

    NIO是New I/O的简称,与旧式的基于流的I/O方法相对,从名字看,它表示新的一套Java I/O标准. 具有以下特性: 传统Java IO,它是阻塞的,低效的.那么Java NIO和传统Java ...

  10. 通过layer的contents属性来实现uiimageview的淡入切换

    #import "ViewController.h" @interface ViewController () @property(nonatomic,strong)CALayer ...