练习内容

文本框校验练习，使用Jquery完成新增按钮后，增加一个信息框进行填写，并且可以进行删除。每个输入框需要有校验功能。

一、场景模型

示例：

二、代码编写

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-1.8.2.min.js"></script>
</head>
<body><div id="addBtnTr"><input id="addBtn" type="button" value="新增"><input id="divNum" hidden="true" value="1"></div><div id="divTr1" class="divInfo"><table ><tr class="c_tr"><td><label>类型</label></td><td><select id="sel1" class="zjlx"><option value="0">0</option><option value="1">1</option><option value="2">2</option></select><span></span></td></tr><tr class="bm_tr"><td>编码:</td><td><input id="bm1" type="text" class="bm" maxlength="10"><span></span></td></tr><tr class="xh_tr"><td>序号:</td><td><input id="xh1" type="text" class="xh" maxlen="10"><span></span></td></tr></table></div><hr><div id="divTr2" class="divInfo" hidden="true"><div id="DeleBtnTr"><input id="deleBtn" class="deleBtnClass" type="button" value="删除"></div><table ><tr class="c_tr"><td><label>类型</label></td><td><select id="sel2" class="zjlx"><option value="0">0</option><option value="1">1</option><option value="2">2</option></select><span></span></td></tr><tr class="bm_tr"><td>编码:</td><td><input id="bm2" type="text" class="bm" maxlength="10"><span></span></td></tr><tr class="xh_tr"><td>序号:</td><td><input id="xh2" type="text" class="xh" maxlen="10"><span></span></td></tr></table></div></body><script type="text/javascript">$(function (){var lxBlurEvent = function(obj){if ($(obj).val() == "0") {$(obj).siblings("span").text("类型不能为空");} else {$(obj).siblings("span").text("");} };var bmBlurEvent = function(obj){if ($(obj).val() == "") {$(obj).siblings("span").text("编码不能为空");} else {$(obj).siblings("span").text("");}};var xhBlurEvent = function(obj){if ($(obj).val() == "") {$(obj).siblings("span").text("序号不能为空");} else {$(obj).siblings("span").text("");}};var unBlurEvent = function(obj){  $(obj).siblings("span").text(""); };    var bindChangeEvent = function(num){for(var i = 1 ; i<=num ; i ++){(function (i) {//闭包var vsel =  $("#sel"+i);var vbm = $("#bm"+i);var vxh = $("#xh"+i);vsel.change(function(){debugger;console.log($(this).val());if(vsel.val()!=0 || vbm.val()!="" || vxh.val()!=""){vsel.bind("blur",lxBlurEvent(vsel));vbm.bind("blur",bmBlurEvent(vbm));vxh.bind("blur",xhBlurEvent(vxh));}else{vsel.unbind("blur",lxBlurEvent(vsel)).bind("blur",unBlurEvent(vsel));vbm.unbind("blur",bmBlurEvent(vbm)).bind("blur",unBlurEvent(vbm));vxh.unbind("blur",xhBlurEvent(vxh)).bind("blur",unBlurEvent(vxh));}});vbm.change(function(){if(vsel.val()!=0 || vbm.val()!="" || vxh.val()!=""){vsel.bind("blur",lxBlurEvent(vsel));vbm.bind("blur",bmBlurEvent(vbm));vxh.bind("blur",xhBlurEvent(vxh));}else{vsel.unbind("blur",lxBlurEvent(vsel)).bind("blur",unBlurEvent(vsel));vbm.unbind("blur",bmBlurEvent(vbm)).bind("blur",unBlurEvent(vbm));vxh.unbind("blur",xhBlurEvent(vxh)).bind("blur",unBlurEvent(vxh));}});vxh.change(function(){if(vsel.val()!=0 || vbm.val()!="" || vxh.val()!=""){vsel.bind("blur",lxBlurEvent(vsel));vbm.bind("blur",bmBlurEvent(vbm));vxh.bind("blur",xhBlurEvent(vxh));}else{vsel.unbind("blur",lxBlurEvent(vsel)).bind("blur",unBlurEvent(vsel));vbm.unbind("blur",bmBlurEvent(vbm)).bind("blur",unBlurEvent(vbm));vxh.unbind("blur",xhBlurEvent(vxh)).bind("blur",unBlurEvent(vxh));}});}(i));}}var count = 1;bindChangeEvent(count);$("#addBtn").click(function(){count = Number($("#divNum").val()) + 1;$("#divTr" + count).show();$("#divNum").val(count);bindChangeEvent(count);//添加校验事件if (count == 2) {$("#addBtnTr").hide();}});$("#deleBtn").click(function () {var trId = $(this).parents(".divInfo").attr("id");$("#"+trId).hide();count--;$("#divNum").val(count);if (count != 2) {$("#addBtnTr").show();}});})</script></html>

总结

关键点：使用js的闭包，让count取得包含函数中任何变量的最后一个值，然后通过for循环进行逻辑处理，可以省去通过ID选择器一个个填写。

【Jquery】文本框校验练习相关推荐

jQuery文本框(input textare)事件绑定方法教程
jquery 的事件绑定已经用on替换了原来的bind,接下来为大家分享下bind的使用方法及input textare事件.目前1.7以上,jquery?的事件绑定已经用on替换了原来的bind,接 ...
JQuery 文本框高亮显示插件
以前使用Mootools Js框架,文本框有个$('id').highlight()高亮方法,使其高亮显示,效果如下: JQuery 中没有这个方法,自己今天写了一个Plugin,把代码贴出来分享一下 ...
jquery文本框改变事件
可参考如下几个事件: <!doctype html> <html lang="en"> <head><meta charset=" ...
java 文本控件值变化,jquery文本框内容改变事件
随机推荐 &;04下简易安装 java安装首先需要上的网站下载在lib目录下建立一个jvm文件夹然后解压文件到这个文件夹- 编译安装服务端有一种方式是:下载-server-generic-u ...
jquery文本框禁止删除值
禁止删除键只能输入框用 <input type="text" class="form-control" id="bjzhijiname&quo ...
如何使用jQuery获取文本框值
要获取文本框值,可以使用jQuery val()函数. 例如, $('input:textbox').val()-获取文本框值. $('input:textbox').val("新短信&qu ...
js文本框设置必填项_Jquery文本框小例（必填框）
//当光标离开文本框的时候如果文本框为空,则将文本框边框色设置为红色,如果不为空则为白色.提示:焦点进入控件的事件是focus或者mousedown,焦点离开控件的事件是blur. $(functio ...
获得焦点时选择文本框的所有内容（Vanilla JS或jQuery）
本文翻译自:Select all contents of textbox when it receives focus (Vanilla JS or jQuery) 什么是Vanilla JS或jQu ...
php鼠标经过显示文本,jQuery实现鼠标单击网页文字后在文本框显示的方法
这篇文章主要介绍了jQuery实现鼠标单击网页文字后在文本框显示的方法,可实现鼠标点击上方文字即可在下方勾选处文本框显示对应文字的效果,涉及jQuery鼠标事件及链式操作的相关技巧,需要的朋友可以参考 ...
jQuery之文本框得失焦点
版本一 css代码部分: .focus { border: 1px solid #f00;background: #fcc; } 当焦点获得时,添加focus样式,添加边框,并改背景色为#fcc ht ...

【Jquery】文本框校验练习

文章目录

练习内容

一、场景模型

二、代码编写

总结

【Jquery】文本框校验练习相关推荐

最新文章

热门文章