Dreamweaver を使用して共通登録ページ フォームをデザインする verify_html/css_WEB-ITnose

Web 登録ページの検証デザインは、Dreamweaver のフォームまたは spry ライブラリを使用して実装する必要があります。
ここで紹介する最初のものは、最も独創的なフォーム検証方法です。つまり、即時検証を使用せず、送信ボタンをクリックして検証する必要があり、正規表現や AJAX 検証、JQuery 検証も使用しませんが、認証方法は最初の認証の後に書きます

1. 最も独創的な登録認証方法です。認証するには送信ボタンをクリックする必要があります

最初の写真

コードは次のとおりです:

HTML コードのコピー コード
1.
2.
4. 無題のドキュメント
9.

11.
219.

登録手順: 1. 情報を入力> 2. メールを受信> 3. 登録が完了しました

223。

225.

348.

名前:

id=”fname” size=”24”>

姓:

237.size=“24”> ;

ログイン名:

243.size ="24">

244.(a-z、0-9、アンダースコアを含めることができます)

メール:

263.id="email" size= "24"> (@ 文字を含む必要があります)

性別: 趣味: 生年月日: 333. サービス利用規約をお読みになることを歓迎します。この規約では、利用規約が Taobao.com Web サイト上のさまざまなツールやサービスの使用に適用されることについて説明します。 341.4. オンライン取引プラットフォームの特殊性により、タオバオはすべてのユーザーの登録情報、すべての取引行動、および取引に関連するその他の事項を事前に確認する義務を負いません。 れーれー れーれー

パスワード:

250.id=”pass” size=” 26">
251. (少なくとも 6 文字を含む)

パスワードを再度入力してください:

257.class="register_textBroader" id= "rpass" size="26">

   <INPUT name="gen" type="radio"   value="男" checked>  

    男    

れーれーれーれーれーれーれーれー

   <INPUT name="gen" type="radio" value="女" class="input">       女  

 <LABEL>  

   <INPUT type="checkbox" name="checkbox" value="checkbox">  

 </LABEL>  

     运动    

 <LABEL>  

 <INPUT type="checkbox" name="checkbox2" value="checkbox">  

 </LABEL>  

295.size=4 maxLength=4 > 年  

rrリー、レー、レー、レー、レー、レー、レー、レー、レー、レー、レー、レー、レー、レー、レー、レー、レー、レー、レー、レー、レー、レー、レー、レー、レー、レー、レー、レー

   聊天    

 <LABEL>  

   <INPUT type="checkbox" name="checkbox22" value="checkbox">  

313.size=2 maxLength =2 >日

 </LABEL>  

rree

rree rree rree rree rree rree rree rree

334. このサービス契約の当事者は淘宝網と淘宝網のユーザーであり、このサービス契約には契約上の効力があります。

335. タオバオの権利と義務

336.1. タオバオは、既存のテクノロジーに基づいてオンライン取引プラットフォーム全体の正常な動作を維持し、ユーザーのオンライン取引活動を円滑にするためにテクノロジーのアップグレードと改善に努める義務があります。

337.2. タオバオは、タオバオオンライン取引プラットフォームの使用登録時にユーザーが遭遇した取引または登録関連の問題および報告に迅速に対応するものとします。

338.3. タオバオオンライン取引プラットフォーム上での不適切な行為、またはタオバオがサービスを終了すべきと判断したその他の状況に対して、タオバオはユーザーに尋ねることなくいつでも関連情報を削除し、サービス提供を終了する権利を有します。同意。

349.
350.
351.
352.

2、正则表达式方式的验证方式【这个验证比较标准而且比较全面，不过也是通过点击提交按钮才进行验证】

本实例可以这样验证

具体代码

1.
2.
3.
4.
5.表单验证类Validator v1
6.
15.
16.
17.

   <form name="theForm" id="demo" method="get" onSubmit="return Validator.Validate(this,2)">  

           <tr>  

                   <td>身份证号：</td>  

                   <td><input name="Card" dataType="IdCard" msg="身份证号错误"></td>  

           </tr>  

           <tr>  

                   <td>真实姓名：</td>  

                   <td><input name="Name" dataType="Chinese" msg="真实姓名只允许中文"></td>  

           </tr>  

           <tr>  

                   <td>ID：</td>  

                   <td><input name="username" dataType="Username" msg="ID名不符合规定"></td>  

           </tr>  

           <tr>  

                   <td>英文名：</td>  

                   <td><input name="Nick" dataType="English" require="false" msg="英文名只允许英文字母"></td>  

           </tr>  

           <tr>  

                   <td>主页：</td>  

                   <td><input name="Homepage" require="false" dataType="Url"   msg="非法的Url"></td>  

           </tr>  

           <tr>  

                   <td>密码：</td>  

                   <td><input name="Password" dataType="SafeString"   msg="密码不符合安全规则" type="password"></td>  

           </tr>  

           <tr>  

                   <td>重复：</td>  

                   <td><input name="Repeat" dataType="Repeat" to="Password" msg="两次输入的密码不一致" type="password"></td>  

           </tr>  

           <tr>  

                   <td>信箱：</td>  

                   <td><input name="Email" dataType="Email" msg="信箱格式不正确"></td>  

           </tr>  

           <tr>  

                   <td>信箱：</td>  

                   <td><input name="Email" dataType="Repeat" to="Email" msg="两次输入的信箱不一致"></td>  

           </tr>  

           <tr>  

                   <td>QQ：</td>  

                   <td><input name="QQ" require="false" dataType="QQ" msg="QQ号码不存在"></td>  

           </tr>  

           <tr>  

                   <td>身份证：</td>  

                   <td><input name="Card" dataType="IdCard" msg="身份证号码不正确"></td>  

           </tr>  

           <tr>  

                   <td>年龄：</td>  

                   <td><input name="Year" dataType="Range" msg="年龄必须在18~28之间" min="18" max="28"></td>  

           </tr>  

           <tr>  

                   <td>年龄1：</td>  

                   <td><input name="Year1" require="false" dataType="Compare" msg="年龄必须在18以上" to="18" operator="GreaterThanEqual"></td>  

           </tr>  

           <tr>  

                   <td>电话：</td>  

                   <td><input name="Phone" require="false" dataType="Phone" msg="电话号码不正确"></td>  

           </tr>  

           <tr>  

                   <td>手机：</td>  

                   <td><input name="Mobile" require="false" dataType="Mobile" msg="手机号码不正确"></td>  

           </tr>  

           <tr>  

                   <td>生日：</td>  

                   <td><input name="Birthday" dataType="Date" format="ymd" msg="生日日期不存在"></td>  

           </tr>  

           <tr>  

                   <td>邮政编码：</td>  

                   <td><input name="Zip" dataType="Custom" regexp="^[1-9]\d{5}$" msg="邮政编码不存在"></td>  

           </tr>  

           <tr>  

                   <td>邮政编码：</td>  

                   <td><input name="Zip1" dataType="Zip" msg="邮政编码不存在"></td>  

           </tr>  

           <tr>  

                   <td>操作系统：</td>  

                   <td><select name="Operation" dataType="Require"  msg="未选择所用操作系统" >  

                                   <option value="">选择您所用的操作系统</option>  

                                   <option value="Win98">Win98</option>  

                                   <option value="Win2k">Win2k</option>  

                                   <option value="WinXP">WinXP</option>  

                           </select></td>  

           </tr>  

           <tr>  

                   <td>所在省份：</td>  

                   <td>广东  

                           <input name="Province" value="1" type="radio">  

                           陕西  

                           <input name="Province" value="2" type="radio">  

                           浙江  

                           <input name="Province" value="3" type="radio">  

                           江西  

                           <input name="Province" value="4" type="radio" dataType="Group"  msg="必须选定一个省份" ></td>  

           </tr>  

           <tr>  

                   <td>爱好：</td>  

                   <td>运动  

                           <input name="Favorite" value="1" type="checkbox">  

                           上网  

                           <input name="Favorite" value="2" type="checkbox">  

                           听音乐  

                           <input name="Favorite" value="3" type="checkbox">  

                           看书  

                           <input name="Favorite" value="4" type="checkbox"" dataType="Group" min="2" max="3"  msg="必须选择2~3种爱好"></td>  

           </tr>  

           <td>自我介绍：</td>  

           <td><textarea name="Description" dataType="Limit" max="10"  msg="自我介绍内容必须在10个字之内">中文是一个字</textarea></td>  

           </tr>  

           <td>自传：</td>  

           <td><textarea name="History" dataType="LimitB" min="3" max="10"  msg="自传内容必须在[3,10]个字节之内">中文是两个字节t</textarea></td>  

           </tr>  

           <tr>  

                   <td>相片上传：</td>  

                   <td><input name="up" dataType="Filter" msg="非法的文件格式" type="file" accept="jpg, gif, png"></td>  

           </tr>  

           <tr>  

                   <td colspan="2"><input name="Submit" type="submit" value="确定提交">  

                           <input onClick="Validator.Validate(document.getElementById('demo'))" value="检验模式1" type="button">  

                           <input onClick="Validator.Validate(document.getElementById('demo'),2)" value="检验模式2" type="button">  

                           <input onClick="Validator.Validate(document.getElementById('demo'),3)" value="检验模式3" type="button"></td>  

           </tr>  

   </form>  

141. </table>
142.
346.
347.

第三种验证，实际项目中比较常用的(JQuery+AJAX+MD5)，属于即时验证，亮点是验证用户是否存在的那一项

具体示例

registe.jsp

Html代码 复制代码 收藏代码
1.%@ page pageEncoding="UTF-8"%
2.%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %
3.%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %
4.
5.
6.
7.注册验证
8.
9.
10.
11.

13.
49.
50.
51.
52.
53.
54.
55.

注册新会员

 <form id="myform" action="account.do?method=registe" method="post">  

       <table width="100%" border="0" cellspacing="5" cellpadding="5">  

   <tr>  

     <td width="23%" align="right"><span class="redStar">*</span>会员名：</td>  

     <td width="19%">  

       <input name="loginname" class="text" type="text" id="loginname" tabindex="1" size="30" maxlength="20" />  

       <input type="button" value="用户名是否可用" id="lnbtn"/>  

       </td>  

     <td width="58%"><div id="loginnameTip"></div></td>  

   </tr>  

   <tr>  

     <td align="right"><span class="redStar">*</span>密码：</td>  

     <td><input name="pwd" class="text" type="password" id="pwd" tabindex="2" size="30" maxlength="20" /></td>  

     <td><div id="pwdTip"></div></td>  

   </tr>  

   <tr>  

     <td align="right"><span class="redStar">*</span>重复密码：</td>  

     <td><input name="confirm_pwd" class="text" type="password" id="confirm_pwd" tabindex="3" size="30" maxlength="20" /></td>  

     <td><div id="confirm_pwdTip"></div></td>  

   </tr>  

   <tr>  

     <td align="right"><span class="redStar">*</span>邮件地址：</td>  

     <td><input id="email" class="text" tabindex="4" name="email" size="30" type="text" /></td>  

     <td><div id="emailTip"></div></td>  

   </tr>  

   <tr>  

     <td colspan="3" align="right"><div align="center">-------------------------------- 以 下 为 选 填 项 目 ----------------------------------</div></td>  

     </tr>  

   <tr>  

     <td align="right">真实姓名：</td>  

     <td><input id="username" class="text" name="username" tabindex="5" size="30" type="text" /> </td>  

     <td><div id="usernameTip"></div></td>  

   </tr>  

   <tr>  

     <td align="right">联系电话：</td>  

     <td><input id="phone" class="text" name="phone" tabindex="6" size="30" type="text" /> </td>  

     <td><div id="phoneTip"></div></td>  

   </tr>  

   <tr>  

     <td align="right">手机号码：</td>  

     <td><input id="mobile" class="text" name="mobile" tabindex="7" size="30" type="text" /> </td>  

     <td><div id="mobileTip"></div></td>  

   </tr>  

   <tr>  

     <td align="right">通讯地址：</td>  

     <td><input id="address" class="text" name="address" tabindex="9" size="35" type="text" /> </td>  

     <td><div id="addressTip"></div></td>  

   </tr>  

   <tr>  

     <td align="right">邮政编码：</td>  

     <td><input id="zipCode" class="text" name="zipCode" tabindex="10" size="30" type="text" /> </td>  

     <td><div id="zipCodeTip"></div></td>  

   </tr>  

   <tr>  

     <td align="right"></td>  

     <td colspan="2"><input type="submit" class="submit" tabindex="11" value="提交注册"/></td>  

   </tr>  

 </table>  

 </form>  

122.
123.
124.

126.
127.

AccountServlet.java

Java代码 复制代码 收藏代码
1.package com.validator.test;

3.import java.io.IOException;
4.import java.io.PrintWriter;

6.import javax.servlet.ServletException;
7.import javax.servlet.http.HttpServlet;
8.import javax.servlet.http.HttpServletRequest;
9.import javax.servlet.http.HttpServletResponse;

11.public class AccountServlet extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)

       throws ServletException, IOException {  

   this.doPost(request, response);  

}

public void doPost(HttpServletRequest request, HttpServletResponse response)

       throws ServletException, IOException {  

   String loginname=request.getParameter("loginname");  

   PrintWriter out = response.getWriter();  

   if(loginname.equals("abc123")){  

       out.println("1");  

   }else{  

       out.println("0");  

   }  

   out.flush();  

}

32.}
代码编写完毕，保存表单页
ok.

関連ラベル：

使用dreamweaver设计常用注册页面表单验证

ソース：php.cn

前の記事：CSSフィールドlayout_html/css_WEB-ITnose 次の記事：CSS仕様_html/css_WEB-ITnose

このウェブサイトの声明

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

著者別の最新記事

• NullPointerException とは何ですか?どのように修正すればよいですか?
  2024-10-22 09:46:29
• 初心者からプログラマーへ: 旅は C の基礎から始まります
  2024-10-13 13:53:41
• PHP による Web 開発のロックを解除する: 初心者ガイド
  2024-10-12 12:15:51
• C の謎を解く: 新人プログラマーのための明確でシンプルな道
  2024-10-11 22:47:31
• コーディングの可能性を解き放つ: まったくの初心者のための C プログラミング
  2024-10-11 19:36:51
• 内なるプログラマーを解き放つ: まったくの初心者のための C
  2024-10-11 15:50:41
• C で生活を自動化する: 初心者向けのスクリプトとツール
  2024-10-11 15:07:41
• PHP を簡単に: Web 開発の最初のステップ
  2024-10-11 14:21:21
• Python で何でも構築: 創造性を解き放つための初心者ガイド
  2024-10-11 12:59:11
• コーディングの鍵: 初心者のための Python の力を解き放つ
  2024-10-11 12:17:31

最新の問題

WooCommerce Checkout - ユーザーの役割とカートの内容を検証する WooCommerce のチェックアウト プロセスで問題が発生しています。通常商品とB2B商品を区別するために「B2BforWooCommerce」プラグインを使用しています。シナ...

から 2024-04-03 11:58:52

0

1

475

関連トピック

詳細>

• JS のドキュメントの概要
• Printf の使い方百科事典
• スクリプトエラーの解決方法
• getpropertyの使用法
• Linuxのfork機能を詳しく解説
• バイナンス取引所はどうですか？
• jsシフト演算子の使い方
• リモートデスクトップが接続できない原因を紹介

人気のおすすめ

• URLってどういう意味ですか？
• DOM とはどういう意味ですか?
• 画像サイズを変更する方法
• HTMLでフォントを太字にする方法
• HTML画像のサイズを設定する方法

人気のチュートリアル

詳細>

関連するチュートリアル

人気のおすすめ

最新のコース

• 
  最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)

  1417730
• 
  PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ

  4258921
• 
  JAVA 初心者向けビデオチュートリアル

  2486353
• 
  Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル

  504205
• 
  PHP ゼロベースの入門チュートリアル

  858915

• 
  最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)

  1417730 回の学習
• 
  JAVA 初心者向けビデオチュートリアル

  2486353 回の学習
• 
  Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル

  504205 回の学習
• 
  Web フロントエンド開発の簡単な紹介

  215359 回の学習
• 
  PSビデオチュートリアルをゼロからマスターする

  879812 回の学習

• 
  [Web フロントエンド] Node.js クイック スタート

  6586 回の学習
• 
  海外のWeb開発フルスタックコースの完全なコレクション

  5117 回の学習
• 
  Go言語実践GraphQL

  4290 回の学習
• 
  550W ファンマスターが JavaScript をゼロから段階的に学習します

  638 回の学習
• 
  Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる

  21833 回の学習

最新のダウンロード

詳細>

ウェブエフェクト

公式サイト

サイト素材

フロントエンドテンプレート

• [フォームボタン] jQuery エンタープライズ メッセージ フォームの連絡先コード
• [プレイヤーの特殊効果] HTML5 MP3 オルゴール再生効果
• [メニューナビゲーション] HTML5 クールなパーティクル アニメーション ナビゲーション メニューの特殊効果
• [フォームボタン] jQuery ビジュアル フォームのドラッグ アンド ドロップ編集コード
• [プレイヤーの特殊効果] VUE.JS 模倣 Kugou 音楽プレーヤー コード
• [html5特殊効果] 古典的な HTML5 プッシュ ボックス ゲーム
• [画像の特殊効果] 画像効果を追加または削減するための jQuery スクロール
• [フォトアルバム効果] CSS3 個人アルバム カバー ホバー ズーム効果

• [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート
• [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート
• [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート
• [フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート
• [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します
• [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート

• [PNG素材] かわいい夏の要素のベクター素材 (EPS+PNG)
• [PNG素材] 4 つの赤い 2023 卒業バッジ ベクター素材 (AI+EPS+PNG)
• [バナー画像] 歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材（AI+EPS）
• [PNG素材] 金色の卒業帽ベクター素材（EPS+PNG）
• [PNG素材] 黒と白のスタイルの山アイコン ベクター素材 (EPS+PNG)
• [PNG素材] 異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材（EPS+PNG）
• [バナー画像] フラット スタイルの植樹祭バナー ベクター素材 (AI+EPS)
• [PNG素材] 9つのコミックスタイルの爆発するチャットバブルベクター素材（EPS+PNG）

• [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート
• [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート
• [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート
• [フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート
• [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します
• [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート

福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

私たちについて 免責事項 Sitemap

© php.cn All rights reserved