ホームページ > 記事 > ウェブフロントエンド > Dreamweaver を使用して共通登録ページフォームをデザインする verify_html/css_WEB-ITnose

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

WBOYオリジナル: 2016-06-21 09:14:072110ブラウズ

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

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

最初の写真

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

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

11.
219.

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

223。

225.

348.

名前:

70135bb2fcb29fdd6c7818ea91cd21a0

姓:ac9cb27f17557cf51f47dd605441aac5

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

メール: 59798ee291225b75633931a0aec022af (@ 文字を含む必要があります)

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

パスワード:

33937f2530a4b20154b5bb86ea0f9e7a
251. (少なくとも 6 文字を含む)

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

e2ece9492d4c92cb9567e99c65512a57

   <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.

声明：

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

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

続きを見る

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

関連記事

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