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. 《linux 内核全然剖析》 chapter 2 微型计算机组成结构

    微型计算机组成结构 系统的基本组成: 软件是一种控制硬件操作和动作的指令流. 2.1 微型计算机的组成原理 当中CPU通过地址线,数据线,和控制信号线组成的内部总线与系统其它部分进行数据通信.地址线用 ...

  2. 【JavaScript】javascript常用的东西

    DOM编程.AJAX编程.异步编程(nodejs会涉及的相对多一点,事件.ajax) 函数.函数表达式.回调函数是基础. JavaScript的函数是一个核心. 回调函数有点类似于Android中的回 ...

  3. TypeHandler的简单实例

    转自:http://ccchhhlll1988-163-com.iteye.com/blog/1420149 TypeHandler是MyBatis config文件中可选的配置选项,其可以对实体属性 ...

  4. HTML+CSS+JS基础知识

    HTML+CSS+JS基础知识 目录 对HTML+CSS+JS的理解 基础知识 对HTML+CSS+JS的理解 基础知识 插入样式表的三种方式 外部样式表:<link rel="sty ...

  5. python 调试工具

    https://github.com/what-studio/profiling http://blog.jobbole.com/51062/ http://blog.jobbole.com/5209 ...

  6. 基于jQuery标题有打字效果的焦点图

    给大家分享一款基于jQuery标题有打字效果的焦点图.之前为大家分享了好多jquery的焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗 ...

  7. DOS命令如何进入指定的下一级目录？

    如cd E:\java workspace\test\src 如何进入E盘 ,直接 E:

  8. LeetCode18 4Sum

    题意: Given an array S of n integers, are there elements a, b, c, and d in S such that a + b + c + d = ...

  9. AngularJS特性

    如果你不熟悉什么是Angular.js的话,小编我强烈推荐你阅读 Javascript教程:AngularJS的五个超酷特性.简单来说Angular.js是google开发者设计和开发的一套前端开发框 ...

  10. Intervals poj 1201 差分约束系统

    Intervals Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 22503   Accepted: 8506 Descri ...