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

【问题标题】：How to perform validation on a form in javascript before going to other page在转到其他页面之前如何在 javascript 中对表单执行验证
【发布时间】：2017-02-18 08:55:43
【问题描述】：

我尝试了很多方法，但是当单击提交按钮时，它直接移动到下一页，而无需通过 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>

【问题讨论】：

也许你正在寻找这个：preventDefault()
请使用下面的链接stackoverflow.com/questions/8999210/…
@HarshilDave 我也给出了 javascipt 代码
@Razorphyn 在哪里写 precentDefault() ？
@Razorphyn 在哪里使用 preventDefault() ？

标签： javascript jquery jsp

【解决方案1】：

那里有几个错误。首先，您必须从 html 标记中的函数返回值：

【讨论】：

我已经使用 action 移动到下一个 jsp 页面

【解决方案2】：

首先使用<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;
        }

【讨论】：

【解决方案3】：

你做错了。

        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;

【讨论】：

告诉您是否还有问题。