似乎没有调用javascript函数,跳过验证并直接进入检查页面。 我需要在表单元素移动到目标目标(即check.jsp页面)之前进行验证。
我知道有更好的方法来验证表单,但我想知道如何以这种方式完成它,任何帮助都表示赞赏:)
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<form name="validate" onsubmit="return validateall(this)" action="check.jsp" >
Username:<input type="text" name="uname">
Password:<input type="password" name="pwd">
Email:<input type="text" name="email">
<input type="submit" value="Submit" name="Submit">
</form>
<script>
function validateall(form)
{
var errlist="";
<% out.println("The function was called"); %>
errlist+=valuname(form.uname);
errlist+=valpwd(form.pwd);
errlist+=valemail(form.email);
if(errlist!="")
{
alert("Some fields need to be corrected");
return false;
}
alert("Sign Up successful");
return true;
}
function valuname(fld)
{
var error=""
if(fld.value=="")
{
error+="Cannot leave username empty";
fld.style.background='Red';
}
var illegalChars=/\W/;
else if((fld.value.length>=5))||(fld.value.length<=15))
{
error+="The username should be within 5 and 15 characters";
fld.style.background='Red';
}
else if(illegalChars.test(fld.value))
{
fld.style.background='Red';
error+="No illegal characters!";
}
return error;
}
function valpwd(fld)
{
var error=""
if(fld.value=="")
{
error+="Cannot leave password empty";
fld.style.background='Red';
}
var illegalChars=/[\W_]/;
else if((fld.value.length>=7))||(fld.value.length<=15))
{
error+="The username should be within 5 and 15 characters";
fld.style.background='Red';
}
else if(illegalChars.test(fld.value))
{
fld.style.background='Red';
error+="No illegal characters!";
}
return error;
}
function valemail(fld)
{
var error=""
if(fld.value=="")
{
error+="Cannot leave password empty";
fld.style.background='Red';
}
var illegalChars=/[\(\)\<\>\,\;\:\\\"\[\]]/;
else if(illegalChars.test(fld.value))
{
fld.style.background='Red';
error+="No illegal characters!";
}
return error;
}
</script>
</body>
</html>
答案 0 :(得分:0)
你可以像这样停止提交sefault:
$(document).ready(function() {
$('form').on('submit', function(e){
// validation code here
if(!valid) {
e.preventDefault();
}
});
});
来自Jquery.com的另一个例子
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>submit demo</title>
<style>
p {
margin: 0;
color: blue;
}
div,p {
margin-left: 10px;
}
span {
color: red;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Type 'correct' to validate.</p>
<form action="javascript:alert( 'success!' );">
<div>
<input type="text">
<input type="submit">
</div>
</form>
<span></span>
<script>
$( "form" ).submit(function( event ) {
if ( $( "input:first" ).val() === "correct" ) {
$( "span" ).text( "Validated..." ).show();
return;
}
$( "span" ).text( "Not valid!" ).show().fadeOut( 1000 );
event.preventDefault();
});
</script>
</body>
</html