我有一个关于jquery datepicker和javascript验证的问题。它不会在我的页面上一起工作。
以下是页面:
<%@page import="model.Rola"%>
<%@page import="java.util.List"%>
<%@page import="service.RolaService"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Nowy pracownik</title>
<link rel="stylesheet" href="css/main.css">
<style type="text/css">
label.error {
float: none;
color: red;
padding-left: .5em;
vertical-align: top;
}
.ui-datepicker{
font-size:16px;
line-height: 0.7;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/validate.min.js"></script>
<script type="text/javascript" src="js/validation.js"></script>
<link rel="stylesheet" href="css/kalendarz.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="js/pl.js"></script>
<script type="text/javascript" src="js/zegar.js"></script>
</head>
<body>
<%
RolaService rolaService = new RolaService();
List<Rola> listaRoles = rolaService.getAllRoles();
request.setAttribute("role", listaRoles);
%>
<%@ include file="header.jsp"%>
<div class="webbody">
<form id="walidacjaformy" method="post" action="nowypracownik.jsp">
<table>
<tr>
<td>Imie</td>
<td><input type="text" name="imie"></td>
</tr>
<tr>
<td>Nazwisko</td>
<td><input type="text" name="nazwisko"></td>
</tr>
<tr>
<td>Pensja brutto</td>
<td><input type="text" name="nowaPensja"></td>
</tr>
<tr>
<td>Rola w systemie</td>
<td>
<select name="rolawsystemie">
<c:forEach items="${role}" var="item">
<option value="${item.nazwaRoli}"><c:out
value="${item.nazwaRoli}" /></option>
</c:forEach>
</select>
</td>
</tr>
<tr>
<td>Login</td>
<td><input type="text" name="login"></td>
</tr>
<tr>
<td>Haslo</td>
<td><input type="password" id="haslo" name="haslo"></td>
</tr>
<tr>
<td>Powtórz hasło</td>
<td><input type="password" id="haslo2" name="haslo2"></td>
</tr>
<tr>
<td>Telefon</td>
<td><input type="text" name="nrtelefonu" value="0048"></td>
</tr>
<tr>
<td>Data przyjęcia (dd/MM/yyyy)</td>
<td><input type="text" id="from" name="startdate"></td>
</tr>
<tr>
<td>Adres e-mail</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td>Kraj</td>
<td><input type="text" name="kraj" value="Polska"></td>
</tr>
<tr>
<td>Kod pocztowy</td>
<td><input type="text" name="kodpocztowy"></td>
</tr>
<tr>
<td>Miasto</td>
<td><input type="text" name="miasto"></td>
</tr>
<tr>
<td>Ulica</td>
<td><input type="text" name="ulica"></td>
</tr>
<tr>
<td>Nr Domu</td>
<td><input type="text" name="nrdomu"></td>
</tr>
<tr>
<td>Nr mieszkania</td>
<td><input type="text" name="nrmieszkania"></td>
</tr>
</table>
<table>
<tr>
<td><input type="submit" value="Dodaj nowego pracownika" class="submitLink"
></td>
</tr>
</table>
</form>
</div>
</body>
</html>
这是验证(validation.js):
$(function() {
$("#walidacjaformy")
.validate(
{
rules : {
login : {
required : true,
minlength : 3,
maxlength : 30,
validateletters : true
},
imie : {
required : true,
minlength : 3,
maxlength : 30,
validateletters : true
},
nazwisko : {
required : true,
maxlength : 30,
validateletters : true
},
nrtelefonu : {
required : true,
minlength : 9,
maxlength : 13,
validatenumbers : true
},
email : {
required : true,
validatemail : true
},
kraj : {
required : true,
validateletters : true
},
kodpocztowy : {
required : true,
minlength : 6,
maxlength : 6,
validatekod : true,
},
miasto : {
required : true,
validateletters : true
},
ulica : {
required : true,
minlength : 3,
maxlength : 30,
validateletters : true
},
nrdomu : {
required : true,
minlength : 1,
maxlength : 5
},
nowaPensja : {
required : true,
validatepensja : true
},
startdate : {
required : true,
validacjadata: true
},
haslo : {
required : true,
},
haslo2 : {
required : true,
equalTo : "#haslo"
},
rolawsystemie : {
required : true,
},
},
messages : {
login : {
required : "To pole jest wymagane!",
minlength : $
.format("Minimalna wartość nie została osiągnięta"),
maxlength : $.format("Zbyt duża wartość!")
},
imie : {
required : "To pole jest wymagane!",
minlength : $
.format("Minimalna wartość nie została osiągnięta"),
maxlength : $.format("Zbyt duża wartość!")
},
nazwisko : {
required : "To pole jest wymagane!",
maxlength : $.format("Zbyt duża wartość!")
},
nrtelefonu : {
required : "To pole jest wymagane!",
minlength : $
.format("Minimalna wartość nie została osiągnięta"),
maxlength : $.format("Zbyt duża wartość!")
},
email : {
required : "To pole jest wymagane!"
},
kraj : {
required : "To pole jest wymagane!"
},
kodpocztowy : {
required : "To pole jest wymagane!",
minlength : $
.format("Kod pocztowy ma 6 znaków"),
maxlength : $
.format("Kod pocztowy ma 6 znaków")
},
miasto : {
required : "To pole jest wymagane!"
},
ulica : {
required : "To pole jest wymagane!",
minlength : $.format("Zbyt mało znaków!"),
maxlength : $.format("Zbyt dużo znaków!")
},
nrdomu : {
required : "To pole jest wymagane!",
minlength : $.format("Zbyt mało znaków!"),
maxlength : $.format("Zbyt dużo znaków!")
},
nowaPensja : {
required : "To pole jest wymagane!"
},
startdate : {
required : "To pole jest wymagane!"
},
haslo : {
required : "To pole jest wymagane!"
},
haslo2 : {
required : "To pole jest wymagane!",
equalTo : "Hasła nie mają tej samej wartości!"
},
rolawsystemie : {
required : "To pole jest wymagane!",
},
}
});
$.validator.addMethod("validatekod", function(value, element) {
// return /^\d+$/.test(value);
return /^[0-9]{2}-[0-9]{3}$/.test(value);
}, "Kod pocztowy ma format xx-xxx i składa się jedynie z cyfr.");
;
$.validator.addMethod("validatenumbers", function(value, element) {
return /^\d+$/.test(value);
}, "To pole może składać się jedynie z cyfr.");
;
/* $.validator.addMethod("validatemail", function(value, element) {
return /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/.test(value);
}, "Niepoprawny adres e-mail.");
;*/
$.validator.addMethod("validatemail", function(value, element) {
return /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,7}$/.test(value);
}, "Niepoprawny adres e-mail.");
;
$.validator.addMethod("validateletters", function(value, element) {
return /^[A-ZÓŻŹĘĄŁĆa-zóżźęąłć\s]+$/.test(value);
}, "Niepoprawny format tego pola.");
;
$.validator.addMethod("validatepensja", function(value, element) {
return /^([1-9][0-9]+(\.[0-9]{0,2})?)+$/.test(value);
}, "To pole może składać się jedynie z cyfr.");
;
$.validator.addMethod("validacjadata", function(value, element) {
return /^([0-9]{2})\/([0-9]{2})\/([0-9]{4})$/.test(value);
}, "Zły format daty.");
;
});
这是datepicker(zegar.js):
$(function() {
$( "#from" ).datepicker({
changeYear: false,
yearRange: "c-0:c+1",
showButtonPanel: true,
dateFormat: 'dd/mm/yy',
firstDay: 1,
defaultDate: "",
minDate: 0,
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
}
);
$( "#to" ).datepicker({
changeYear: false,
yearRange: "c-0:c+1",
showButtonPanel: true,
dateFormat: 'dd/mm/yy',
firstDay: 1,
defaultDate: "",
minDate: 1,
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
如前所述,这两个功能并不一致。任何想法如何解决它?