Javascript和表单验证

问题描述:

您好,



我为注册页面创建了4个脚本:

isEmpty - 验证输入的值是否为空

isPassword - 验证输入是否正确。

isMail - 如果输入的输入正确。



And激活注册按钮以验证三个脚本。



所以我的问题是为什么HTML按钮不想激活?

我的HTML是正确的,并且正确包含了这个javascript。

我想我错了使用表单值。





Hello ,

I created 4 scripts for a sign up page :
isEmpty - verifies if the entered value is empty
isPassword - verifies if the input is correct.
isMail - if the input is entered is correct.

And activate the registration button uppon the verification of the three scripts.

So my question is why the HTML button doesn t want to activate ?
My html is correct and properly includes this javascript.
I guess i am wrong using the form values.


function isEmpty(login)
{
    var isEmptyValide;

    var val = document.formulaire.login.value;

         if( val =="")
            {
              alert("Login est vide")
              return isEmptyValide = false;
            }
       else
            {
             return isEmptyValide = true;
            }
}

function isPassword(mdp) 
{
		var passwordValide;
		var a,b,c,d;
        if('A' <= a[i] && a[i] <= 'Z') // check if you have an uppercase
		    b++;
        if('a' <= a[i] && a[i] <= 'z') // check if you have a lowercase
            c++;
        if('0' <= a[i] && a[i] <= '8') // check if you have a numeric
            d++;
		if('0' <= a[i] && a[i] <= '8')
		
		if(b > 1 && c > 1 && d > 8)
			return passwordValide = true;
		else 
			return passwordValide = false;	
}
	
	
function isMail(email)
{
	var mail = document.formulaire.email.value;
	valideMail = false;
	var valide;
	
	for(var j=1;j<(mail.length);j++)
	{
		if(mail.charAt(j)=='@')
		{
			if(j<(mail.length-4))
			{
				for(var k=j;k<(mail.length-2);k++)
				{
					if(mail.charAt(k)=='.') 				
		            valideMail = true;
				}
			}
		}
	}
	
	if
	(valide==false)
	{ 
	 	alert("Veuillez saisir une adresse email valide.");
		valideMail = false;
	}
}
	 	
function valider()
{
	
	if(isEmptyValide == true && passwordValide == true && valideMail == true)
	{
		document.getElementById("sub").disabled = false; 
		
	}
	else 
	{
		document.getElementById("sub").disabled = true;
	}
				
}
}















这是我的HTML页面:










Here is my HTML page :

<!DOCTYPE html>
<html lang = "fr">
<head>
	<meta charset="utf-8" />
	<title>Formulaire</title>
	<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
	<script type="text/javascript" src="valider.js"></script>
</head>
  <body>
  <header> Sign UP </header>
  <section>
  <form name='monFormulaire' action=’/php/formulaire.php’ method=’post’ >
  <td><td><td>
  <table>
    <tr>
      <th>*</th>
      <td><p>Login :</p></td>
      <td><input type='text' name='login' id='login' size='22' ></td>
      <td><input type="image" src="img/ok.ico" id='login1' style="height:20px;visibility:hidden" />
        <input type="image" src="img/no.png" id='login0' style="height:20px;visibility:hidden" /></td>
    </tr>
    <tr>
      <th>*</th>
      <td><p>Mot de passe :</p></td>
      <td><input type='password' name='mdp' id='mdp' size='22' ></td>
      <td><input type="image" src="img/ok.ico" id='mdp1' style="height:20px;visibility:hidden" />
        <input type="image" src="img/no.png" id='mdp0' style="height:20px;visibility:hidden" /></td>
    </tr>
    <tr>
      <th>*</th>
      <td><p>eMail :</p></td>
      <td><input type='text' name='email' id='email' size='32' ></td>
      <td><input type="image" src="img/ok.ico" id='email1' style="height:20px;visibility:hidden" />
        <input type="image" src="img/no.png" id='email0' style="height:20px;visibility:hidden" /></td>
    </tr>
    <tr>
      <th></th>
      <td><p>Date de naissance :</p></td>
      <td><input type='date' value='' name='date' id='date' /></td>
      <td><input type="image" src="img/ok.ico" id='date1' style="height:20px;visibility:hidden" />
        <input type="image" src="img/no.png" id='date0' style="height:20px;visibility:hidden" /></td>
    </tr>
    <tr>
      <th></th>
      <td><p>Color : </p></td>
      <td><input type='color' name='color' id='color'></td>
      <td><input type="image" src="img/ok.ico" id='color1' style="height:20px;visibility:hidden" />
        <input type="image" src="img/no.png" id='color0' style="height:20px;visibility:hidden" /></td>
    </tr>
    <tr>
      <th></th>
      <td><p>Avatar : </p></td>
      <td><input type='file' name='file' id='file'></td>
      <td><input type="image" src="img/ok.ico" id='file1' style="height:20px;visibility:hidden" />
        <input type="image" src="img/no.png" id='file0' style="height:20px;visibility:hidden" /></td>
    </tr>
    <tr>
      <th></th>
      <td><p>Radio : </p></td>
      <td><input type='radio' name='r' id='ra1' value='b1'/>
        <input type='radio' name='r' id='ra2' value='b2'/>
        <input type='radio' name='r' id='ra3' value='b3'/>
        <input type='radio' name='r' id='ra4' value='b4'/>
        <input type='radio' name='r' id='ra5' value='b5'/></td>
      <td><input type="image" src="img/ok.ico" id='r1' style="height:20px;visibility:hidden" />
        <input type="image" src="img/no.png" id='r0' style="height:20px;visibility:hidden" /></td>
    </tr>
    <tr>
      <th></th>
      <td><p>Selection : </p></td>
      <td><select name='sel' id='sel'>
        <option value='London'> London </option>
        <option value='Paris'> Paris </option>
        <option value='Berlin'> Berlin </option>
        <option value='Budapest'> Budapest </option>
      </select></td>
      <td><input type="image" src="img/ok.ico" id='sel1' style="height:20px;visibility:hidden" />
        <input type="image" src="img/no.png" id='sel0' style="height:20px;visibility:hidden" /></td>
    </tr>
    <tr>
      <th></th>
      <td><p>Text : </p></td>
      <td><textarea cols='60' rows='8' name='txt' id='txt'></textarea></td>
      <td><input type="image" src="img/ok.ico" id='txt1' style="height:20px;visibility:hidden" />
        <input type="image" src="img/no.png" id='txt0' style="height:20px;visibility:hidden" /></td>
    </tr>
    <tr>
      <th></th>
       <td><p>Abonnement : </p></td>
      <td><input type='checkbox' name='chbox' id='chbox'></td>
      <td><input type="image" src="img/ok.ico" id='chbox1' style="height:20px;visibility:hidden" />
        <input type="image" src="img/no.png" id='chbox0' style="height:20px;visibility:hidden" /></td>
    </tr>
    <tr>
      <td colspan='4' align='center'>
        <!--bouton submit --><input type='submit' value='Envoyer' disabled='' name='sub' id='sub' >
        <input type='reset' name='raz' id='raz' ></td>
    </tr>
    <tr>
      <td colspan='2' ><p class='italique'>* champs obligatoires</p></td>
      <td colspan='2' ><div id='info+'></div></td>
    </tr>
  </table>
  <div align='center'> </div>
	</form>
  </section>
   <nav>
   </nav>  
  <footer align='center'> 	Voronitski.NET © Tous droits reserves 2014-2015</footer>
  </body>
 </html>

There are many silly mistakes you have done. Let me give you some examples.



1. In function isPassword, there are undefined variables like a, b, c, d and passwordValide. Also this function does not return anything.

2. In function isMail, there is one undefined variable valide.



Do one thing. Use Developer Tool. See the console window. You will see all the errors. Rectify them one by one.
There are many silly mistakes you have done. Let me give you some examples.

1. In function isPassword, there are undefined variables like a, b, c, d and passwordValide. Also this function does not return anything.
2. In function isMail, there is one undefined variable valide.

Do one thing. Use Developer Tool. See the console window. You will see all the errors. Rectify them one by one.