如何在转到其他页面之前在javascript中对表单执行验证

时间:2017-02-18 08:55:43

标签: javascript jquery jsp

我尝试了很多方法,但是当点击提交按钮时,它直接移动到下一页,而不通过javascript在客户端验证。请告诉我这个问题的解决方案。

以下是代码:



 function teacherValidateForm(){
	var tuid=document.getElementById("tusername");
	var tnme=document.getElementById("tname");
	var tmail=document.getElementById("temail");
	var tpsd=document.getElementById("tpssswod");
	var tiname=document.getElementById("tiname");
	
	function validateTID(tuid){
		var message= "Username must start with a letter and must be of minimum 5 letters and '_' and '.' is allowed";
		if((!tuid.match(/^[[A-Za-z][A-Za-z0-9/._]*]{5,}$/)) || tuid.value==""){
			document.getElementById(uname).innerHTML=message;

			return false;
		}
		else return true;
	}
	function validateTName(){
		var message="Teacher's name muct not contain special characters and numbers";
		if((!tnme.match(/^[A-Za-z]*\s{1}[A-Za-z]*$/) || tnme.value==""){
			 document.getElementById(name).innerHTML=message;

			return false;
		}else return true;
	}
	function validateTEmail(){
		var message="Enter a valid email";
		if((!tmail.match(/^[A-Za-z\._\-0-9]*[@][A-Za-z]*[\.][a-z]{2,4}*$/) || tmail.value==""){
			 document.getElementById(email).innerHTML=message;

			return false;
		}else return true;
	}

	function validateTPass(){
		var message="Password must contain special cahacters, one catital letter atleast and must be mininum 8 letters";
		if((!tpsd.match(/^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$/) || tpsd.value==""){
			 document.getElementById(password).innerHTML=message;

			return false;
		}else return true;
	}
	function validateTName(){
		var message="Institute's name muct not contain special characters and numbers";
		if((!tiname.match(/^[A-Za-z]*\s{1}[A-Za-z]*$/) || tnme.value==""){
			 document.getElementById(iname).innerHTML=message;

			return false;
		}else return true;
	}
}

<body>
<div class="container-fluid" id="home">
<div class="text-center ">
	<p></p><br/><br/><br/><br/>
	
	<div class="container-fluid text-center">
		
				<h4  style="font-family:sans-serif; color: #000; size: 60px; font-weight: bold">Registration form</h4></div>
			
	</div>
<form name="teachersignup" class="form-horizontal" action="teacherLogin.jsp"  method="POST">
		<div class="form-group">
			<label  class="control-label col-md-4" style="color:#000; font-size:15px" >User Name: </label>
			<div class="col-md-4">
				<input type="text" class="form-control" id="tusername"  />&nbsp; <span class="error" id="uname"></span>
			</div>
		</div>
		<div class="form-group">
			<label class="control-label col-md-4" style="color:#000; font-size:15px" >Teacher's Name: </label>
			<div class="col-md-4">
				<input type="text" class="form-control" id="tname"  />&nbsp; <span class="error" id="name" ></span>
			</div>
		</div>
		<div class="form-group">
			<label for="email" class="control-label col-md-4" style="color:#000; font-size:15px" >Email: </label>
			<div class="col-md-4">
				<input type="email" class="form-control" id="temail"  />&nbsp; <span class="error" id="email"></span>
			</div>
		</div>
		<div class="form-group">
			<label for="pswd" class="control-label col-md-4" style="color:#000; font-size:15px" >Password: </label>
			<div class="col-md-4">
				<input type="password" class="form-control" id="tpassword"  />&nbsp;<span class="error" id="password"></span>
			</div>
		</div>
		<div class="form-group">
			<label for="iname" class="control-label col-md-4" style="color:#000; font-size:15px" >Institute's Name: </label>
			<div class="col-md-4">
				<input type="text" class="form-control" id="tiname"  />&nbsp;<span class="error" id="iname"></span>
			</div>
		</div>
		
		<div class="col-md-12 text-center">
			<button type="submit" class="btn btn-success" onsubmit="teacherValidateForm();">Submit</button>
		</div>
	</form>
			
	</div>
</body>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:0)

你有几个错误。首先,您必须从html标记中的函数返回值: 的

答案 1 :(得分:0)

首先使用<form name="teachersignup" class="form-horizontal" action="teacherLogin.jsp" method="POST" onsubmit="return teacherValidateForm();>

然后你可以尝试以下功能。假设所有正则表达式都正确,下面的函数应该可以正常工作。

function teacherValidateForm()
        {
            var tuid=document.getElementById("tusername");
            var tnme=document.getElementById("tname");
            var tmail=document.getElementById("temail");
            var tpsd=document.getElementById("tpssswod");
            var tiname=document.getElementById("tiname");

            if(!tuid.match(/^[[A-Za-z][A-Za-z0-9/._]*]{5,}$/) || tuid.value=="")
            {
                var message= "Username must start with a letter and must be of minimum 5 letters and '_' and '.' is allowed";

                document.getElementById(uname).innerHTML=message;
                return false;
            }

            if(!tnme.match(/^[A-Za-z]*\s{1}[A-Za-z]*$/) || tnme.value=="")
            {
                var message="Teacher's name muct not contain special characters and numbers";
                document.getElementById(name).innerHTML=message;
                return false;
            }

            if(!tmail.match(/^[A-Za-z\._\-0-9]*[@][A-Za-z]*[\.][a-z]{2,4}*$/) || tmail.value=="")
            {
                var message="Enter a valid email";
                document.getElementById(email).innerHTML=message;
                return false;
            }

            if(!tpsd.match(/^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$/) || tpsd.value=="")
            {
                var message="Password must contain special cahacters, one catital letter atleast and must be mininum 8 letters";
                document.getElementById(password).innerHTML=message;
                return false;
            }

            if(!tiname.match(/^[A-Za-z]*\s{1}[A-Za-z]*$/) || tnme.value=="")
            {
                var message="Institute's name muct not contain special characters and numbers";
                document.getElementById(iname).innerHTML=message;
                return false;
            }

            return true;
        }

答案 2 :(得分:0)

你做错了。

        var tuid=document.getElementById("tusername");
        var tnme=document.getElementById("tname");
        var tmail=document.getElementById("temail");
        var tpsd=document.getElementById("tpssswod");
        var tiname=document.getElementById("tiname");

实际上,您正在使用HTML输入元素分配这些变量,但您需要这些值。所以在这些代码中进行了一些更改

        var tuid=document.getElementById("tusername").value;
        var tnme=document.getElementById("tname").value;
        var tmail=document.getElementById("temail").value;
        var tpsd=document.getElementById("tpssswod").value;
        var tiname=document.getElementById("tiname").value;