简单的jQuery提交提示封装

作者:norion时间:2012年5月4日评论次数:0 条

最近公司自己再开发一条内部的OA系统,繁琐的东西挺多的,特别是什么表格一堆,这不部门的头让我做一张请假条,要求在input为空时给个提示,原本我是想直接在input后面插入一个为空的提示,一来网上jQuery插件很多,二来虽然难看一点体验性也比较好,没想到头居然说将提示弄到提交按钮哪去,说这样漂亮!顿时无语,不能啥事都为了漂亮吧!做出来效果是这样的:

简单是jQuery提交提示封装

本来也用的时间插件,添加了一个提示插件结果两个有点冲突,一时间我还找不到比较满意插件,算了,就自己写个呗,虽然菜,总要练练,于是我就直接将input判空,给出相应的提示,我的js是这样写的:

jQuery代码:

(function($){
	/*******************************
	 * @author norion
	 * @author blog http://zkeyword.com/
	 * @2012.05.04
	 * @可自由转载及使用,但请注明版权归属
	 *******************************/
	$.fn.submitTibs= function(uid){
		var _this = this;
		_this.after('');
		_this.click(function(){
			var dom = jQuery('#'+uid).find('input:text,textarea,select');
			var domPrev = dom.prev();
			var _wrap = jQuery('#submitPromptWrap');
			for(var i = 0, l = domPrev.length; i < l; i++){
				if( dom.eq(i).val() == '' ){
					_wrap.text('“'+ domPrev.eq(i).attr('title') +'”没有填写,不能提交!');
					return false;
				}
			}
		});
	}
})(jQuery);

直接取input,textarea,select前一个label的title值,其中由于是判空,所以select的第一个option值应该是空的,本想直接取里面的文本,结果还有个冒号去不掉,就个label添加了个title,这样写比较死一点,最让我纠结的是“for”里面再来用“if”判空,效率啊!不过目前我没找到跟好的方法,如果有高手路过还请指导指导。

html代码:

<form id="iform" name="iform" method="post" action="/?mod=leave">
<input type="hidden" name="formhash" value="0bed5fd7" />
<input type="hidden" name="gotourl" value="/?mod=profile" />
<table id="table" class="table" cellspacing="0" cellpadding="0" border="1">
<th colspan="4"><span class="fn-left">请假条</span></th>
<tr>
<td>工号:1008<input type="hidden" name="uid" value="1008" /></td>
<td><label for="username">姓名:</label>xxx</td>
<td><label for="postname">职位:</label></td>
<td><label for="department">部门:</label><span>信息部</span></td>
</tr>
<tr>
<td>申报时间:[2012-5-4 09:21]<input type="hidden" name="sendtime" value="1336094490" /></td>
<td colspan="3"><label title="工作交接人">工作交接人:</label><input type="text" name="workuid" id="submitProxy" class="inputTxt" /></td>
</tr>
<tr>
<td>
<label for="department" title="请假假别">:</label><select name="leavetype" id="">
<option value=""></option>
<option value="1">事假</option>
<option value="2">病假</option>
<option value="3">婚假</option>
<option value="4">探亲假</option>
<option value="5">产假(流产假)</option>
<option value="6">丧假</option>
<option value="7">陪产假</option>
<option value="8">年假</option>
</select>
</td>
<td><label title="开始时间">开始时间:</label><input type="text" name="starttime" id="leaveTime-item1" class="inputTxt inputTimeItem" /></td>
<td><label title="结束时间">结束时间:</label><input type="text" name="stoptime" id="leaveTime-item2" class="inputTxt inputTimeItem" /></td>
<td>
<label>假期天数:</label>
<select name="daynum" id="">
<option value="">0.5</option>
<option value="">1</option>
<option value="">1.5</option>
<option value="">2</option>
<option value="">2.5</option>
<option value="">3</option>
<option value="">3.5</option>
<option value="">4</option>
<option value="">4.5</option>
<option value="">5</option>
<option value="">5.5</option>
<option value="">6</option>
<option value="">6.5</option>
<option value="">7</option>
</select>
天
</td>
</tr>
<tr>
<td colspan="4"><label class="fn-left" title="请假原因">请假原因:</label><textarea name="notations" id="" cols="120" rows="4" class="textareaTxt"></textarea></td>
</tr>
<tr>
<td><label title="送审部门主管">送审部门主管:</label><input type="text" name="competent" id="submitCompetent" class="inputTxt" /></td>
<td><label title="送审办公室">送审办公室:</label><input type="text" name="Office" id="submitOffice" class="inputTxt" /></td>
<td><label title="送审人事部">送审人事部:</label><input type="text" name="personnel" id="submitPersonnel" class="inputTxt" /></td>
<td><label title="送审总经理">送审总经理:</label><input type="text" name="personnel" id="submitManager" class="inputTxt" /></td>
</tr>
<tr>
<td colspan="4"><input id="submitleave" class="inputBtn" type="submit" value="提交" name="submitleave"></td>
</tr>
</table>
<footer>
<p>备注:</p>
<p>1、员工请假申请应提前填写,并按正常程序审批后交由人事存档;请假、婚、产假需交人事相关证明文件.</p>
<p>2、若因特殊原因,没有及时填写请假申请单,须在销假后补单并报批,否则补单无效。</p>
</footer>
</form>

标签:

上一篇: 解决“wordpress移除自动保存和修订版本”后才能修改url的问题

下一篇:为网站添加IE6升级提示

相关文章

评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注