ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery 検証プラグインの検証使用ガイド_jquery

jQuery 検証プラグインの検証使用ガイド_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
リリース: 2016-05-16 16:02:57
オリジナル
1088 人が閲覧しました

ウェブサイトの開発プロセス中に、ユーザーが入力した情報が当社の要件を満たしているかどうかを確認する必要がある場合があるため、ユーザーが送信したデータを確認します。検証はクライアント側で 1 回、サーバー側で 1 回の計 2 回実行されます。クライアント側の検証により、ユーザー エクスペリエンスが向上します。

jquery 検証プラグインは多数あり、基本的に同じ機能を実装しています。この記事では、jquery 検証プラグインの 1 つである jquery.validate

のみを紹介します。

jquery.Validation は、クライアント フォームを検証でき、優れたスケーラビリティを備えた多くのカスタマイズ可能なプロパティとメソッドを提供する優れた jquery プラグインです。

1.jquery.validate プラグイン関数

顧客情報の検証と要件を満たさない情報のフィルタリングを簡単に実装

2.jquery.validate 公式アドレス

公式アドレス: http://jqueryvalidation.org/、プラグインの詳しい使用手順が記載されています

公式デモ: http://jquery.bassistance.de/validate/demo/

3. jquery.validate の使用方法

1. js を引用します

1

2

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery.validate.js"></script>

ログイン後にコピー

2.css スタイル、カスタマイズ可能。エラー スタイルを追加するか、公式デモでそのスタイルを使用します。

1

2

3

4

.error{

  color:red;

  margin-left:8px;

}

ログイン後にコピー

3.js コード

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

$(document).ready(function() {

  // validate signup form on keyup and submit

  var validator = $("#signupform").validate({

    rules: {

      firstname: "required",

      username: {

        required: true,

        minlength: 2

      },

      password: {

        required: true,

        minlength: 5

      },

      password_confirm: {

        required: true,

        minlength: 5,

        equalTo: "#password"

      },

      email: {

        required: true,

        email: true,

      },

      dateformat: "required",

      terms: "required"

    },

    messages: {

      firstname: "姓名不能为空",

      username: {

        required: "用户名不能为空",

        minlength: jQuery.format("用户名只少由 {0} 字符组成")

      },

      password: {

        required: "密码不能为空",

        minlength: jQuery.format("密码只少由 {0} 字符组成")

      },

      password_confirm: {

        required: "确认密码不能为空",

        minlength: jQuery.format("确认密码只少由 {0} 字符组成"),

        equalTo: "秘密与确认密码不一致"

      },

      email: {

        required: "邮箱不能为空",

        email: "邮箱格式不正确"

      },

      dateformat: "请选择性别",

      terms: " "

    },

    // the errorPlacement has to take the table layout into account

    errorPlacement: function(error, element) {

      if ( element.is(":radio") )

        error.appendTo( element.parent().next().next());

      else if ( element.is(":checkbox") )

        error.appendTo ( element.next());

      else

        error.appendTo( element.parent().next());

    },

    // specifying a submitHandler prevents the default submit, good for the demo

    submitHandler: function() {

      alert("submitted!");

    },

    // set this class to error-labels to indicate valid fields

    success: function(label) {

      // set   as text for IE

      label.html(" ").addClass("checked");

    },

    highlight: function(element, errorClass) {

      $(element).parent().next().find("." + errorClass).removeClass("checked");

    }

  });

});

ログイン後にコピー

上記のコードは、プラグインによって提供されるプロパティとメソッドのみを使用します。検証方法をカスタマイズすることもできます。

など

1

2

3

4

5

6

7

$.validator.addMethod("checkUserName", function(value) {

 

    //value为验证的值,对应于元素id

 

  //方法代码

 

}, '用户名格式不正确');

ログイン後にコピー

カスタム メソッドの使用も非常に簡単で、要素 ID: "checkUserName" だけです。

4. 使用される HTML

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

<form id="signupform" autocomplete="off" method="get" action="">

   <table>

   <tr>

    <td class="label"><label id="lfirstname" for="firstname">姓名</label></td>

    <td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" /></td>

    <td class="status"></td>

   </tr>

   <tr>

    <td class="label"><label id="lusername" for="username">用户名</label></td>

    <td class="field"><input id="username" name="username" type="text" value="" maxlength="50" /></td>

    <td class="status"></td>

   </tr>

   <tr>

    <td class="label"><label id="lpassword" for="password">密码</label></td>

    <td class="field"><input id="password" name="password" type="password" maxlength="50" value="" /></td>

    <td class="status"></td>

   </tr>

   <tr>

    <td class="label"><label id="lpassword_confirm" for="password_confirm">确认密码</label></td>

    <td class="field"><input id="password_confirm" name="password_confirm" type="password" maxlength="50" value="" /></td>

    <td class="status"></td>

   </tr>

   <tr>

    <td class="label"><label id="lemail" for="email">邮箱</label></td>

    <td class="field"><input id="email" name="email" type="text" value="" maxlength="150" /></td>

    <td class="status"></td>

   </tr>

         <tr>

    <td class="label"><label>性别</label></td>

    <td class="field" colspan="2" style="vertical-align: top; padding-top: 2px;">

    <table>

    <tbody>

 

    <tr>

      <td style="padding-right: 5px;">

        <input id="sex_men" name="dateformat" type="radio" value="0" />

        <label id="lbl_sex_men" for="dateformat_eu">男</label>

      </td>

      <td style="padding-left: 5px;">

        <input id="sex_women" name="dateformat" type="radio" value="1" />

        <label id="lbl_sex_women" for="dateformat_am">女</label>

      </td>

      <td>

      </td>

    </tr>

    </tbody>

    </table>

    </td>

   </tr>

 

   <tr>

    <td class="label"> </td>

    <td class="field" colspan="2">

      <div id="termswrap">

        <input id="terms" type="checkbox" name="terms" />

        <label id="lterms" for="terms">以阅读并同意网站条款.</label>

      </div> <!-- /termswrap -->

    </td>

   </tr>

   <tr>

    <td class="label"></td>

    <td class="field" colspan="2">

    <input id="signupsubmit" name="signup" type="submit" value="注册" />

    </td>

   </tr>

 

   </table>

</form>

ログイン後にコピー

検証方法のその他のアプリケーションについては、http://jqueryvalidation.org/

を参照してください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート