【发布时间】：2016-02-12 03:19:29
【问题描述】：
我是 Spring MVC 和 JavaScript 的新手，我正在尝试使用 JavaScript（客户端）验证视图。验证正在工作，但问题是，当错误发生时，我无法停止表单提交。它将发布方法。
如果出现错误，如何停止提交？
我的观点是registration.jsp
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="<c:url value="/resources/js/j.js" />"></script>
<title>Insert title here</title>
</head>
<body>
<h2>Please,Do Registration</h2>
<form:form id="form" method="POST" action="/spring-ex02/user/reg"
commandName="login" >
<table>
<tr>
<td><form:label path="email">Email</form:label></td>
<td><form:input id="email" path="email" /></td>
<td><font id="emailError" style="color: red;">${emailExistError}
</font></td>
</tr>
<tr>
<td><form:label path="password">Password</form:label></td>
<td><form:input id="password" path="password" type="password"
/></td>
<td><font id="passwordError" style="color: red;">${passwordError}
</font></td>
</tr>
<tr>
<td><form:label path="confirmPassword">Confirm Password</form:label>
</td>
<td><form:input id="confirmPassword" path="confirmPassword"
type="password" /></td>
<td><font id="confirmPasswordError" style="color: red;"></font>
</td>
</tr>
<tr>
<td><form:label path="userDetail.firstname">First Name</form:label>
</td>
<td><form:input id="firstName" path="userDetail.firstname" /></td>
<td><font id="firstNameError" style="color: red;"></font>
</td>
</tr>
<tr>
<td><form:label path="userDetail.lastname">Last Name</form:label>
</td>
<td><form:input id="lastName" path="userDetail.lastname" /></td>
<td><font id="lastNameError" style="color: red;"></font> </td>
</tr>
<tr>
<td><form:label path="userDetail.address">Address</form:label></td>
<td><form:input id="address" path="userDetail.address" /></td>
<td><font id="addressError" style="color: red;"></font> </td>
</tr>
<tr>
<td><form:label path="userDetail.contact">Contact</form:label></td>
<td><form:input id="contact" path="userDetail.contact" /></td>
<td><font id="contactError" style="color: red;"></font>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" onclick="validate()" value="Sign Up"/>
</td>
</tr>
</table>
</form:form>
<form action="/spring-ex02/" method = GET>
<input type="submit" value="Back to Home">
</form>
</body>
</html>
我的 js 文件是 J.js
function validate(){
var f=document.getElementById("form");
validateEmail(f);
validatePassword(f);
firstNameValidate(f);
lastNameValidate(f)
addressValidate(f);
contactValidate(f)
}
function validateEmail(form){
var error=document.getElementById("emailError");
var email=form["email"].value;
error.innerHTML="";
var regx = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|
(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-
Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if( email==null || email==""){
error.innerHTML="Input Your Email";
}
else if(!email.match(regx)){
error.innerHTML="Invalid Email";
}
}
function validatePassword(form){
var error1=document.getElementById("passwordError");
var error2=document.getElementById("confirmPasswordError");
error1.innerHTML="Give Password";
var password=form["password"].value;
error1.innerHTML="";
error2.innerHTML="";
var confirmPassword=form["confirmPassword"].value;
if( password==null || password==""){
error1.innerHTML="Give Password";
}
else if( confirmPassword==null || confirmPassword==""){
error2.innerHTML="Confirm Password";
}
else if(password.length<5 || password.length>10){
error1.innerHTML="Password has to be 5 to 10 chars"
}
else if(password != confirmPassword){
error2.innerHTML="Password Does Not Match"
}
}
function firstNameValidate(from){
var error=document.getElementById("firstNameError");
var firstName=form["firstName"].value;
error.innerHTML="";
if( firstName==null || firstName==""){
error.innerHTML="Input Your FirstName";
}
else if(!isNaN(id)){
error.innerHTML="Name Can Not be a number";
}
else if(firstName.length<5 || firstName.length>10){
error1.innerHTML="Name has to be 5 to 10 chars"
}
}
function lastNameValidate(from){
var error=document.getElementById("lastNameError");
var lastName=form["lastName"].value;
error.innerHTML="";
if( lastName==null || lastName==""){
error.innerHTML="Input Your LastName";
}
else if(!isNaN(id)){
error.innerHTML="Name Can Not be a number";
}
else if(lastName.length<5 || lastName.length>10){
error1.innerHTML="Name has to be 5 to 10 chars"
}
}
function addressValidate(from){
var error=document.getElementById("addressError");
var address=form["address"].value;
error.innerHTML="";
if( address==null || address==""){
error.innerHTML="Input Your Address";
}
else if(!isNaN(id)){
error.innerHTML="Address Can Not be a number";
}
else if(address.length<5 || address.length>10){
error1.innerHTML="Address has to be 5 to 10 chars"
}
}
function contactValidate(from){
var error=document.getElementById("contactError");
var contact=form["contact"].value;
error.innerHTML="";
if( contact==null || contact==""){
error.innerHTML="Input Your Contact";
}
else if(isNaN(id)){
error.innerHTML="Name Can Not be alphabate";
}
else if(contact.length<5 || contact.length>10){
error1.innerHTML="Contact has to be 5 to 10 chars"
}
}
【问题讨论】：
-
比起在提交按钮上显式调用 onclick 更喜欢使用偶数监听器机制。保持您的提交按钮禁用，也使用 css 将其颜色修改为灰色，直到其禁用。注册焦点事件的每个元素并执行焦点验证验证。如果验证失败，则在验证失败时将布尔变量更新为 false。在每个元素的布尔值之间使用 && 运算符。只有在元素的最终布尔值为 true 时才应启用提交。
标签： javascript spring-mvc