繁体   English   中英

JSP动作和onsubmit问题

[英]JSP action and onsubmit issues

似乎没有调用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>

您可以像这样停止自发提交:

$(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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM