Javascript和表单验证 [英] Javascript and form verification

查看:61
本文介绍了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.


这篇关于Javascript和表单验证的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆