CSS と組み合わせた jquery は、validate を使用して美しい verify_javascript スキルを実現します-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

CSS と組み合わせた jquery は、validate を使用して美しい verify_javascript スキルを実現します

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:17 PM

javascript validate 確認する

この検証は、オンラインで見つけた検証機能と美しいプロンプトを組み合わせて作成しました。皆さんに気に入っていただければ幸いです

。

<!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><TITLE>鼠标悬停 - 蘋果·志 - goldapple's blog</TITLE> 
<META http-equiv=Content-Type content="text/html; charset=utf-8"> 
<STYLE type=text/css> 
BODY { 
  FONT-SIZE: 12px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif 
} 
 { 
  PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px 
} 
A { 
  DISPLAY: block; WIDTH: 164px; COLOR: #000000; HEIGHT: 36px; TEXT-DECORATION: none 
} 
UL { 
  MARGIN: 200px auto; WIDTH: 632px; LIST-STYLE-TYPE: none 
} 
LI { 
   FLOAT: left; MARGIN: 0px 20px; WIDTH: 164px; LINE-HEIGHT: 39px; POSITION: relative; HEIGHT: 36px; TEXT-ALIGN: center 
} 
LABEL { 
  DISPLAY: none; BACKGROUND: url(images/hover.gif) no-repeat 0px 0px; LEFT: -16px; WIDTH: 200px; LINE-HEIGHT: 68px; POSITION: absolute; TOP: -100px; HEIGHT: 76px 
} 
input.error{ 
border: 2px dashed red; 
} 
</STYLE> 
<SCRIPT src="images/jquery.min.js" type=text/javascript></SCRIPT> 
<SCRIPT src="jquery.validate.js" type=text/javascript></SCRIPT> 
<SCRIPT type=text/javascript> 
$(function(){ 
 $('#a input').hover(function(){ 
  $(this).parent().find('label').animate({opacity:"show",left:"-85px"},500);//.show(); 
  },function(){ 
  $(this).parent().find('label').animate({opacity:"hide",left:"-105px"},500);//.hide(); 
  });  
  $("#signupForm").validate({ 
    rules: { 
        password: { 
        required: true, 
        minlength: 5 
        }, 
        name:{ 
         required:true 
        } 
 }, 
    messages: { 
      password: { 
      required: "请输入密码", 
      minlength: jQuery.format("密码不能小于{0}个字符") 
      }, 
      name:{ 
       required:"测试" 
      } 
 },success:function(){ 
  $("label.error").remove(); 
 } 
  }); 
}) 
</SCRIPT> 
<META content="MSHTML 6.00.2900.5803" name=GENERATOR></HEAD> 
<BODY> 
<form id="signupForm"> 
<div id="a"> 
<UL> 
 <LI><div><input type="text" name="password"></div> </LI> 
 <LI><input type="text" name="name"> </LI> 
</UL> 
</div> 
</form> 
</BODY></HTML>

ログイン後にコピー

とても美しいと思いませんか? 友達も自分の好みに合わせて美しくすることができます。

このウェブサイトの声明

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

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7316

Java チュートリアル

1625

CakePHP チュートリアル

1349

Laravel チュートリアル

1261

PHP チュートリアル

1209

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 02:54 PM

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

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

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

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

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

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

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

Steam ログインがモバイルトークンの検証で停止する問題を解決するにはどうすればよいですか? Mar 14, 2024 pm 07:35 PM

Steam はゲーム愛好家が使用するプラットフォームです。ここでは多くのゲームを購入できます。しかし、最近多くのユーザーが Steam にログインするときにモバイルトークン検証インターフェイスでスタックし、正常にログインできません。この問題に直面しているほとんどのユーザーは、この状況を解決する方法を知っていても構いません。今日のソフトウェアチュートリアルは、ユーザーの質問に答えるためにここにあります。困っている友達が操作方法を確認することができます。 Steamモバイルトークンエラー?解決策 1: ソフトウェアの問題の場合は、まず携帯電話で Steam ソフトウェア設定を見つけ、サポートページをリクエストし、デバイスを使用しているネットワークが正常に実行されていることを確認し、もう一度 [OK] をクリックして、[SMS の送信] をクリックすると、確認コードを受け取ることができます。リクエストを処理するときに確認し、解決します。

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

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

See all articles

CSS と組み合わせた jquery は、validate を使用して美しい verify_javascript スキルを実現します

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック