jquery validate配合struts2简单整改

最新推荐文章于 2024-07-27 13:31:57 发布

iteye_5247

最新推荐文章于 2024-07-27 13:31:57 发布

阅读量126

点赞数

分类专栏： css 文章标签： java javascript json ViewUI

本文链接：https://blog.csdn.net/iteye_5247/article/details/82375227

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>validate</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/myvalidate-method.js"></script>
<style>
body {
font-size: 14px;
}
label.error {
color: #FF0000;
background: url(error_ico.gif) no-repeat;
zoom: 1;
padding-left: 18px;
padding-top: 1px;
margin-left: 4px;
}

label.ok {
color: #FF0000;
background: url(ok_ico.gif) no-repeat;
zoom: 1;
padding: 1px 0 0 16px;
margin-left: 4px;
}

</style>

<script type="text/javascript">
$(document).ready(function() {

$("tr").each(function(i){
$("td:first",this).attr("align","right");
});

var validator = $("#signupForm").validate({
debug : true,
rules : {
firstname : {
required : true,
rangelength : [ 1, 15 ]
},
email : {
required : true,
email : true
},
email_add : {
required : function() {
return $("#email").val() != "";
}
},
password : {
required : true,
rangelength : [ 6, 15 ]
},
confirm_password : {
required : true,
rangelength : [ 6, 15 ],
equalTo : "#password"
},
limitInput : {
required : true,
limitInput : true
},
checkGroup : {
required : true,
minlength : 2
},
radioGroup : {
required : true
},
selectbox : {
required : true
},
ajaxcheck : {
required : true,
remote : {
url : "hello.action", //后台处理程序
type : "get", //数据发送方式
dataType : "json", //接受数据格式
data : { //要传递的数据
firstname : function() {
return $("#firstname").val();
},
test : "test"
}
}
}

},
messages : {
firstname : {
required : "请输入用户名"
},
email : {
required : "请输入Email地址",
email : "请输入正确的email地址"
},
email_add : {
required : "email地址存在的时候必填"
},
password : {
required : "请输入密码",
rangelength : "密码长度在6-15位之间"
},
confirm_password : {
required : "请输入确认密码",
rangelength : "确认密码不能小于6个字符",
equalTo : "两次输入密码不一致不一致"
},
limitInput : {
required : "限制输入为必填项"
},
checkGroup : {
required : "必选",
minlength : "最少选中2个"
},
radioGroup : {
required : "性别为必选项"
},
ajaxcheck : {
required : "必填",
remote : "ajax检查不通过，名称已存在"
}
},
submitHandler : function(form) {
alert(11);
form.submit();
},
success : function(label) {
label.html(" ").addClass("ok");
}
});
$("#reset").click(function() {
validator.resetForm();
});
});
</script>
</head>
<body>

<form id="signupForm" method="post" action="#">
<table>
<tr>
<td><label for="firstname">Firstname</label>: </td>
<td><input id="firstname"name="firstname" /></td>
</tr>
<tr>
<td><label for="email">E-Mail</label>: </td>
<td><input id="email" name="email" /> </td>
</tr>
<tr>
<td><label for="email_add">E-Mail不为空时必填</label>: </td>
<td><input id="email_add" name="email_add" type="text" /> </td>
</tr>
<tr>
<td><label for="password">Password</label>: </td>
<td><input id="password" name="password" type="password" /></td>
</tr>
<tr>
<td><label for="confirm_password">确认密码</label>: </td>
<td><input id="confirm_password" name="confirm_password" type="password" /></td>
</tr>
<tr>
<td><label for="limitInput">限定输入</label>: </td>
<td><input id="limitInput" name="limitInput" /></td>
</tr>
<tr>
<td><label>多选: </label></td>
<td> <input type="checkbox" id="check_1" value="1" name="checkGroup" />
<input type="checkbox" id="check_2" value="2" name="checkGroup" />
<input type="checkbox" id="check_3" value="3" name="checkGroup" />
</td>
</tr>
<tr>
<td><label>性别: </label></td>
<td><input type="radio" id="radio_1" value="1" name="radioGroup" />
<input type="radio" id="radio_2" value="2" name="radioGroup" />
</td>
</tr>
<tr>
<td><label>下拉: </label> </td>
<td>
<select id="selectbox" name="selectbox">
<option value="">请选择</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr>
<td><label for="ajaxcheck">ajax远程校验</label>: </td>
<td><input id="ajaxcheck" name="ajaxcheck" /></td>
</tr>
<tr>
<td><input id="submit" type="submit" value="Submit" /> </td>
<td><input id="reset" type="reset" value="Reset " /></td>
</tr>
</table>
</form>
</body>
</html>

http://localhost:8080/Struts2/validateTest.jsp

iteye_5247

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery validate配合struts2简单整改

validatebody { font-size: 14px;}label.error { color: #FF0000; background: url(error_ico.gif) no-repeat; zoom: 1; padding-left: 18px; padding-top: 1px; margin-le...
复制链接

扫一扫

专栏目录