ホームページ > ウェブフロントエンド > jsチュートリアル > jquery_jqueryを元に形式が正しいか瞬時にチェックするフォーム

jquery_jqueryを元に形式が正しいか瞬時にチェックするフォーム

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
リリース: 2016-05-16 15:01:56
オリジナル
1923 人が閲覧しました

現在、多くの Web サイトの登録モジュールは、形式が正しいかどうかを即座にチェックできるため、ユーザー エクスペリエンスが大幅に向上し、開発にとって非常に有益です。

次のコードは jquery を使用して、フォーム フィールド形式 (フィールド長、電子メール形式を含む) の 即時検査 を実装し、同時に送信時にチェック イベントを実行します。再びトリガーされます。

このチェックは主にキーアップとフォーカスに基づいており、これら 2 つのイベントはブラー (フォーカスの喪失) イベントをトリガーするために使用されることに注意してください。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

<html>

<head>

 <meta charset="utf-8" />

 <title></title>

 <link href="css/style.css" rel="stylesheet" type="text/css" />

 <script src="jquery-1.3.2.min.js"></script>

 <script>

  $(function () {

        //为每个必填字段后面加上*

   $("form :input.required").each(function () {

    var $required = $("<strong class='high'>*</strong>");

    $(this).parent().append($required);

   });

        //textbox失去焦点事件

   $("form :input").blur(function () {

    var $parent = $(this).parent();

    $parent.find(".formtips").remove();

    if ($(this).is('#username')) {

     if (this.value == "" || this.value.length < 6) {

      var errorMsg = "请输入至少6位的用户名";

      $parent.append('<span class="formtips onError">' + errorMsg + "</span>");

     } else {

      var okMsg = "输入正确"

      $parent.append('<span class="formtips onSuccess">' + okMsg + '</span>');

     }

    }

    if ($(this).is('#email')) {

     if (this.value == "" || (this.value != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))) {

      var errorMsg = "请输入正确的E-Mail地址";

      $parent.append('<span class="formtips onError">' + errorMsg + "</span>");

     } else {

      var okMsg = "输入正确"

      $parent.append('<span class="formtips onSuccess">' + okMsg + '</span>');

     }

    }

   }).keyup(function () {

    $(this).triggerHandler("blur");//keyup和focus利用triggerHandler来触发blur事件

   }).focus(function () {

    $(this).triggerHandler("blur");

   });

   $("#send").click(function () {//提交按钮事件

    $("form .required:input").trigger('blur');

    var numError = $('form .onError').length;

    if(numError)

    {

     return false;

    }

    alert("注册成功,密码已发到你的邮箱,请查收");

   });

  });

 

 </script>

</head>

<body>

 <form method="post" action="">

  <div class="int">

   <label for="username">用户名</label>

   <input type="text" id="username" class="required" />

  </div>

  <div class="int">

   <label for="email">邮箱</label>

   <input type="text" id="email" class="required" />

  </div>

  <div class="int">

   <label for="=personinfo">个人资料</label>

   <input type="text" id="personinfo" />

  </div>

  <div class="sub">

   <input type="submit" value="提交" id="send" />

   <input type="reset" id="res" />

  </div>

 </form>

</body>

</html>

ログイン後にコピー

クリックすると詳細なコンテンツが表示されます: JQuery フォーム検証百科事典

上記がこの記事の全内容です。jquery プログラミングを学習する皆さんのお役に立てれば幸いです。

関連ラベル:
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
jQueryファイルをインポートする
から 1970-01-01 08:00:00
0
0
0
jQueryのプロトタイプチェーン
から 1970-01-01 08:00:00
0
0
0
Nuxt.js に jQuery をインストールする手順
から 1970-01-01 08:00:00
0
0
0
php+jqueryの問題
から 1970-01-01 08:00:00
0
0
0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート