bugfix> javascript > 投稿

登録フォームを作成し、javascriptを使用して検証を行いました。検証中に、ブラウザの継続的なアラートに対してエラーが発生しました。適切な携帯電話番号を入力すると、アラートが発生したため有効になりました。 「電子メールが無効でした」というアラート機能を継続的に表示します。

ここに私のコードがあります>>

<!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>

回答 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で検証をセットアップするための私の提案は、フォーム送信中に検証を行い、統合エラーを表示できるようにすることです。

    そして、ユーザーブラウザーがユーザーエクスペリエンスとして奇妙に見えることを警告しないでください。あなたの学習にとっては大丈夫です。

あなたの答え