Question

我创建了一个注册表单，并使用javascript进行了验证。在验证时，我的浏览器连续警报出错了...在输入正确的手机号码后，它提醒我，因此它是有效的。然后它会不断显示警告功能＆＃34;电子邮件无效＆＃34; ....

这是我的代码＆gt;＆gt;

＆＃13;

<!DOCTYPE html>
<head>
<title>Login-Form</title>
<style>
h3{
	padding: 10px;
	background-color: Cyan;
	color: Red;
	size: 20px;
}
.log-in{
	padding: 50px;
	background-image: url("login.png");
	align: left;
	color: Cyan;
	background-repeat: no-repeat;
	background-color:black;
	
}
.Register{
	padding: 50px;
	background-image: url("reg.png");
	align: Right;
	color: Yellow;
	background-repeat: no-repeat;
	background-color:black;
	
}
</style>
<body>
<div>
<marquee><center><h3>Welcome To LIFOA Mobile-APP</h3></center></marquee>
<form class="log-in" method="post">
	<table>
	<b>
	<tr>
		<td><h1>LOGIN PAGE</h1><br><br><br></td>
		<td>USER NAME</td>
		<td>:</td>
		<td><input type="text" placeholder="Username" id="text1" name="un" onBlur="checkuser()"/></td><br /><br><br>
		<td><span id="user_status" style="color:Red ;font-weight:400"> </span></td>
	</tr>
	<tr>
		<td>PASSWORD</td>
		<td>:</td>
		<td><input type="password" name="pw" 	placeholder="Password" id="text2"/></td><br /><br><br>
		<td><span id="user_status" style="color:Red ;font-weight:400"onBlur="checkpass()"> </td></span>
		<td><span id="user_status" style="color:Red ;font-weight:400"> </span></td>
	</tr>
	</table>
		<input type="submit" value="Login" onclick="javascript:validate()" /></b></center>
	</form>
</div>
<div>
<form action="..." class="Register" method="get" >
	<b>
		<center><h2>Register</h1><br><br><br>
		NAME: <input type="text" placeholder="Enter Name" id="text" /> <br /><br><br>
		<label>Enter phone number (e.g. (123) 456-7890): 
    <input type="text" placeholder="Mob Number" id="text4" name="Mobile" onBlur="checkPhoneNo(this.value);"  />
  </label> <br /><br><br>
		<label>Enter mail ID: 
    <input type="text" placeholder="Enter Email" id="text5" name="mail" onBlur="ValidateEmail(this.value);"  />
  </label><br /><br><br>
		Gender : 
 <br>
 <input type="radio" value="male">Male
          <br>
          <input type="radio" value="female">FeMale
		  <br>
          <input type="radio" value="other">Other
 <br>
 <br>
		Password: <input type="password" placeholder="Enter  Password" id="text2" /><br /><BR><BR>
		Confirm Password: <input type="password" placeholder="Confirm the password" id="text3" /><br /><br><br>
		<input type="submit" value="Register" /></b></center>
</form>	
</div>
</body>
<script type="text/javascript"><!-- Mobile number coding using Regular expression -!>
function checkPhoneNo(phoneNo) {
alert(phoneNo);
  var phoneRE = /^\d\d\d\d\d\d\d\d\d\d$/;
  if (phoneNo.match(phoneRE)) {
	alert("Number valid");
    return true;
  } 
  else {
	alert("The phone number is not valid");
    return false;
  }
}

function ValidateEmail(mail) 
{
 if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(mail))
  {
    return true;
  }
  else
	{
    alert("You have entered an invalid email address!")
    return false;
	}
}

  
function checkuser()<!--Username box indication in different colour when it leaves empty -!>
{
	un=document.getElementById("text1").style.border="1px solid #ff0000";
	if(un=="");
		document.getElementById('user_status').innerHTML="Please Enter the userName";
}
function checkpass()
{
	un=document.getElementById("text2").style.border="1px solid #ff0000";
	if(un=="");
		document.getElementById('passw_status').innerHTML="Please Enter the Password";
	alert("Enter password");
}
function validate()
{
  if(   document.getElementById("text1").value == "Suganth"
       && document.getElementById("text2").value == "6213" )
    {
        alert( "validation succeeded" );
        location.href="second.html";
    }
else
{
        alert( "Invalid credentials" );
        location.href="first.html";
    }
}
</script>
</html>

＆＃13;

Answer 1

不要从JS验证函数返回它将停止默认模糊操作。

function checkPhoneNo(phoneNo) {
    var phoneRE = /^\d\d\d\d\d\d\d\d\d\d$/;
    if (phoneNo.match(phoneRE)) {
        alert("Number valid");
        //return true;
    } else {
        alert("The phone number is not valid");
        //return false;
    }
}

我在JS中设置验证的建议是您应该在表单提交时进行验证，以便显示合并错误。

并且不要用户浏览器警告它看起来像用户体验一样奇怪，为了你的学习它是可以的。

如何在java脚本中解决连续警报框？

1 个答案: