Heim  >  Artikel  >  Web-Frontend  >  Beispiel einer einfachen Formularvalidierungsfunktion, die in JS implementiert ist

Beispiel einer einfachen Formularvalidierungsfunktion, die in JS implementiert ist

韦小宝
韦小宝Original
2018-01-12 09:57:471760Durchsuche

In diesem Artikel wird hauptsächlich die von JS implementierte einfache Formularüberprüfung-Funktion vorgestellt, die die Erfassung, Beurteilung, Fokuseinstellung und andere damit verbundene Betriebsfähigkeiten von js für Formularübermittlungsinhalte umfasst Folgen Sie diesem Artikel

Das Beispiel dieses Artikels beschreibt die einfache Formularvalidierungsfunktion, die von JS implementiert wird. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Quellcode:

<!DOCTYPE html>
<html>
<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>

myjs1.js-Dateicode:

// 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, Definieren Sie Funktionen, Verwenden Sie Funktionen,

Dieses Beispiel kann eine Hobby-Verifizierung implementieren ( darf nicht leer sein), ob das Passwort konsistent ist und die Länge des Passworts größer als 8 sein muss und ob die Bemerkung leer ist. Außerdem wird die CSS-Datei dem Leser überlassen, um sie zu verschönern~

Verwandte Empfehlungen:

Lösung von Extjs Lösung zum Hochladen von Bildern, die nicht in der Vorschau angezeigt werden können_extjs

JS-Einschränkungen vor dem Hochladen von Bildern umfassen (jpg jpg gif und Größe, Höhe und Breite) usw.

Beispiel für die Vorschau von Bildern vor dem JS-Upload

Das obige ist der detaillierte Inhalt vonBeispiel einer einfachen Formularvalidierungsfunktion, die in JS implementiert ist. 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