首页 > 代码库 > jquery使用案例
jquery使用案例
表单验证
Dom实现表单验证
通过在form标签的submit上绑定一个onclick事件，用户点击事，触发这个事件，执行Checkvalid()函数进行对表单中的元素值验证，验证通过之后，继续让submit之行自己的事件，post表单内容到服务器，如果验证不通过，则返回false，终止submit继续提交
- 代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .iterm { width: 250px; height: 60px; position: relative; } .iterm input { width: 200px; } .iterm span { position: absolute; top: 20px; left: 0px; background-color: red; font-size: 8px; color: white; display: inline-block; width: 202px; } </style></head><body> <div> <form> <div class="iterm"> <input class="c1" type="text" name="username" lable="用户名"/> <!--<span>用户名不能为空</span>--> </div> <div class="iterm"> <input class="c1" type="password" name="password" lable="密码" /> <!--<span>密码不能为空</span>--> </div> <input type="submit" name="提交"> </form> </div></body><script src="jquery-1.12.4.js"></script><script> $(function() { //当页面框架加载完成之后，自动执行 BindCheckvalid(); }); function BindCheckvalid() { $(‘form input[type="submit"]‘).click(function () { //点击submit，执行下面内容 var flag = true; $(‘form .iterm span‘).remove(); // 清空之前出现的错误提示 $(‘form .c1‘).each(function() { //每一个元素执行匿名函数 //this 循环的当前元素 var val = $(this).val(); if (val.length <= 0){ var name = $(this).attr(‘lable‘); var tag = document.createElement(‘span‘); tag.innerText = name + ‘不能为空‘; $(this).after(tag); flag = false; return flag; //只要有一个验证不合法，终止验证 }; }); return false; }); };</script></html>
jQuery实现表单验证
- html代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .item{ width: 250px; height: 60px; position: relative; } .item input{ width: 200px; } .item span{ position: absolute; top: 20px; left: 0px; font-size: 8px; background-color: indianred; color: white; display: inline-block; width: 200px; } </style></head><body> <div> <form id="form1"> <div class="item"> <input class="c1" type="text" name="username" label="用户名" require="true" min-len="6"/> </div> <div class="item"> <input class="c1" type="password" name="pwd" label="密码"/> </div> <div class="item"> <input class="c1" type="text" name="phone" label="手机" require="true" phone="true"/> </div> <input type="submit" value="提交" /> </form> </div> <script src="jquery-1.12.4.js"></script> <script src="commons1.js"></script> <script> $(function(){ $.valid(‘#form1‘); }); </script></body></html>
- js代码
/** * Created by fuzj on 2016/9/3. */(function(jq){ function ErrorMessage(inp,message){ var tag = document.createElement(‘span‘); tag.innerText = message; inp.after(tag); } jq.extend({ valid:function(form){ // #form1 $(‘#form1‘) jq(form).find(‘:submit‘).click(function(){ jq(form).find(‘.item span‘).remove(); var flag = true; jq(form).find(‘:text,:password‘).each(function(){ var require = $(this).attr(‘require‘); if(require){ var val = $(this).val(); if(val.length<=0){ var label = $(this).attr(‘label‘); ErrorMessage($(this),label + "不能为空"); flag = false; return false; } var minLen = $(this).attr(‘min-len‘); if(minLen){ var minLenInt = parseInt(minLen); if(val.length<minLenInt){ var label = $(this).attr(‘label‘); ErrorMessage($(this),label + "长度最小为"+ minLen); flag = false; return false; } //json.stringify() //JSON.parse() } var phone = $(this).attr(‘phone‘); if(phone){ // 用户输入内容是否是手机格式 var phoneReg = /^1[3|5|8]\d{9}$/; if(!phoneReg.test(val)){ var label = $(this).attr(‘label‘); ErrorMessage($(this),label + "格式错误"); flag = false; return false; } } // 1、html自定义标签属性 // 增加验证规则+错误提示 } // 每一个元素执行次匿名函数 // this //console.log(this,$(this)); /* var val = $(this).val(); if(val.length<=0){ var label = $(this).attr(‘label‘); var tag = document.createElement(‘span‘); tag.innerText = label + "不能为空"; $(this).after(tag); flag = false; return false; } */ }); return flag; }); } });})(jQuery);
滚动菜单
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0px; } img { border: 0; } ul{ padding: 0; margin: 0; list-style: none; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .wrap{ width: 980px; margin: 0 auto; } .pg-header{ background-color: #303a40; -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2); -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2); box-shadow: 0 2px 5px rgba(0,0,0,.2); } .pg-header .logo{ float: left; padding:5px 10px 5px 0px; } .pg-header .logo img{ vertical-align: middle; width: 110px; height: 40px; } .pg-header .nav{ line-height: 50px; } .pg-header .nav ul li{ float: left; } .pg-header .nav ul li a{ display: block; color: #ccc; padding: 0 20px; text-decoration: none; font-size: 14px; } .pg-header .nav ul li a:hover{ color: #fff; background-color: #425a66; } .pg-body{ } .pg-body .catalog{ position: absolute; top:60px; width: 200px; background-color: #fafafa; bottom: 0px; } .pg-body .catalog.fixed{ position: fixed; top:10px; } .pg-body .catalog .catalog-item.active{ color: #fff; background-color: #425a66; } .pg-body .content{ position: absolute; top:60px; width: 700px; margin-left: 210px; background-color: #fafafa; overflow: auto; } .pg-body .content .section{ height: 500px; } </style></head><body> <div class="pg-header"> <div class="wrap clearfix"> <div class="logo"> <a href="#"> <img src=""> </a> </div> <div class="nav"> <ul> <li> <a href="#">首页</a> </li> <li> <a href="#">功能一</a> </li> <li> <a href="#">功能二</a> </li> </ul> </div> </div> </div> <div class="pg-body"> <div class="wrap"> <div class="catalog"> <div class="catalog-item" auto-to="function1"><a>第1张</a></div> <div class="catalog-item" auto-to="function2"><a>第2张</a></div> <div class="catalog-item" auto-to="function3"><a>第3张</a></div> </div> <div class="content"> <div menu="function1" class="section" style=‘background-color:green;‘> <h1>第一章</h1> </div> <div menu="function2" class="section" style=‘background-color:yellow;‘> <h1>第二章</h1> </div> <div menu="function3" class="section" style=‘background-color:red;‘> <h1>第三章</h1> </div> </div> </div> </div> <script type="text/javascript" src="jquery-1.8.2.min.js"></script> <script type="text/javascript"> $(function(){ // 自动执行 Init(); }); function Init(){ $(window).scroll(function() { // 监听窗口滚动事件 // 获取滚动条高度 var scrollTop = $(window).scrollTop(); // 当滚动到50像素时，左侧带菜单固定 if(scrollTop > 50){ $(‘.catalog‘).addClass(‘fixed‘); }else{ $(‘.catalog‘).children().removeClass(‘active‘); $(‘.catalog‘).removeClass(‘fixed‘); } // 循环所有的内容 $(‘.content‘).children().each(function(){ // 当前标签距离顶部高度 var offSet = $(this).offset(); // 高度，左边有多远 // offSet.top // offSet.left // 自身高度 var height = $(this).height(); //offSet<滚动高度<offSet+height // 当前内容位于用户阅览区 if(scrollTop>offSet.top && scrollTop< offSet.top + height){ // $(this) 当前内容标签 /* var target = $(this).attr(‘menu‘); $(‘.catalog‘).find(‘div[auto-to="‘+target+‘"]‘).addClass(‘active‘).siblings().removeClass(‘active‘); return false; */ var docHeight = $(document).height(); var winHeight = $(window).height(); // 如果，滚轮到达底部，则显示最后一个菜单 if(docHeight == winHeight+scrollTop) { $(‘.catalog‘).find(‘div:last-child‘).addClass(‘active‘).siblings().removeClass(‘active‘); }else{ var target = $(this).attr(‘menu‘); $(‘.catalog‘).find(‘div[auto-to="‘+target+‘"]‘).addClass(‘active‘).siblings().removeClass(‘active‘); } return false; } }); }); } </script></body></html>
补充：Javascript正则表达式
定义正则表达式
- /.../ 用于定义正则表达式
- /.../g 表示全局匹配
- /.../i 表示不区分大小写
- /.../m 表示多行匹配 JS正则匹配时本身就是支持多行，此处多行匹配只是影响正则表达式和\(，m模式也会使用^\)来匹配换行的内容)
var pattern = /^Java\w*/gm;var text = "JavaScript is more fun than \nJavaEE or JavaBeans!";pattern.exec(text)["JavaScript"]pattern.exec(text)["JavaEE"]pattern.exec(text)nullvar pattern = /^Java\w*/g;undefinedvar text = "JavaScript is more fun than \nJavaEE or JavaBeans!";undefinedpattern.exec(text)["JavaScript"]pattern.exec(text)null
注：定义正则表达式也可以 reg= new RegExp()
匹配正则
JavaScript中支持正则表达式，其主要提供了两个功能：
- test(string) 检查字符串中是否和正则匹配
n = ‘uui99sdf‘reg = /\d+/reg.test(n) ---> true # 只要正则在字符串中存在就匹配，如果想要开头和结尾匹配的话，就需要在正则前后加 ^和$
- exec(string) 获取正则表达式匹配的内容，如果未匹配，值为null，否则，获取匹配成功的数组
获取正则表达式匹配的内容，如果未匹配，值为null，否则，获取匹配成功的数组。非全局模式 获取匹配结果数组，注意：第一个元素是第一个匹配的结果，后面元素是正则子匹配（正则内容分组匹配） var pattern = /\bJava\w*\b/; var text = "JavaScript is more fun than Java or JavaBeans!"; result = pattern.exec(text) var pattern = /\b(Java)\w*\b/; var text = "JavaScript is more fun than Java or JavaBeans!"; result = pattern.exec(text) 全局模式 需要反复调用exec方法，来一个一个获取结果，直到匹配获取结果为null表示获取完毕 var pattern = /\bJava\w*\b/g; var text = "JavaScript is more fun than Java or JavaBeans!"; result = pattern.exec(text) var pattern = /\b(Java)\w*\b/g; var text = "JavaScript is more fun than Java or JavaBeans!"; result = pattern.exec(text)
- 字符串相关操作
obj.search(regexp) 获取索引位置，搜索整个字符串，返回匹配成功的第一个位置(g模式无效)obj.match(regexp) 获取匹配内容，搜索整个字符串，获取找到第一个匹配内容，如果正则是g模式找到全部obj.replace(regexp, replacement) 替换匹配替换，正则中有g则替换所有，否则只替换第一个匹配项， $数字：匹配的第n个组内容； $&：当前匹配的内容； $`：位于匹配子串左侧的文本； $‘：位于匹配子串右侧的文本 $$：直接量$符号
- 常用正则表达式
整数或者小数：^[0-9]+\.{0,1}[0-9]{0,2}$只能输入数字："^[0-9]*$"。只能输入n位的数字："^\d{n}$"。只能输入至少n位的数字："^\d{n,}$"。只能输入m~n位的数字：。"^\d{m,n}$"只能输入零和非零开头的数字："^(0|[1-9][0-9]*)$"。只能输入有两位小数的正实数："^[0-9]+(.[0-9]{2})?$"。只能输入有1~3位小数的正实数："^[0-9]+(.[0-9]{1,3})?$"。只能输入非零的正整数："^\+?[1-9][0-9]*$"。只能输入非零的负整数："^\-[1-9][]0-9"*$。只能输入长度为3的字符："^.{3}$"。只能输入由26个英文字母组成的字符串："^[A-Za-z]+$"。只能输入由26个大写英文字母组成的字符串："^[A-Z]+$"。只能输入由26个小写英文字母组成的字符串："^[a-z]+$"。只能输入由数字和26个英文字母组成的字符串："^[A-Za-z0-9]+$"。只能输入由数字、26个英文字母或者下划线组成的字符串："^\w+$"。验证用户密码："^[a-zA-Z]\w{5,17}$"正确格式为：以字母开头，长度在6~18之间，只能包含字符、数字和下划线。验证是否含有^%&‘,;=?$\"等字符："[^%&‘,;=?$\x22]+"。只能输入汉字："^[\u4e00-\u9fa5]{0,}$"验证Email地址："^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"。验证InternetURL："^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$"。验证电话号码："^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$"正确格式为："XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX"。验证身份证号（15位或18位数字）："^\d{15}|\d{18}$"。验证一年的12个月："^(0?[1-9]|1[0-2])$"正确格式为："01"～"09"和"1"～"12"。验证一个月的31天："^((0?[1-9])|((1|2)[0-9])|30|31)$"正确格式为；"01"～"09"和"1"～"31"。 匹配中文字符的正则表达式： [\u4e00-\u9fa5]匹配双字节字符(包括汉字在内)：[^\x00-\xff]匹配空行的正则表达式：\n[\s| ]*\r匹配html标签的正则表达式：<(.*)>(.*)<\/(.*)>|<(.*)\/>匹配首尾空格的正则表达式：(^\s*)|(\s*$)匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*匹配网址URL的正则表达式：http://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?利用正则表达式限制网页表单里的文本框输入内容：用正则表达式限制只能输入中文：onkeyup="value=http://www.mamicode.com/value.replace(/[^/u4E00-/u9FA5]/g,‘‘)" onbeforepaste="clipboardData.setData(‘text‘,clipboardData.getData(‘text‘).replace(/[^\u4E00-\u9FA5]/g,‘‘))"用正则表达式限制只能输入全角字符： onkeyup="value=http://www.mamicode.com/value.replace(/[^/uFF00-/uFFFF]/g,‘‘)" onbeforepaste="clipboardData.setData(‘text‘,clipboardData.getData(‘text‘).replace(/[^\uFF00-\uFFFF]/g,‘‘))"用正则表达式限制只能输入数字：onkeyup="value=http://www.mamicode.com/value.replace(/[^/d]/g,‘‘)"onbeforepaste="clipboardData.setData(‘text‘,clipboardData.getData(‘text‘).replace(/[^\d]/g,‘‘))"用正则表达式限制只能输入数字和英文：onkeyup="value=http://www.mamicode.com/value.replace(/[/W]/g,‘‘)"onbeforepaste="clipboardData.setData(‘text‘,clipboardData.getData(‘text‘).replace(/[^\d]/g,‘‘))"匹配中文字符的正则表达式： [\u4e00-\u9fa5] 匹配双字节字符(包括汉字在内)：[^\x00-\xff]匹配空白行的正则表达式：\n\s*\r匹配HTML标记的正则表达式：<(\S*?)[^>]*>.*?|<.*? /> 匹配首尾空白字符的正则表达式：^\s*|\s*$匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*匹配网址URL的正则表达式：[a-zA-z]+://[^\s]*匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$匹配国内电话号码：\d{3}-\d{8}|\d{4}-\d{7}匹配腾讯QQ号：[1-9][0-9]{4,}匹配中国邮政编码：[1-9]\d{5}(?!\d)匹配身份证：\d{15}|\d{18}Email : /^\w+([-+.]\w+)*@\w+([-.]\\w+)*\.\w+([-.]\w+)*$/isEmail1 : /^\w+([\.\-]\w+)*\@\w+([\.\-]\w+)*\.\w+$/;isEmail2 : /^.*@[^_]*$/;Phone : /^((\(\d{3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}$/Mobile : /^((\(\d{3}\))|(\d{3}\-))?13\d{9}$/Url : /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\‘:+!]*([^<>\"\"])*$/IdCard : /^\d{15}(\d{2}[A-Za-z0-9])?$/Currency : /^\d+(\.\d+)?$/Number : /^\d+$/Code : /^[1-9]\d{5}$/QQ : /^[1-9]\d{4,8}$/Integer : /^[-\+]?\d+$/Double : /^[-\+]?\d+(\.\d+)?$/English : /^[A-Za-z]+$/Chinese : /^[\u0391-\uFFE5]+$/UnSafe : /^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\‘\"]*)|.{0,5})$|\s/PassWord :^[\\w]{6,12}$ZipCode : ^[\\d]{6}/^(\+\d+ )?(\(\d+\) )?[\d ]+$/; //这个是国际通用的电话号码判断/^(1[0-2]\d|\d{1,2})$/; //这个是年龄的判断/^\d+\.\d{2}$/; //这个是判断输入的是否为货币值 <!-- IP地址有效性验证函数--> <script language=javascript runat=server> ip_ip = ‘(25[0-5]|2[0-4]\\d|1\\d\\d|\\d\\d|\\d)‘; ip_ipdot = ip + ‘\\.‘; isIPaddress = new RegExp(‘^‘+ip_ipdot+ip_ipdot+ipdot+ip_ip+‘$‘);</script>匹配空行的正则表达式：\n[\s| ]*\r匹配HTML标记的正则表达式：/<(.*)>.*<\/\1>|<(.*) \/>/匹配首尾空格的正则表达式：(^\s*)|(\s*$)匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*匹配网址URL的正则表达式：http://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?
前端插件介绍fontawsome 各种图标
http://fontawesome.io/
easyui
http://www.jeasyui.net/
jqueryui
bootstrap
bxslider
jquerylazyload
jquery使用案例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。