実用的な JS フォーム検証プロンプト effect_form 特殊効果

errMsg は、カスタマイズに便利なエラー メッセージの配列です。これにより、FormValid.allName は、カスタマイズ時にすべてのフィールド名レベルを記録します。使用されます。

<title>フォーム検証プロンプト効果</title> <style type="text/css"> body{ color:#666666; font-size:12px} h1{ font-size:20px;} input{ border:#999999 1px solid; background-color:#FFFFEE} .button2{ background-color:#FF9900; border-bottom:#E34A00 2px solid;border-right:#E34A00 2px solid; border-top:#FFB693 2px solid;border-left:#FFB693 2px solid; color:#FFFFFF; font-weight:bold} dl { font:normal 12px/15px Arial; position: relative; width: 350px; } dt { clear: both; float:left; width: 80px; padding: 4px 0 2px 0; text-align: left; } dd { float: left; width: 200px; margin: 0 0 8px 0; padding-left: 6px; } .hint { display: none; position: absolute; right: -160px; width: 200px; margin-top: -4px; border: 1px solid #c93; padding: 10px 12px; background: #ffc url(/upload/2009-11/20091104144511488.gif) no-repeat -10px 5px; } .hint .hint-pointer { position: absolute; left: -10px; top: 5px; width: 10px; height: 19px; background: url(/upload/2009-11/20091104144511488.gif) left top no-repeat; } </style> <h1> </h1> <form action="" method="post" onsubmit="return validator(this)"> <dl>フォーム検証プロンプト効果<dt> <label for="name"> </label> </dt> <dd>アカウント:<input name="name" id="name" type="text" valid="required" errmsg="用户名不能为空!"><span class="hint" id="errMsg_name"> <span class="hint-pointer"></span> </span>アカウントを登録します (love、love520 などの数字と文字のみをサポートします) </dd> <dt> <label for="password"> </label> </dt> <dd>パスワード: <input name="password" id="password" type="password" valid="required" errmsg="密码不能为空!"><span class="hint" id="errMsg_password"> <span class="hint-pointer"></span> </span>パスワードを入力してください。少なくとも6桁、最大12桁で入力してください </dd> <dt> <label for="password2"> </label> </dt> <dd>パスワードの確認: <input name="password2" id="password2" type="password" valid="eqaul" eqaulname="password" errmsg="两次密码不同!"><span class="hint" id="errMsg_password2"> <span class="hint-pointer"> </span> </span>上記のパスワードを再度入力してください</dd> <dt> <label for="email"> </label> </dt> <dd>メール:<input name="email" id="email" type="text" valid="required|isEmail" errmsg="Email不能为空|Email格式不对!"><span class="hint" id="errMsg_email"> <span class="hint-pointer"></span> </span>電子メール アドレス (電子メール) を入力してください。NetEase email@163.com を使用することをお勧めします</dd> <dt> <label for="year"> </label> </dt> <dd>誕生日:<select id="year" name="year"><option value="1983"> </option> <option value="1984"> </option>1983年<option value="1985"> </option>1984</select> <select name="m" id="m">1985<option value="5"> </option>年<option value="6"> </option>5<option value="7"> </option>6<option value="12"> </option>7</select> <select name="d" id="d">12<option value="5"> </option>月<option value="6"> </option>5<option value="7"> </option>6<option value="12"> </option>7</select> <span class="hint">12<span class="hint-pointer"> </span>曜日</span>誕生日を入力してください</dd> <dt> <label for="qq"> </label> </dt> <dd>QQ/MSN:<input name="qq" id="qq" type="text" valid="required" errmsg="没有填写QQ或MSN"><span class="hint" id="errMsg_qq"> <span class="hint-pointer"></span> </span>QQ または MSN 番号を入力してください</dd> <dt> <label for="tel"> </label> </dt> <dd>電話番号:<input name="tel" id="tel" type="text" valid="required|isMobile" errmsg="手机不能为空|手机格式不对!"><span class="hint" id="errMsg_tel"> <span class="hint-pointer"></span> </span>電話番号を入力してください</dd> <dt class="button"></dt> <dd class="button"> <input type="submit" name="Submit" value=" 提 交 " class="button2"> </dd> </dl> </form>

[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、 を実行するために更新する必要があります]