Maison > interface Web > js tutoriel > validation de formulaire javascript compétences encyclopedia_javascript

validation de formulaire javascript compétences encyclopedia_javascript

WBOY
Libérer: 2016-05-16 15:45:43
original
1328 Les gens l'ont consulté

Les données de formulaire typiques validées par JavaScript sont les suivantes :

1. L'utilisateur a-t-il rempli les éléments requis dans le formulaire ?

2. L'adresse e-mail saisie par l'utilisateur est-elle légale ?

3. L'utilisateur a-t-il saisi une date légale ?

4. L'utilisateur a-t-il saisi du texte dans le champ numérique ?

Voici le code de vérification du nom d'utilisateur et du mot de passe :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
function validateForm()
{
 var username = document.forms["myForm"]["username"].value;
 var password = document.forms["myForm"]["password"].value;
 alert(username+" "+password);
}
</script>
</head>
<body>
<form name="myForm" action="" onSubmit=" return validateForm()" method="post">
用户名:<input type="text" name="username"/><br/>
密码:<input type="password" name="password"/><br/>
 <input type="submit" value="提交"/>
</form>
</body>
</html>
Copier après la connexion

Vérification de l'article obligatoire (ou obligatoire) :

La fonction suivante permet de vérifier si l'utilisateur a rempli les éléments requis (ou obligatoires) dans le formulaire. Si requis ou si le champ requis est vide, une boîte d'avertissement apparaîtra et la valeur de retour de la fonction est fausse, sinon la valeur de retour de la fonction est vraie (ce qui signifie qu'il n'y a pas de problème avec les données) :

function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
 {alert(alerttxt);return false}
else {return true}
}
}
Copier après la connexion

Voici le code ainsi que le formulaire HTML :

<html>
<head>
<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
 {
 if (value==null||value=="")
 {alert(alerttxt);return false}
 else {return true}
 }
}
function validate_form(thisform)
{
with (thisform)
 {
 if (validate_required(email,"Email must be filled out!")==false)
 {email.focus();return false}
 }
}
</script>
</head>
<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit"> 
</form>
</body>
</html>
Copier après la connexion

Vérification des e-mails

La fonction ci-dessous vérifie si les données saisies sont conformes à la syntaxe de base d'une adresse email.

Cela signifie que les données d'entrée doivent contenir le symbole @ et le point (.). En même temps, @ ne peut pas être le premier caractère de l'adresse email, et il doit y avoir au moins un point après @ :

function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2) 
 {alert(alerttxt);return false}
else {return true}
}
}
Copier après la connexion

Voici le code complet ainsi que le formulaire HTML :





Email:
Copier après la connexion

Le code ci-dessus est le nom d'utilisateur, le mot de passe, les champs obligatoires, les options obligatoires et l'e-mail, ainsi que le code du formulaire. J'espère qu'il sera utile à tout le monde d'apprendre la vérification du formulaire javascript.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal