表单验证插件jQuery Validation Engine使用介绍

jQuery Validation Engine是一款非常好用的表单验证工具,对常见的验证如:非空、长度、数字验证等,都有非常好的支持。详细可参考:http://code.ciaoca.com/jquery/validation-engine/
下面在一个jsp页面举了一个简单的例子,如要使用jQuery Validation Engine插件,可参考下面的例子并结合官网介绍使用。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>       
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>新增用户</title>
<script src="js/jquery.js"></script>
<script src="js/jquery.validationEngine-zh_CN.js"></script>
<script src="js/jquery.validationEngine.js"></script>
<!-- jquery.validationEngine-zh_CN.js 为配置文件,可根据需求自行调整或增加,也可以更换为其他语言配置文件 -->
</head>
<script type="text/javascript">
$(function(){
   //页面加载完成后就设置表单自动验证的规则
   //userForm为表单的id
	$("#userForm").validationEngine({
		autoHidePrompt:false,//自动隐藏
		showOnMouseOver:false,//当鼠标移出时触发
		//autoHideDelay:2,     //自动隐藏延迟时间
		promptPosition:'bottomLeft',//提示信息的位置
		inlineValidation: true,//是否即时验证,false为提交表单时验证,默认true  
		failure : function() {
		    layer.message("验证失败,请检查");
			return false;  
		},//验证失败时调用的函数
		ajaxFormValidation: true,//开始AJAX验证
		success : function() {
		//	$("#addForm").submit();
		}//验证通过时调用的函数 
		//onAjaxFormComplete: ajaxValidationCallback
	});
	
	$("#submit").click(function(){
		//在表单提交时,先验证字段是否满足要求,如不满足要求,则$("userForm").validationEngine("validate")返回false
		//不能提交并在字段位置提示错误信息。
		if(!$("#userForm").validationEngine("validate")){
			return;
		}
		var options = {
				dataType:"json",
				data:{},
				success:function(json){
					layer.msg("提交成功");
				},
				error:function(json){
					layer.msg("系统错误,请联系管理员");
				}
			};
		$('#userForm').ajaxSubmit(options);
	})
})

//将select选中内容赋给对应的字段
function setName(select){
	$("#"+select.id.replace("Id","Name")).val(select.selectedOptions[0].label);
}

//关闭
function closeWindow(){
	 parent.closeWin();
}
</script>
<body>
<form action="${_baseUrl}/userController/insertUser" id="userForm" name="userForm" method="post" enctype="multipart/form-data">
<input type="hidden" name="token" value="${token}" />
<table class="table table-bordered layout_table" style="margin-bottom: 20px">
    <tbody >
        <tr>
        	<td height="50" width="15%" align="center"><span style="color: #f00">*</span>用户名称</td>
            <td width="35%" valign="middle" align="left" >
                <div>
                    <input type="text" class="validate[required,maxSize[100]] text_placeholder" name="userName" id="userName" value="" placeholder="请输入..."/>
                </div>
            </td>
        	<td height="50" width="15%" align="center"><span style="color: #f00">*</span>用户性别</td>
            <td width="35%" valign="middle">
                <select class="validate[required]" name="sexId" id="sexId" onchange="setName(this)">
                    <option value ="">请选择</option>
					<option value ="1">男</option>
					<option value ="0">女</option>
                </select>
                <input type="hidden" id="sexName" name="sexName" value="" />
            </td>
        </tr>
        <tr>    
        	<td height="50" width="15%" align="center"><span style="color: #f00">*</span>用户年龄</td>
            <td width="35%" valign="middle">
                <input type="text" class="validate[custom[integer]] text_placeholder" name="age" id="age" value="" placeholder="请输入..."/>
            </td>           
            <td height="50" width="15%" align="center"><span style="color: #f00">*</span>用户功能</td>
            <td width="35%" valign="middle" align="left">
                <input class='validate[required]' type='checkbox' name='softwareTestGrade' value='1'/>首页
				<input class='validate[required]' type='checkbox' name='softwareTestGrade' value='2'/>菜单
				<input class='validate[required]' type='checkbox' name='softwareTestGrade' value='3'/>后台
            </td>
        </tr>
    </tbody>
</table>
</form>
<div class="submit_group">
    <a href="javascript:;" class="submit" id="submit">提交</a>
    <a href="javascript:;" class="cancel" onclick="closeWindow();">取消</a>
</div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/juligang320/article/details/82763483