关于JQuery的使用(简单验证,多选框批量删除&导出)

JQuery版本:jquery-1.7.1.js

下面主要给大家讲一下JQuery的简单使用 验证篇:

首先导入jquery标签库
下面是jquery代码 验证用户名和密码不能为空而且必须不能小于3位

<script type="text/javascript">
	$(function() {
		username = false;
		password = false;
		$("#username").blur(function() {
			$("span").empty();
			var name = $("input[name='username']").val();
		    if (name == "") {
				var span=$("<span>用户名不能为空</span>");
				$("#username").after(span);
				return false;
				};
			if ($(this).val().length < 3) {
				var span = $("<span>用户名的长度不可小于3位</span>");
				$("#username").after(span);
				return false;
			}
		});
		$("#password").blur(function() {
			$("span").empty();
			var password = $("input[name='password']").val();
		    if (password == "") {
				var span=$("<span>密码不能为空</span>");
				$("#password").after(span);
				return false;
				};
			if ($(this).val().length < 3) {
				var span = $("<span>密码的长度不可小于3位</span>");
				$("#password").after(span);
				return false;
			}
			$("form").submit(function() {
				if (name == true && pass == true) {
					$("form").submit();
				}
			});
		});
	});
</script>

还有一种方法是用JQuery的插件来完成校验
首先导入js文件
additional-methods.js
jquery.validate.js

<script type="text/javascript">
	 	 $(function(){
            //让当前表单调用validate方法，实现表单验证功能
            $("#from").validate({
                rules:{
                    username:{
                        required:true, 
                        rangelength:[2,5]
                    },
                    password:{
                        required:true,
                        rangelength:[6,12]
                    }
                },
                messages:{
                    username:{
                        required:"请输入用户名",
                        rangelength:$.validator.format("用户名长度在必须为：{0}-{1}之间"),
                    },
                    password:{
                        required:"请输入密码",
                        rangelength:$.validator.format("字段长度必须为：{0}-{1}之间")
                    }
                }
            });
        });
	</script>

上边是JQuery校验的功能
下边来说多选删除的功能
首先 同样 导入Jquery文件
//js代码

	<script type="text/javascript">
    $(function() {
        $("#delete").click(function() {

            array = new Array();
            $("input[type='checkbox']:gt(0):checked").each(
            function() {array.push($(this).parent().next().text());});
                    if (array == 0) {
                        alert("请勾选!!");
            } else {
                    location.href = "userAction/deletes.action?ids="+ array;
                }
          });
    });
</script>

//表的代码

<table align="center" border="1">
			<tr>
				<td>操作</td>
				<td>用户ID</td>
				<td>员工姓名</td>
				<td>所属部门</td>
				<td>职位</td>
				<td>员工薪资</td>
				<td>入职时间</td>
			</tr>
			<c:forEach items="${userlist}" var="userlist">
				<tr>
					<td><input type="checkbox" value="${userlist.id}" name="ids"></td>
					<td>${userlist.id}</td>
					<td>${userlist.empname}</td>
					<td>${userlist.department}</td>
					<td>${userlist.position}</td>
					<td>${userlist.salary}</td>
					<td><fmt:formatDate value="${userlist.joinDate}" type="date"
							pattern="yyyy-MM-dd" /></td>
				</tr>
				<tr>
				</tr>
			</c:forEach>
			<input type="button" value="批量导出" onclick="dao()" />
			<br/><br/><br/>
			<input type="button" value="批量删除" id="delete">
		</table>

后台代码
(controller层)

//批量删除
	@RequestMapping("/deletes.action")
	public String deletes(String ids){
		String [] s = ids.split(",");
		for (String string : s) {
			userService.deletes(Integer.parseInt(string));
		}
		return "redirect:selectlikes.action";
	}

(service层)

	@Override
	public void deletes(Integer ids) {
		userMapper.deletes(ids);
	}

(Mapper层)

		//批量删除
	public void deletes(Integer ids);
	

(Maaper xml文件)

	<!-- 批量删除 -->
	<delete id="deletes" parameterType="String">
		delete from employee where id = #{ids}
	</delete>

Jquery最简单批量删除/导出

	<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
	   <script type="text/javascript">
    $(function() {
        $("#daochu").click(function() {

            array = new Array();
            $("input[type='checkbox']:gt(0):checked").each(
            function() {array.push($(this).parent().next().text());});
                    if (array == 0) {
                        alert("请勾选!!");
            } else {
                    location.href = "daochu.action?ids="+ array;
                }
          });
    });
</script>

表中

</form>
   <input type="button" value="点击导出" id="daochu">
   <input type="button" value="点击删除" id="deletes">
	<table align="center" border="1">
		<tr>
		    <td>请选择</td>
			<td>用户ID</td>
			<td>姓名</td>
			<td>年龄</td>
			<td>性别</td>
			<td>生日</td>
			<td>密码</td>
			<td>操作</td>
			<td>操作</td>
		</tr>
		<c:forEach items="${userlist}" var="userlist">
			<tr>
			<td><input type="checkbox"></td>
				<td>${userlist.uid}</td>
				<td>${userlist.username}</td>
				<td>${userlist.age}</td>
				<td>${userlist.sex}</td>
				<td><fmt:formatDate value="${userlist.birthday}" pattern="yyyy-MM-dd"/></td>
				<td>${userlist.password}</td>
				<td><a href="./deletebyId.action?uid=${userlist.uid}">删除</a></td>
				<td><a href="selectOneUser.action?uid=${userlist.uid}">修改</a></td>
			</tr>
		</c:forEach>
	</table>