表单验证

Dom实现表单验证

通过在form标签的submit上绑定一个onclick事件，用户点击事，触发这个事件，执行Checkvalid()函数进行对表单中的元素值验证，验证通过之后，继续让submit之行自己的事件，post表单内容到服务器，如果验证不通过，则返回false，终止submit继续提交

  • 代码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .iterm {
  8.             width: 250px;
  9.             height: 60px;
  10.             position: relative;
  11.         }
  12.         .iterm input {
  13.             width: 200px;
  14.         }
  15.         .iterm span {
  16.             position: absolute;
  17.             top: 20px;
  18.             left: 0px;
  19.             background-color: red;
  20.             font-size: 8px;
  21.             color: white;
  22.             display: inline-block;
  23.             width: 202px;
  24.  
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29.     <div>
  30.         <form>
  31.             <div class="iterm">
  32.                 <input class="c1" type="text" name="username" lable="用户名"/>
  33.                 <!--<span>用户名不能为空</span>-->
  34.             </div>
  35.            <div class="iterm">
  36.                <input class="c1" type="password" name="password" lable="密码" />
  37.                <!--<span>密码不能为空</span>-->
  38.            </div>
  39.         <input type="submit" name="提交">
  40.         </form>
  41.  
  42.     </div>
  43. </body>
  44. <script src="jquery-1.12.4.js"></script>
  45. <script>
  46.     $(function() {
  47.         //当页面框架加载完成之后，自动执行
  48.         BindCheckvalid();
  49.     });
  50.     function BindCheckvalid() {
  51.         $('form input[type="submit"]').click(function () {
  52.             //点击submit，执行下面内容
  53.             var flag = true;
  54.             $('form .iterm span').remove();    // 清空之前出现的错误提示
  55.             $('form .c1').each(function() {
  56.                 //每一个元素执行匿名函数
  57.                 //this 循环的当前元素
  58.                var val =  $(this).val();
  59.                 if (val.length <= 0){
  60.                    var name =  $(this).attr('lable');
  61.                    var tag = document.createElement('span');
  62.                     tag.innerText = name + '不能为空';
  63.                     $(this).after(tag);
  64.                     flag = false;
  65.                     return flag;        //只要有一个验证不合法，终止验证
  66.                 };
  67.         });
  68.             return false;
  69.     });
  70.     };
  71.  
  72. </script>
  73.  
  74. </html>

jQuery实现表单验证

  • html代码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         .item{
  8.             width: 250px;
  9.             height: 60px;
  10.             position: relative;
  11.         }
  12.         .item input{
  13.             width: 200px;
  14.         }
  15.         .item span{
  16.             position: absolute;
  17.             top: 20px;
  18.             left: 0px;
  19.             font-size: 8px;
  20.             background-color: indianred;
  21.             color: white;
  22.             display: inline-block;
  23.             width: 200px;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.  
  29.     <div>
  30.         <form id="form1">
  31.             <div class="item">
  32.                 <input class="c1" type="text" name="username" label="用户名" require="true" min-len="6"/>
  33.             </div>
  34.             <div class="item">
  35.                 <input  class="c1" type="password" name="pwd" label="密码"/>
  36.             </div>
  37.             <div class="item">
  38.                 <input  class="c1" type="text" name="phone" label="手机" require="true" phone="true"/>
  39.             </div>
  40.             <input type="submit" value="提交" />
  41.         </form>
  42.  
  43.     </div>
  44.  
  45.     <script src="jquery-1.12.4.js"></script>
  46.     <script src="commons1.js"></script>
  47.     <script>
  48.         $(function(){
  49.             $.valid('#form1');
  50.         });
  51.  
  52.     </script>
  53. </body>
  54. </html>
  • js代码
  1. /**
  2.  * Created by fuzj on 2016/9/3.
  3.  */
  4. (function(jq){
  5.  
  6.     function ErrorMessage(inp,message){
  7.         var tag = document.createElement('span');
  8.         tag.innerText = message;
  9.         inp.after(tag);
  10.     }
  11.  
  12.     jq.extend({
  13.         valid:function(form){
  14.             // #form1 $('#form1')
  15.             jq(form).find(':submit').click(function(){
  16.  
  17.                 jq(form).find('.item span').remove();
  18.  
  19.                 var flag = true;
  20.                 jq(form).find(':text,:password').each(function(){
  21.  
  22.                     var require = $(this).attr('require');
  23.                     if(require){
  24.                         var val = $(this).val();
  25.  
  26.                         if(val.length<=0){
  27.                             var label = $(this).attr('label');
  28.                             ErrorMessage($(this),label + "不能为空");
  29.                             flag = false;
  30.                             return false;
  31.                         }
  32.  
  33.                         var minLen = $(this).attr('min-len');
  34.                         if(minLen){
  35.                             var minLenInt = parseInt(minLen);
  36.                             if(val.length<minLenInt){
  37.                                 var label = $(this).attr('label');
  38.                                 ErrorMessage($(this),label + "长度最小为"+ minLen);
  39.                                 flag = false;
  40.                                 return false;
  41.                             }
  42.                             //json.stringify()
  43.                             //JSON.parse()
  44.                         }
  45.  
  46.                         var phone = $(this).attr('phone');
  47.                         if(phone){
  48.                             // 用户输入内容是否是手机格式
  49.                             var phoneReg = /^1[3|5|8]\d{9}$/;
  50.                             if(!phoneReg.test(val)){
  51.                                 var label = $(this).attr('label');
  52.                                 ErrorMessage($(this),label + "格式错误");
  53.                                 flag = false;
  54.                                 return false;
  55.                             }
  56.                         }
  57.  
  58.                         // 1、html自定义标签属性
  59.                         // 增加验证规则+错误提示
  60.  
  61.                     }
  62.                     // 每一个元素执行次匿名函数
  63.                     // this
  64.                     //console.log(this,$(this));
  65.                     /*
  66.                     var val = $(this).val();
  67.                     if(val.length<=0){
  68.                         var label = $(this).attr('label');
  69.                         var tag = document.createElement('span');
  70.                         tag.innerText = label + "不能为空";
  71.                         $(this).after(tag);
  72.                         flag = false;
  73.                         return false;
  74.                     }
  75.                     */
  76.                 });
  77.  
  78.                 return flag;
  79.             });
  80.         }
  81.     });
  82. })(jQuery);

滚动菜单

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.  
  8.         body{
  9.             margin: 0px;
  10.         }
  11.         img {
  12.             border: 0;
  13.         }
  14.         ul{
  15.             padding: 0;
  16.             margin: 0;
  17.             list-style: none;
  18.         }
  19.         .clearfix:after {
  20.             content: ".";
  21.             display: block;
  22.             height: 0;
  23.             clear: both;
  24.             visibility: hidden;
  25.         }
  26.  
  27.         .wrap{
  28.             width: 980px;
  29.             margin: 0 auto;
  30.         }
  31.  
  32.         .pg-header{
  33.             background-color: #303a40;
  34.             -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
  35.             -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
  36.             box-shadow: 0 2px 5px rgba(0,0,0,.2);
  37.         }
  38.         .pg-header .logo{
  39.             float: left;
  40.             padding:5px 10px 5px 0px;
  41.         }
  42.         .pg-header .logo img{
  43.             vertical-align: middle;
  44.             width: 110px;
  45.             height: 40px;
  46.  
  47.         }
  48.         .pg-header .nav{
  49.             line-height: 50px;
  50.         }
  51.         .pg-header .nav ul li{
  52.             float: left;
  53.         }
  54.         .pg-header .nav ul li a{
  55.             display: block;
  56.             color: #ccc;
  57.             padding: 0 20px;
  58.             text-decoration: none;
  59.             font-size: 14px;
  60.         }
  61.         .pg-header .nav ul li a:hover{
  62.             color: #fff;
  63.             background-color: #425a66;
  64.         }
  65.         .pg-body{
  66.  
  67.         }
  68.         .pg-body .catalog{
  69.             position: absolute;
  70.             top:60px;
  71.             width: 200px;
  72.             background-color: #fafafa;
  73.             bottom: 0px;
  74.         }
  75.         .pg-body .catalog.fixed{
  76.             position: fixed;
  77.             top:10px;
  78.         }
  79.  
  80.         .pg-body .catalog .catalog-item.active{
  81.             color: #fff;
  82.             background-color: #425a66;
  83.         }
  84.  
  85.         .pg-body .content{
  86.             position: absolute;
  87.             top:60px;
  88.             width: 700px;
  89.             margin-left: 210px;
  90.             background-color: #fafafa;
  91.             overflow: auto;
  92.         }
  93.         .pg-body .content .section{
  94.             height: 500px;
  95.         }
  96.     </style>
  97. </head>
  98. <body>
  99.  
  100.     <div class="pg-header">
  101.         <div class="wrap clearfix">
  102.             <div class="logo">
  103.                 <a href="#">
  104.                     <img src="">
  105.                 </a>
  106.             </div>
  107.             <div class="nav">
  108.                 <ul>
  109.                     <li>
  110.                         <a  href="#">首页</a>
  111.                     </li>
  112.                     <li>
  113.                         <a  href="#">功能一</a>
  114.                     </li>
  115.                     <li>
  116.                         <a  href="#">功能二</a>
  117.                     </li>
  118.                 </ul>
  119.             </div>
  120.  
  121.         </div>
  122.     </div>
  123.  
  124.     <div class="pg-body">
  125.         <div class="wrap">
  126.             <div class="catalog">
  127.                 <div class="catalog-item" auto-to="function1"><a>第1张</a></div>
  128.                 <div class="catalog-item" auto-to="function2"><a>第2张</a></div>
  129.                 <div class="catalog-item" auto-to="function3"><a>第3张</a></div>
  130.             </div>
  131.  
  132.             <div class="content">
  133.                 <div menu="function1" class="section" style='background-color:green;'>
  134.                     <h1>第一章</h1>
  135.                 </div>
  136.                 <div menu="function2" class="section" style='background-color:yellow;'>
  137.                     <h1>第二章</h1>
  138.                 </div>
  139.                 <div menu="function3" class="section" style='background-color:red;'>
  140.                     <h1>第三章</h1>
  141.                 </div>
  142.             </div>
  143.         </div>
  144.  
  145.     </div>
  146.  
  147.     <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
  148.     <script type="text/javascript">
  149.  
  150.         $(function(){
  151.             // 自动执行
  152.             Init();
  153.         });
  154.  
  155.         function Init(){
  156.  
  157.             $(window).scroll(function() {
  158.                 // 监听窗口滚动事件
  159.  
  160.                 // 获取滚动条高度
  161.                 var scrollTop = $(window).scrollTop();
  162.  
  163.                 // 当滚动到50像素时，左侧带菜单固定
  164.                 if(scrollTop > 50){
  165.                     $('.catalog').addClass('fixed');
  166.                 }else{
  167.                     $('.catalog').children().removeClass('active');
  168.                     $('.catalog').removeClass('fixed');
  169.                 }
  170.  
  171.                 // 循环所有的内容
  172.                 $('.content').children().each(function(){
  173.                     // 当前标签距离顶部高度
  174.                     var offSet = $(this).offset(); // 高度，左边有多远
  175.                     // offSet.top
  176.                     // offSet.left
  177.  
  178.                     // 自身高度
  179.                     var height = $(this).height();
  180.  
  181.                     //offSet<滚动高度<offSet+height
  182.  
  183.                     // 当前内容位于用户阅览区
  184.                     if(scrollTop>offSet.top && scrollTop< offSet.top + height){
  185.                         // $(this) 当前内容标签
  186.                         /*
  187.                         var target = $(this).attr('menu');
  188.                         $('.catalog').find('div[auto-to="'+target+'"]').addClass('active').siblings().removeClass('active');
  189.                         return false;
  190.                         */
  191.  
  192.                         var docHeight = $(document).height();
  193.                         var winHeight = $(window).height();
  194.                         // 如果，滚轮到达底部，则显示最后一个菜单
  195.                         if(docHeight == winHeight+scrollTop)
  196.                         {
  197.                             $('.catalog').find('div:last-child').addClass('active').siblings().removeClass('active');
  198.                         }else{
  199.                             var target = $(this).attr('menu');
  200.                             $('.catalog').find('div[auto-to="'+target+'"]').addClass('active').siblings().removeClass('active');
  201.                         }
  202.                         return false;
  203.  
  204.                     }
  205.                 });
  206.  
  207.             });
  208.  
  209.         }
  210.  
  211.     </script>
  212. </body>
  213. </html>

补充：Javascript正则表达式

定义正则表达式

  • /.../ 用于定义正则表达式
  • /.../g 表示全局匹配
  • /.../i 表示不区分大小写
  • /.../m 表示多行匹配 JS正则匹配时本身就是支持多行，此处多行匹配只是影响正则表达式和\(，m模式也会使用^\)来匹配换行的内容)
  1. var pattern = /^Java\w*/gm;
  2. var text = "JavaScript is more fun than \nJavaEE or JavaBeans!";
  3. pattern.exec(text)
  4. ["JavaScript"]
  5. pattern.exec(text)
  6. ["JavaEE"]
  7. pattern.exec(text)
  8. null
  9. var pattern = /^Java\w*/g;
  10. undefined
  11. var text = "JavaScript is more fun than \nJavaEE or JavaBeans!";
  12. undefined
  13. pattern.exec(text)
  14. ["JavaScript"]
  15. pattern.exec(text)
  16. null

注：定义正则表达式也可以 reg= new RegExp()

匹配正则

JavaScript中支持正则表达式，其主要提供了两个功能：

  • test(string) 检查字符串中是否和正则匹配
  1. n = 'uui99sdf'
  2. reg = /\d+/
  3. reg.test(n)  ---> true
  4.  
  5. # 只要正则在字符串中存在就匹配，如果想要开头和结尾匹配的话，就需要在正则前后加 ^和$
  • exec(string) 获取正则表达式匹配的内容，如果未匹配，值为null，否则，获取匹配成功的数组
  1. 获取正则表达式匹配的内容，如果未匹配，值为null，否则，获取匹配成功的数组。
  1. 非全局模式
  2.     获取匹配结果数组，注意：第一个元素是第一个匹配的结果，后面元素是正则子匹配（正则内容分组匹配）
  3.     var pattern = /\bJava\w*\b/;
  4.     var text = "JavaScript is more fun than Java or JavaBeans!";
  5.     result = pattern.exec(text)
  6.  
  7.     var pattern = /\b(Java)\w*\b/;
  8.     var text = "JavaScript is more fun than Java or JavaBeans!";
  9.     result = pattern.exec(text)
  10.  
  11. 全局模式
  12.     需要反复调用exec方法，来一个一个获取结果，直到匹配获取结果为null表示获取完毕
  13.     var pattern = /\bJava\w*\b/g;
  14.     var text = "JavaScript is more fun than Java or JavaBeans!";
  15.     result = pattern.exec(text)
  16.  
  17.     var pattern = /\b(Java)\w*\b/g;
  18.     var text = "JavaScript is more fun than Java or JavaBeans!";
  19.     result = pattern.exec(text)
  • 字符串相关操作
  1. obj.search(regexp)                   获取索引位置，搜索整个字符串，返回匹配成功的第一个位置(g模式无效)
  2. obj.match(regexp)                    获取匹配内容，搜索整个字符串，获取找到第一个匹配内容，如果正则是g模式找到全部
  3. obj.replace(regexp, replacement)     替换匹配替换，正则中有g则替换所有，否则只替换第一个匹配项，
  4.                                         $数字：匹配的第n个组内容；
  5.                                           $&：当前匹配的内容；
  6.                                           $`：位于匹配子串左侧的文本；
  7.                                           $'：位于匹配子串右侧的文本
  8.                                           $$：直接量$符号
  • 常用正则表达式
  1. 整数或者小数：^[0-9]+\.{0,1}[0-9]{0,2}$
  2. 只能输入数字："^[0-9]*$"。
  3. 只能输入n位的数字："^\d{n}$"。
  4. 只能输入至少n位的数字："^\d{n,}$"。
  5. 只能输入m~n位的数字：。"^\d{m,n}$"
  6. 只能输入零和非零开头的数字："^(0|[1-9][0-9]*)$"。
  7. 只能输入有两位小数的正实数："^[0-9]+(.[0-9]{2})?$"。
  8. 只能输入有1~3位小数的正实数："^[0-9]+(.[0-9]{1,3})?$"。
  9. 只能输入非零的正整数："^\+?[1-9][0-9]*$"。
  10. 只能输入非零的负整数："^\-[1-9][]0-9"*$。
  11. 只能输入长度为3的字符："^.{3}$"。
  12. 只能输入由26个英文字母组成的字符串："^[A-Za-z]+$"。
  13. 只能输入由26个大写英文字母组成的字符串："^[A-Z]+$"。
  14. 只能输入由26个小写英文字母组成的字符串："^[a-z]+$"。
  15. 只能输入由数字和26个英文字母组成的字符串："^[A-Za-z0-9]+$"。
  16. 只能输入由数字、26个英文字母或者下划线组成的字符串："^\w+$"。
  17. 验证用户密码："^[a-zA-Z]\w{5,17}$"正确格式为：以字母开头，长度在6~18之间，只能包含字符、数字和下划线。
  18. 验证是否含有^%&',;=?$\"等字符："[^%&',;=?$\x22]+"。
  19. 只能输入汉字："^[\u4e00-\u9fa5]{0,}$"
  20. 验证Email地址："^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"。
  21. 验证InternetURL："^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$"。
  22. 验证电话号码："^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$"正确格式为："XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX"。
  23. 验证身份证号（15位或18位数字）："^\d{15}|\d{18}$"。
  24. 验证一年的12个月："^(0?[1-9]|1[0-2])$"正确格式为："01"～"09"和"1"～"12"。
  25. 验证一个月的31天："^((0?[1-9])|((1|2)[0-9])|30|31)$"正确格式为；"01"～"09"和"1"～"31"。 匹配中文字符的正则表达式： [\u4e00-\u9fa5]
  26.  
  27. 匹配双字节字符(包括汉字在内)：[^\x00-\xff]
  28.  
  29. 匹配空行的正则表达式：\n[\s| ]*\r
  30.  
  31. 匹配html标签的正则表达式：<(.*)>(.*)<\/(.*)>|<(.*)\/>
  32.  
  33. 匹配首尾空格的正则表达式：(^\s*)|(\s*$)
  34.  
  35. 匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
  36.  
  37. 匹配网址URL的正则表达式：http://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?
  38.  
  39. 利用正则表达式限制网页表单里的文本框输入内容：
  40.  
  41. 用正则表达式限制只能输入中文：onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))"
  42.  
  43. 用正则表达式限制只能输入全角字符： onkeyup="value=value.replace(/[^\uFF00-\uFFFF]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\uFF00-\uFFFF]/g,''))"
  44.  
  45. 用正则表达式限制只能输入数字：onkeyup="value=value.replace(/[^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"
  46.  
  47. 用正则表达式限制只能输入数字和英文：onkeyup="value=value.replace(/[\W]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"
  48.  
  49. 匹配中文字符的正则表达式： [\u4e00-\u9fa5]
  50.  
  51. 匹配双字节字符(包括汉字在内)：[^\x00-\xff]
  52.  
  53. 匹配空白行的正则表达式：\n\s*\r
  54.  
  55. 匹配HTML标记的正则表达式：<(\S*?)[^>]*>.*?|<.*? /> 
  56.  
  57. 匹配首尾空白字符的正则表达式：^\s*|\s*$
  58.  
  59. 匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
  60.  
  61. 匹配网址URL的正则表达式：[a-zA-z]+://[^\s]*
  62.  
  63. 匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
  64.  
  65. 匹配国内电话号码：\d{3}-\d{8}|\d{4}-\d{7}
  66.  
  67. 匹配腾讯QQ号：[1-9][0-9]{4,}
  68.  
  69. 匹配中国邮政编码：[1-9]\d{5}(?!\d)
  70.  
  71. 匹配身份证：\d{15}|\d{18}
  72.  
  73. Email : /^\w+([-+.]\w+)*@\w+([-.]\\w+)*\.\w+([-.]\w+)*$/
  74.  
  75. isEmail1 : /^\w+([\.\-]\w+)*\@\w+([\.\-]\w+)*\.\w+$/;
  76.  
  77. isEmail2 : /^.*@[^_]*$/;
  78.  
  79. Phone : /^((\(\d{3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}$/
  80.  
  81. Mobile : /^((\(\d{3}\))|(\d{3}\-))?13\d{9}$/
  82.  
  83. Url : /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/
  84.  
  85. IdCard : /^\d{15}(\d{2}[A-Za-z0-9])?$/
  86.  
  87. Currency : /^\d+(\.\d+)?$/
  88.  
  89. Number : /^\d+$/
  90.  
  91. Code : /^[1-9]\d{5}$/
  92.  
  93. QQ : /^[1-9]\d{4,8}$/
  94.  
  95. Integer : /^[-\+]?\d+$/
  96.  
  97. Double : /^[-\+]?\d+(\.\d+)?$/
  98.  
  99. English : /^[A-Za-z]+$/
  100.  
  101. Chinese : /^[\u0391-\uFFE5]+$/
  102.  
  103. UnSafe : /^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/
  104.  
  105. PassWord :^[\\w]{6,12}$
  106.  
  107. ZipCode : ^[\\d]{6}
  108.  
  109. /^(\+\d+ )?(\(\d+\) )?[\d ]+$/; //这个是国际通用的电话号码判断
  110.  
  111. /^(1[0-2]\d|\d{1,2})$/; //这个是年龄的判断
  112.  
  113. /^\d+\.\d{2}$/;  //这个是判断输入的是否为货币值
  114.  
  115.  <!-- IP地址有效性验证函数-->
  116.  
  117.  <script language=javascript runat=server>
  118.  
  119.     ip_ip = '(25[0-5]|2[0-4]\\d|1\\d\\d|\\d\\d|\\d)';
  120.  
  121.     ip_ipdot = ip + '\\.';
  122.  
  123.     isIPaddress = new RegExp('^'+ip_ipdot+ip_ipdot+ipdot+ip_ip+'$');
  124.  
  125. </script>
  126.  
  127. 匹配空行的正则表达式：\n[\s| ]*\r
  128.  
  129. 匹配HTML标记的正则表达式：/<(.*)>.*<\/\1>|<(.*) \/>/
  130.  
  131. 匹配首尾空格的正则表达式：(^\s*)|(\s*$)
  132.  
  133. 匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
  134.  
  135. 匹配网址URL的正则表达式：http://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?
  1. 前端插件介绍

jquery使用案例的更多相关文章

  1. 中国省市区地址三级联动jQuery插件 案例下载

    中国省市区地址三级联动jQuery插件 案例下载 distpicker 是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. 安装 可以通过npm ...

  2. jQuery常见案例

    jQuery常见案例 通过jQuery实现全选,反选取消: 选择 地址 端口 1.1.1.1 80 1.1.1.1 80 1.1.1.1 80 1.1.1.1 80 代码实现 <body> ...

  3. Jquery 分页案例

    Jquery    分页案例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /& ...

  4. jQuery的案例及必知重要的jQuery选择器

    Jquery能做什么 访问和操作DOM元素 控制页面样式 对页面事件进行处理 扩展新的jQuery插件 与Ajax技术完美结合 Jquery的优势 体积小,压缩后只有100KB左右 l强大的选择器 出 ...

  5. jQuery Mobile案例,最近用Moon.Web和Moon.Orm做了一套系统

      一.简介 先说说,我们的主题.jQuery Mobile,最近用Moon.Web和Moon.Orm做了一套系统 jQuery Mobile是jQuery 在手机上和平板设备上的版本.jQuery ...

  6. jquery选择器案例

    一.预期效果 实现一个效果,如下. 品牌列表默认精简显示,单击“显示全部品牌”按钮显示全部品牌,同时列表将推荐的品牌的名字高亮显示,按钮里的文字变成“精简显示品牌”.再次点击“精简显示品牌”回到初始页 ...

  7. jQuery 简单案例

    案例一:全选.反选.取消实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  8. 毕业设计---json,Struts,ajax以及JQuery简单案例

    <!-- Struts2的xml文件配置 --><struts> <package name="default" namespace="/& ...

  9. jQuery高级案例

    一.广告的自动显示与隐藏 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

随机推荐

  1. UITableView cell复用出错问题 页面滑动卡顿问题 & 各杂七杂八问题

    UITableView 的cell 复用机制节省了内存,但是有时对于多变的自定义cell,重用时会出现界面出错(例如复用出错,出现cell混乱重影).滑动卡顿等问题,这里只简单敲下几点复用出错时的解决 ...

  2. javascript 设置input框只读属性 获取disabled后的值并传给后台

    input只读属性   有两种方式可以实现input的只读效果:disabled 和 readonly. 自然两种出来的效果都是只能读取不能编辑,可是两者有很大不同. Disabled说明该input ...

  3. Node.js 教程 06 - 函数

    前言: 本篇介绍的是Node.js中的函数,相对于上一篇会简单一点,其实和我们Javascript中的function无异. 好了,废话不多说了,我们进入正题吧. Node.js函数: [示例1:创建 ...

  4. Oracle XMLTable 使用教程与实例

    从Oracle 10g开始,甲骨文公司新增了XQuery和XMLTable两个功能作为处理XML的武器. XMLQuery一样,您可以使用XQuery语言构造XML数据和查询XML和关系数据.你可以使 ...

  5. 在Ubuntu X64上编译Hadoop

    在之前的文章中介绍了如何直接在Ubuntu中安装Hadoop.但是对于64位的Ubuntu来说,官方给出的Hadoop包是32位的,运行时会得到警告: WARN util.NativeCodeLoad ...

  6. MySQL优化一例

    DELIMITER $$ USE `xxx`$$ DROP FUNCTION IF EXISTS `F_getBuluDates`$$ CREATE DEFINER=`root`@`localhost ...

  7. C# 闭包问题-你被”坑“过吗？

    引言 闭包是什么?以前看面试题的时候才发现这个名词. 闭包在实际项目中会有什么问题?现在就让我们一起来看下这个不太熟悉的名词. 如果在实际工作中用到了匿名函数和lamada表达式,那你就应该高度注意啦 ...

  8. 【js】初入AJAX

    AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScript和 ...

  9. java中transient关键字的作用

    Java有个特点就是序列化,简单地来说就是可以将这个类存储在物理空间(当然还是以文件的形式存在),那么当你从本地还原这个文件时,你可以将它转换为它本身.这可以极大地方便网络上的一些操作,但同时,因为涉 ...

  10. [LeetCode] Anagrams 错位词

    Given an array of strings, return all groups of strings that are anagrams. Note: All inputs will be ...