JS はプラグインを使用してフォーム検証を完了します-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JS はプラグインを使用してフォーム検証を完了します

巴扎黑

Sep 08, 2017 am 10:50 AM

javascript 形状確認する

本文实例讲述了JS实现的通用表单验证插件。分享给大家供大家参考。具体如下：

这里演示一个通用的JS表单验证插件代码。使用方法：第一步：需设定表单项数据类型，第二步：实例表单验证，验证错误提示说明（程序有自带相关错误提示，可自定义每项验证错误提示时文本，只需添加msg）。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-normal-table-check-plug-codes/

具体代码如下：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
&lt;html xmlns="http://www.w3.org/1999/xhtml">
&lt;head>
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
&lt;title>无标题文档&lt;/title>
&lt;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;}
&lt;/style>
&lt;/head>
&lt;body>
&lt;h2>使用方法&lt;/h2>
&lt;p>第一步：需设定表单项数据类型&lt;/p>
&lt;p style="padding:10px;border:2px dashed #ea0; background-color:#ffe;">&lt;input type="text" name="name" &lt;strong style="color:#f00;">dataType="chinese[2,8]"&lt;/strong> />&lt;/p>
&lt;p>第二步：实例表单验证&lt;/p>
&lt;p style="padding:10px;border:2px dashed #ea0; background-color:#ffe;">&lt;script type="text/javascript">&lt;strong style="color:#f00;">new ValidatorForm(表单对象);&lt;/strong> &lt;/script>&lt;/p>
&lt;h3>dataType可选参数&lt;/h3>
&lt;table width="100%" border="0" cellspacing="0" cellpadding="0">
 &lt;tr>
 &lt;th colspan="3" style="text-align:left; background-color:#eee;">基础验证&lt;/th>
 &lt;/tr>
 &lt;tr>
  &lt;th>email&lt;/th>
  &lt;td>Email地址&lt;/td>
  &lt;td rowspan="11">&lt;strong>均可配合中括号使用&lt;/strong>，例如&lt;br />
  长度验证：chinese[1,10]　为限制只能输入1-10个全角字符，&lt;strong>注：一个全角字符长度为2&lt;/strong>&lt;br />
  数字大小验证：number[18,26]　为限制只能输入18-26的数字&lt;br />
  日期范围验证：date[1970-1-1,2012-12-12]　为限制1970-1-1至2012-12-12日期&lt;br />
  &lt;strong>上限及下限设定&lt;/strong>&lt;br />
  下限设定：chinese[1,]　至少输入1个或以上有效字符&lt;br />上限设定：chinese[,6]　最多输入6个有效字符&lt;br />number和date格式也类式&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;th>tel&lt;/th>
  &lt;td>电话：支持手机/固话，识别区号及全半角逗号分隔多项&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;th>mobile&lt;/th>
  &lt;td>手机号码&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;th>url&lt;/th>
  &lt;td>网址&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;th>number&lt;/th>
  &lt;td>数字&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;th>english&lt;/th>
  &lt;td>英文字母&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;th>chinese&lt;/th>
  &lt;td>全角字符&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;th>username&lt;/th>
  &lt;td>帐号：字母开头4-20位的字母数字加下划线组合&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;th>password&lt;/th>
  &lt;td>密码：4-20位字母数字或@!#$%^&*.~组合&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;th>date&lt;/th>
  &lt;td>日期&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;th>length&lt;/th>
  &lt;td>长度：格式“length[最小长度,最大长度]”&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;th colspan="3" style="text-align:left; background-color:#eee;">其它验证&lt;/th>
 &lt;/tr>
 &lt;tr>
  &lt;th>Compare&lt;/th>
  &lt;td colspan="2">值对比：格式“Compare[比较符比较对象,比较类型]”&lt;br />
  比较符包括[>,>=,&lt;,&lt;=,!=,=]&lt;br />
  比较对象为表单项name,当表单有同名name值多项时取第一项&lt;br />
  比较类型可选值[text,number,date]分别为[字符比较,数字比较,日期比较]，留空时对当前项值自动识别后对比&lt;br />
  例如Compare[=password]&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;th>exec&lt;/th>
  &lt;td colspan="2">自定义函数：格式“exec[函数名]” &lt;br />
  传入当前输入框对象，返回json格式“{stat:结果[true/false],msg:提示文本,msgCss:样式[className],inCss:输入框样式[className]}”，stat为验证结果是否正确为必须返回项，其它项留空使用默认设置[inCss暂时未使用]
  &lt;br />&lt;/td>
 &lt;/tr>
&lt;/table>
&lt;h3>验证错误提示说明&lt;/h3>
&lt;p>程序有自带相关错误提示，可自定义每项验证错误提示时文本，只需添加msg&lt;/p>
&lt;p style="padding:10px;border:2px dashed #ea0; background-color:#ffe;">&lt;input type="text" name="name" dataType="chinese[2,8]" &lt;strong style="color:#f00;">msg="姓名必需填写1-4个汉字"&lt;/strong> />&lt;/p>
&lt;form name="theForm" id="theForm" action="" method="get">
 &lt;h2>表单验证示例&lt;/h2>
 &lt;table align="center" width="100%">
 &lt;tr>
  &lt;td>真实姓名：&lt;/td>&lt;td>&lt;input type="text" name="Name" dataType="chinese[1,]" />&lt;span msgbox="1">请输入真实姓名&lt;/span>
  &lt;span id="vfMsgBox_Name">&lt;/span>
  &lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;td>英文名：&lt;/td>&lt;td>&lt;input type="text" name="Nick" dataType="english[1,10]" />&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;td>主页：&lt;/td>&lt;td>&lt;input type="text" name="Homepage" dataType="url" />&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;td>密码：&lt;/td>&lt;td>&lt;input name="password" type="text" dataType="password" />&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;td>重复：&lt;/td>&lt;td>&lt;input name="password2" type="text" dataType="Compare[=password"密码]" />&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;td>信箱：&lt;/td>&lt;td>&lt;input type="text" name="email" dataType="email[1,]" />&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;td>信箱：&lt;/td>&lt;td>&lt;input type="text" name="email2" dataType="email Compare[=email"信箱]" />&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;td>邮编：&lt;/td>&lt;td>&lt;input type="text" name="QQ" dataType="number[100000,999999]" />&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;td>日期：&lt;/td>&lt;td>&lt;input type="text" name="date" dataType="date" />
  &lt;input type="text" name="date2" dataType="Compare[>date"起始日期,date]" />
  &lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;td>年龄：&lt;/td>&lt;td>&lt;input type="text" name="Year" dataType="number[18,28]" />&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;td>年龄1：&lt;/td>&lt;td>&lt;input type="text" name="Year1" dataType="number[,18]" />&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;td>电话：&lt;/td>&lt;td>&lt;input type="text" name="Phone" dataType="tel" />&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;td>手机：&lt;/td>&lt;td>&lt;input type="text" name="mobile" dataType="mobile" />&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;td>生日：&lt;/td>&lt;td>&lt;input type="text" name="Birthday" dataTy

ログイン後にコピー

以上がJS はプラグインを使用してフォーム検証を完了しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Java チュートリアル

1676

CakePHP チュートリアル

1429

Laravel チュートリアル

1333

PHP チュートリアル

1278

C# チュートリアル

1257

Related knowledge

PDFの署名を検証する方法 Feb 18, 2024 pm 05:33 PM

私たちは通常、政府やその他の機関から PDF ファイルを受け取りますが、中にはデジタル署名が付いているものもあります。署名を検証すると、SignatureValid メッセージと緑色のチェックマークが表示されます。署名が検証されない場合、有効性は不明です。署名の検証は重要です。PDF で署名を検証する方法を見てみましょう。 PDF 形式の署名を検証する方法 PDF 形式で署名を検証すると、署名の信頼性が高まり、文書が受け入れられる可能性が高くなります。次の方法で PDF ドキュメントの署名を検証できます。 Adobe Reader で PDF を開きます。署名を右クリックし、「署名プロパティの表示」を選択します。「署名者証明書の表示」ボタンをクリックします。「信頼」タブから信頼できる証明書リストに署名を追加します。「署名の検証」をクリックして検証を完了します。

WeChatの友人による認証を使用してブロックを解除する詳細な方法 Mar 25, 2024 pm 01:26 PM

1. WeChatを開いた後、検索アイコンをクリックし、WeChatチームと入力し、下のサービスをクリックして入力します。 2. 入力後、左下隅にあるセルフサービスツールオプションをクリックします。 3. をクリックした後、上のオプションで、補助検証のブロック解除/再審査請求のオプションをクリックします。

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocketとJavaScript：リアルタイム監視システムを実現するためのキーテクノロジーはじめに：インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 Dec 17, 2023 pm 12:09 PM

JavaScript と WebSocket を使用してリアルタイムオンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき

WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 Dec 17, 2023 am 09:39 AM

WebSocket と JavaScript を使用してオンライン予約システムを実装する方法今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 Dec 17, 2023 pm 05:13 PM

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは

PHP 8 の新機能: 検証と署名の追加 Mar 27, 2024 am 08:21 AM

PHP8 は PHP の最新バージョンであり、プログラマーにさらなる利便性と機能をもたらします。このバージョンはセキュリティとパフォーマンスに特に重点を置いており、注目すべき新機能の 1 つは検証および署名機能の追加です。この記事では、これらの新機能とその使用法について詳しく説明します。検証と署名は、コンピューターサイエンスにおける非常に重要なセキュリティ概念です。これらは、送信されるデータが完全で本物であることを確認するためによく使用されます。オンライン取引や機密情報を扱う場合、検証と署名がさらに重要になります。誰かがデータを改ざんできると、潜在的にデータが改ざんされる可能性があるためです。

See all articles

JS はプラグインを使用してフォーム検証を完了します

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック