Einführung in die Verwendung des JavaScript-Formularvalidierungs-Plug-ins-js-Tutorial-php.cn

Inhaltsverzeichnis

使用方法

dataType可选参数

验证错误提示说明

表单验证示例

Heim

Web-Frontend

js-Tutorial

Einführung in die Verwendung des JavaScript-Formularvalidierungs-Plug-ins

巴扎黑

Aug 22, 2017 am 11:08 AM

javascript js 验证

Das Beispiel in diesem Artikel beschreibt das von JS implementierte universelle Formularvalidierungs-Plug-in. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Hier ist ein allgemeiner JS-Formularvalidierungs-Plug-in-Code. Verwendung: Schritt 1: Legen Sie den Datentyp des Formularelements fest, Schritt 2: Instanzformularüberprüfung, Anweisungen zur Überprüfungsfehleraufforderung (das Programm verfügt über eigene Fehleraufforderungen, Sie können den Text jeder Überprüfungsfehleraufforderung anpassen, fügen Sie einfach msg hinzu).

Der Screenshot des Laufeffekts lautet wie folgt:

Einführung in die Verwendung des JavaScript-Formularvalidierungs-Plug-ins

Der spezifische Code lautet wie folgt:

<!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>
<style> 
body,td{font:12px Verdana;color:#333}
input,textarea,select,td,th{font:12px Verdana;color:#333;border:1px solid #999;background:#fff}
table{border-collapse:collapse;}
th{font:bold 12px Verdana; text-align:right;padding:5px;}
td{padding:3px;line-height:1.8;}
input{height:20;}
textarea{width:80%;height:50px;overfmin:auto;}
form{display:inline}
/*输入框样式*/
input[type=text],input[type=password],textarea{border:1px solid #ccc;padding:2px;border-radius:1px;box-shadow:0 1px 2px rgba(0,0,0,0.1) inset;outline:medium none;line-height:25px;
-webkit-transition:all 0.15s ease-in 0s;
-moz-transition:all 0.15s ease-in 0s;
-o-transition:all 0.15s ease-in 0s;
font-family:"Microsoft YaHei",Verdana,Arial;
font-size:14px;
vertical-align:top;
}
input[type=text],input[type=password]{height:25px;}
input[type=text]:focus,input[type=password]:focus,textarea:focus{/*border-color:rgba(82,168,236,0.8);*/border-color:#52a8ec;box-shadow:0 1px 2px rgba(0,0,0,0.1) inset,0 0 5px rgba(82,168,236,0.6);outline:0 none;}
</style>
</head>
<body>
<h2 id="使用方法">使用方法</h2>
<p>第一步：需设定表单项数据类型</p>
<p style="padding:10px;border:2px dashed #ea0; background-color:#ffe;"><input type="text" name="name" <strong style="color:#f00;">dataType="chinese[2,8]"</strong> /></p>
<p>第二步：实例表单验证</p>
<p style="padding:10px;border:2px dashed #ea0; background-color:#ffe;"><script type="text/javascript"><strong style="color:#f00;">new ValidatorForm(表单对象);</strong> </script></p>
<h3 id="dataType可选参数">dataType可选参数</h3>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <th colspan="3" style="text-align:left; background-color:#eee;">基础验证</th>
 </tr>
 <tr>
  <th>email</th>
  <td>Email地址</td>
  <td rowspan="11"><strong>均可配合中括号使用</strong>，例如<br />
  长度验证：chinese[1,10]　为限制只能输入1-10个全角字符，<strong>注：一个全角字符长度为2</strong><br />
  数字大小验证：number[18,26]　为限制只能输入18-26的数字<br />
  日期范围验证：date[1970-1-1,2012-12-12]　为限制1970-1-1至2012-12-12日期<br />
  <strong>上限及下限设定</strong><br />
  下限设定：chinese[1,]　至少输入1个或以上有效字符<br />上限设定：chinese[,6]　最多输入6个有效字符<br />number和date格式也类式</td>
 </tr>
 <tr>
  <th>tel</th>
  <td>电话：支持手机/固话，识别区号及全半角逗号分隔多项</td>
 </tr>
 <tr>
  <th>mobile</th>
  <td>手机号码</td>
 </tr>
 <tr>
  <th>url</th>
  <td>网址</td>
 </tr>
 <tr>
  <th>number</th>
  <td>数字</td>
 </tr>
 <tr>
  <th>english</th>
  <td>英文字母</td>
 </tr>
 <tr>
  <th>chinese</th>
  <td>全角字符</td>
 </tr>
 <tr>
  <th>username</th>
  <td>帐号：字母开头4-20位的字母数字加下划线组合</td>
 </tr>
 <tr>
  <th>password</th>
  <td>密码：4-20位字母数字或@!#$%^&*.~组合</td>
 </tr>
 <tr>
  <th>date</th>
  <td>日期</td>
 </tr>
 <tr>
  <th>length</th>
  <td>长度：格式“length[最小长度,最大长度]”</td>
 </tr>
 <tr>
  <th colspan="3" style="text-align:left; background-color:#eee;">其它验证</th>
 </tr>
 <tr>
  <th>Compare</th>
  <td colspan="2">值对比：格式“Compare[比较符比较对象,比较类型]”<br />
  比较符包括[>,>=,<,<=,!=,=]<br />
  比较对象为表单项name,当表单有同名name值多项时取第一项<br />
  比较类型可选值[text,number,date]分别为[字符比较,数字比较,日期比较]，留空时对当前项值自动识别后对比<br />
  例如Compare[=password]</td>
 </tr>
 <tr>
  <th>exec</th>
  <td colspan="2">自定义函数：格式“exec[函数名]” <br />
  传入当前输入框对象，返回json格式“{stat:结果[true/false],msg:提示文本,msgCss:样式[className],inCss:输入框样式[className]}”，stat为验证结果是否正确为必须返回项，其它项留空使用默认设置[inCss暂时未使用]
  <br /></td>
 </tr>
</table>
<h3 id="验证错误提示说明">验证错误提示说明</h3>
<p>程序有自带相关错误提示，可自定义每项验证错误提示时文本，只需添加msg</p>
<p style="padding:10px;border:2px dashed #ea0; background-color:#ffe;"><input type="text" name="name" dataType="chinese[2,8]" <strong style="color:#f00;">msg="姓名必需填写1-4个汉字"</strong> /></p>
<form name="theForm" id="theForm" action="" method="get">
 <h2 id="表单验证示例">表单验证示例</h2>
 <table align="center" width="100%">
 <tr>
  <td>真实姓名：</td><td><input type="text" name="Name" dataType="chinese[1,]" /><span msgbox="1">请输入真实姓名</span>
  <span id="vfMsgBox_Name"></span>
  </td>
 </tr>
 <tr>
  <td>英文名：</td><td><input type="text" name="Nick" dataType="english[1,10]" /></td>
 </tr>
 <tr>
  <td>主页：</td><td><input type="text" name="Homepage" dataType="url" /></td>
 </tr>
 <tr>
  <td>密码：</td><td><input name="password" type="text" dataType="password" /></td>
 </tr>
 <tr>
  <td>重复：</td><td><input name="password2" type="text" dataType="Compare[=password"密码]" /></td>
 </tr>
 <tr>
  <td>信箱：</td><td><input type="text" name="email" dataType="email[1,]" /></td>
 </tr>
 <tr>
  <td>信箱：</td><td><input type="text" name="email2" dataType="email Compare[=email"信箱]" /></td>
 </tr>
 <tr>
  <td>邮编：</td><td><input type="text" name="QQ" dataType="number[100000,999999]" /></td>
 </tr>
 <tr>
  <td>日期：</td><td><input type="text" name="date" dataType="date" />
  <input type="text" name="date2" dataType="Compare[>date"起始日期,date]" />
  </td>
 </tr>
 <tr>
  <td>年龄：</td><td><input type="text" name="Year" dataType="number[18,28]" /></td>
 </tr>
 <tr>
  <td>年龄1：</td><td><input type="text" name="Year1" dataType="number[,18]" /></td>
 </tr>
 <tr>
  <td>电话：</td><td><input type="text" name="Phone" dataType="tel" /></td>
 </tr>
 <tr>
  <td>手机：</td><td><input type="text" name="mobile" dataType="mobile" /></td>
 </tr>
 <tr>  <td>生日：</td><td><input type="text" name="Birthday" dataTy

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung des JavaScript-Formularvalidierungs-Plug-ins. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

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

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Beste grafische Einstellungen

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

2 Wochen vor By DDD

R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Chat -Befehle und wie man sie benutzt

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7519

CakePHP-Tutorial

1378

Wie lautet das Format des Kontonamens von Steam?

Win11 -Aktivierungsschlüssel dauerhaft

NYT -Verbindungen Hinweise und Antworten

Related knowledge

So überprüfen Sie die Signatur in PDF Feb 18, 2024 pm 05:33 PM

Normalerweise erhalten wir PDF-Dateien von der Regierung oder anderen Behörden, teilweise mit digitalen Signaturen. Nach der Überprüfung der Signatur sehen wir die Meldung SignatureValid und ein grünes Häkchen. Wenn die Signatur nicht überprüft wird, ist die Gültigkeit unbekannt. Die Überprüfung von Signaturen ist wichtig. Sehen wir uns an, wie das im PDF-Format geht. So überprüfen Sie Signaturen im PDF-Format. Durch die Überprüfung von Signaturen im PDF-Format wird das Dokument vertrauenswürdiger und die Wahrscheinlichkeit erhöht, dass es akzeptiert wird. Sie können Signaturen in PDF-Dokumenten auf folgende Weise überprüfen. Öffnen Sie die PDF-Datei im Adobe Reader. Klicken Sie mit der rechten Maustaste auf die Signatur und wählen Sie „Signatureigenschaften anzeigen“. Klicken Sie auf die Schaltfläche „Unterzeichnerzertifikat anzeigen“. Fügen Sie die Signatur auf der Registerkarte „Vertrauen“ zur Liste „Vertrauenswürdige Zertifikate“ hinzu. Klicken Sie auf „Signatur überprüfen“, um die Überprüfung abzuschließen

Detaillierte Methode zum Entsperren mithilfe der freundunterstützten WeChat-Verifizierung Mar 25, 2024 pm 01:26 PM

1. Klicken Sie nach dem Öffnen von WeChat auf das Suchsymbol, geben Sie das WeChat-Team ein und klicken Sie zum Betreten auf den Dienst unten. 2. Klicken Sie nach der Eingabe auf die Option „Self-Service-Tool“ in der unteren linken Ecke. 3. Klicken Sie nach dem Anklicken in den Optionen oben auf die Option zum Entsperren/Einspruch für eine zusätzliche Verifizierung.

Empfohlen: Ausgezeichnetes JS-Open-Source-Projekt zur Gesichtserkennung und -erkennung Apr 03, 2024 am 11:55 AM

Die Technologie zur Gesichtserkennung und -erkennung ist bereits eine relativ ausgereifte und weit verbreitete Technologie. Derzeit ist JS die am weitesten verbreitete Internetanwendungssprache. Die Implementierung der Gesichtserkennung und -erkennung im Web-Frontend hat im Vergleich zur Back-End-Gesichtserkennung Vor- und Nachteile. Zu den Vorteilen gehören die Reduzierung der Netzwerkinteraktion und die Echtzeiterkennung, was die Wartezeit des Benutzers erheblich verkürzt und das Benutzererlebnis verbessert. Die Nachteile sind: Es ist durch die Größe des Modells begrenzt und auch die Genauigkeit ist begrenzt. Wie implementiert man mit js die Gesichtserkennung im Web? Um die Gesichtserkennung im Web zu implementieren, müssen Sie mit verwandten Programmiersprachen und -technologien wie JavaScript, HTML, CSS, WebRTC usw. vertraut sein. Gleichzeitig müssen Sie auch relevante Technologien für Computer Vision und künstliche Intelligenz beherrschen. Dies ist aufgrund des Designs der Webseite erwähnenswert

Wesentliche Tools für die Aktienanalyse: Lernen Sie die Schritte zum Zeichnen von Kerzendiagrammen mit PHP und JS Dec 17, 2023 pm 06:55 PM

Wesentliche Tools für die Aktienanalyse: Lernen Sie die Schritte zum Zeichnen von Kerzendiagrammen in PHP und JS. Mit der rasanten Entwicklung des Internets und der Technologie ist der Aktienhandel für viele Anleger zu einer wichtigen Möglichkeit geworden. Die Aktienanalyse ist ein wichtiger Teil der Anlegerentscheidung, und Kerzendiagramme werden häufig in der technischen Analyse verwendet. Wenn Sie lernen, wie man Kerzendiagramme mit PHP und JS zeichnet, erhalten Anleger intuitivere Informationen, die ihnen helfen, bessere Entscheidungen zu treffen. Ein Candlestick-Chart ist ein technischer Chart, der Aktienkurse in Form von Candlesticks anzeigt. Es zeigt den Aktienkurs

WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen Dec 17, 2023 pm 05:30 PM

WebSocket und JavaScript: Schlüsseltechnologien zur Realisierung von Echtzeit-Überwachungssystemen Einführung: Mit der rasanten Entwicklung der Internet-Technologie wurden Echtzeit-Überwachungssysteme in verschiedenen Bereichen weit verbreitet eingesetzt. Eine der Schlüsseltechnologien zur Erzielung einer Echtzeitüberwachung ist die Kombination von WebSocket und JavaScript. In diesem Artikel wird die Anwendung von WebSocket und JavaScript in Echtzeitüberwachungssystemen vorgestellt, Codebeispiele gegeben und deren Implementierungsprinzipien ausführlich erläutert. 1. WebSocket-Technologie

Neue Funktionen in PHP 8: Verifizierung und Signierung hinzugefügt Mar 27, 2024 am 08:21 AM

PHP8 ist die neueste Version von PHP und bietet Programmierern mehr Komfort und Funktionalität. Bei dieser Version liegt ein besonderer Schwerpunkt auf Sicherheit und Leistung, und eine der bemerkenswerten neuen Funktionen ist die Hinzufügung von Verifizierungs- und Signierungsfunktionen. In diesem Artikel werfen wir einen genaueren Blick auf diese neuen Funktionen und ihre Verwendung. Verifizierung und Signierung sind sehr wichtige Sicherheitskonzepte in der Informatik. Sie dienen häufig dazu, sicherzustellen, dass die übermittelten Daten vollständig und authentisch sind. Verifizierung und Signaturen werden beim Umgang mit Online-Transaktionen und sensiblen Informationen noch wichtiger, denn wenn jemand in der Lage ist, die Daten zu manipulieren, könnte dies möglicherweise der Fall sein

PHP- und JS-Entwicklungstipps: Beherrschen Sie die Methode zum Zeichnen von Aktienkerzendiagrammen Dec 18, 2023 pm 03:39 PM

Mit der rasanten Entwicklung der Internetfinanzierung sind Aktieninvestitionen für immer mehr Menschen zur Wahl geworden. Im Aktienhandel sind Kerzendiagramme eine häufig verwendete Methode der technischen Analyse. Sie können den sich ändernden Trend der Aktienkurse anzeigen und Anlegern helfen, genauere Entscheidungen zu treffen. In diesem Artikel werden die Entwicklungskompetenzen von PHP und JS vorgestellt, der Leser wird zum Verständnis des Zeichnens von Aktienkerzendiagrammen geführt und es werden spezifische Codebeispiele bereitgestellt. 1. Aktien-Kerzendiagramme verstehen Bevor wir uns mit dem Zeichnen von Aktien-Kerzendiagrammen befassen, müssen wir zunächst verstehen, was ein Kerzendiagramm ist. Candlestick-Charts wurden von den Japanern entwickelt

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Dec 17, 2023 pm 05:13 PM

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Einführung: Heutzutage ist die Genauigkeit von Wettervorhersagen für das tägliche Leben und die Entscheidungsfindung von großer Bedeutung. Mit der Weiterentwicklung der Technologie können wir genauere und zuverlässigere Wettervorhersagen liefern, indem wir Wetterdaten in Echtzeit erhalten. In diesem Artikel erfahren Sie, wie Sie mit JavaScript und WebSocket-Technologie ein effizientes Echtzeit-Wettervorhersagesystem aufbauen. In diesem Artikel wird der Implementierungsprozess anhand spezifischer Codebeispiele demonstriert. Wir

See all articles