recherche

Maison >interface Web >js tutoriel >Exemple simple de JavaScript implémentant la fonction de validation de formulaire

Exemple simple de JavaScript implémentant la fonction de validation de formulaire

黄舟
黄舟original
2018-05-14 16:13:311584parcourir

Cet article présente principalement la fonction simple de vérification de formulaire implémentée par JS, impliquant l'acquisition, le jugement, la définition de la concentration et d'autres compétences opérationnelles connexes pour le contenu de soumission de formulaire. Les amis dans le besoin peuvent se référer à ce qui suit

Cet article. explique les exemples Fonction de validation de formulaire simple implémentée dans JS. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Code source : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="myjs1.js"></script>
<link rel="stylesheet" type="text/css" href="myfile-2.css" rel="external nofollow" />
</head>
<body>
<form name="f1">
姓名:<input type="text" name="xm" />
<br/>
年龄:<input type="text" name="nl" />
爱好:<input type= "checkbox" name="ah" />爬山
<input type= "checkbox" name="ah" />游泳
<input type= "checkbox" name="ah" />网球
<input type= "checkbox" name="ah" />乒乓球
<br/>
密码：<input type="password" name="mm"/>
<br/>
重复密码:<input type="password" name="cfmm"/>
<br/>
备注:<textarea name="bz" rows="10" cols="20"></textarea>
<br/>
<input type="button" value="提交" onclick="checkit();"/>
</form>
</body>
</html>

Code du fichier myjs1.js : 

// JavaScript Document
function checkit()
{ var flag = false;
 for(var i=0;i<document.forms[0].ah.length;i++)
{
if(document.forms[0].ah[i].checked)//checked 表示被选中
{
flag = true;
break;
}
}
if(!flag)//没有一个爱好被选中
{
alert("请至少选择一个爱好！");
return;//假如没有找到，又返回去，直到找到!
}
if(document.forms[0].mm.value.length<9)
{
alert("密码长度必须在8位数以上！");
document.forms[0].mm.focus();//让密码框获取焦点，焦点是 可以根据应用配合完成一些自动化操作，比如登录时输入了错误的用户名和密码，回转登录页后，可以让用户名输入框自动获得焦点，避免用户重新定位。
return;
}
if(document.forms[0].mm.value!=document.forms[0].cfmm.value)
{
alert("两次密码输入不一致，请重新输入密码！");
return;
}
if(document.forms[0].bz.value=="")
{
alert("请输入备注！");
}
}

Remarque : Utilisez var pour déclarer des variables dans js et function pour définir des fonctions.

Cet exemple peut réaliser une vérification de passe-temps (ne peut pas être vide), si le mot de passe est cohérent et la longueur du mot de passe doit être supérieure à 8 , que la remarque soit vide !

De plus, le fichier css est laissé au lecteur pour l'embellir~

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
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
Article précédent：Exemple de code pour le plug-in jQuery+jQuery.cookie.js pour implémenter la fonction de changement de skinArticle suivant：Exemple de code pour le plug-in jQuery+jQuery.cookie.js pour implémenter la fonction de changement de skin

Articles Liés

Voir plus