suchen

Heim >Web-Frontend >js-Tutorial >Einfaches Beispiel für die Implementierung der Formularvalidierungsfunktion in JavaScript

Einfaches Beispiel für die Implementierung der Formularvalidierungsfunktion in JavaScript

黄舟
黄舟Original
2018-05-14 16:13:311585Durchsuche

In diesem Artikel wird hauptsächlich die von JS implementierte einfache Formularüberprüfungsfunktion vorgestellt, die die Erfassung, Beurteilung, Fokuseinstellung und andere damit verbundene Betriebsfähigkeiten für Formularübermittlungsinhalte umfasst. Freunde in Not können sich auf den folgenden Artikel beziehen erklärt die Beispiele. Eine einfache Formularvalidierungsfunktion, die in JS implementiert ist. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Quellcode:

myjs1.js-Dateicode: 
<!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>

// 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("请输入备注！");
}
}
Hinweis:

Verwenden Sie var, um Variablen in js zu deklarieren, und function, um Funktionen zu definieren.Dieses Beispiel kann die Überprüfung von Hobbys (darf nicht leer sein) und der Konsistenz des Passworts realisieren , und die Länge des Passworts muss größer als 8 sein, unabhängig davon, ob der Kommentar leer ist!

Außerdem wird die CSS-Datei dem Leser überlassen, um sie zu verschönern~

Das obige ist der detaillierte Inhalt vonEinfaches Beispiel für die Implementierung der Formularvalidierungsfunktion in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Beispielcode für das Plug-in jQuery+jQuery.cookie.js zur Implementierung der Skin-ÄnderungsfunktionNächster Artikel：Beispielcode für das Plug-in jQuery+jQuery.cookie.js zur Implementierung der Skin-Änderungsfunktion

In Verbindung stehende Artikel

Mehr sehen