jquery.validate フォーム検証プラグインの概要-jsチュートリアル-php.cn

jquery.validate フォーム検証プラグインの概要

小云云

リリース： 2018-01-06 11:27:40

オリジナル

1726 人が閲覧しました

この記事では主に jquery.validate フォーム検証プラグインの使い方を詳しく紹介しますので、興味のある方は参考にしていただければ幸いです。

今日はフォーム検証について話します。フォーム検証を行うときに正規表現を使用するのは非常に面倒だと言う人もいます。ここで、フォーム検証プラグイン jquery.validate.min.js を紹介します。 jqueryと組み合わせて使用すると、検証ルールとエラーフィールドを記述するだけで非常に便利です。

共通の検証ルールは次のとおりです:

(1)required:true use using using using ‐ ’ ‐ ‐ ‐ ‐‐‐ と

日付
(4)dateISO:true を入力する必要があります正しい形式の日付 (ISO)
(5)digitals:true 整数を入力する必要があります
(6)equalTo:"#pass" 入力値は #pass と同じである必要があります
(7)maxlength: 5 文字列最大 5 つの入力長 (8) Minlength: 10 最小入力長が 10 の文字列 (9) Ranglength: [5,10] 入力長は 5 から 10 の間である必要があります (10) Range :[5,10] 入力値は 5 と 10 の間である必要があります
(11)max:5 入力値は 5 より大きくすることはできません
(12)min:10 入力値は 10 未満にすることはできません

次に、プロンプトフィールドを書き込むだけです。英語のプロンプトフィールドがあるため、これを記述する必要はありません。次のコードを見てみましょう:

プラグインを使用する前に、jquery ファイルとプラグインを導入することが不可欠です

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

ログイン後にコピー

それではHTMLコードを見てみましょう

<form action="" id="mgForm"> //写表单验证比不缺少的是我们的form标签
  <p> //关于用户名的布局
    <label for="user">username:</label>
    <input type="text" name="username" id="user">
  </p>

  <p>//关于密码的布局
    <label for="pass">password:</label>
    <input type="text" name="password" id="pass">
  </p>
  <p>//重置密码
    <label for="pass1">form-password:</label>
    <input type="text" name="password1" id="pass1">
  </p>
  <p>//年龄
    <label for="age">age:</label>
    <input type="text" name="age" id="age">
  </p>
  <p>//email
    <label for="email">email:</label>
    <input type="text" name="email" id="email">
  </p>
  <input type="submit" value="提交"> //我们在提交数据时提交的按钮应该为submit类型的
</form>

ログイン後にコピー

それからJSコードを見てみましょう

   $(function () {
      $("#mgForm").validate({
        rules:{//写入文本框中的限制条件
          username:{ //指的是input中name的名字
            required:true,//不能为空
            minlength:6,//最短为6个
            maxlength:10//最长为10个
          },
          age:{
          //  range:[18,80] //年龄范围为18-80
            required:true, //不能为空
          },
          password:{
            required:true,//必填
            rangelength:[2,6] //长度为2-6
          },
          password1:{
            equalTo:"#pass" //重置密码必须与#pass中的密码保持一致
          },
          email:{
            email:true //email保证格式正确
          }
        },
        messages:{//提示信息
          username:{ //用户名
            required:"*此项必填",
            minlength:"*用户名最小是6位",
            maxlength:"*用户名最大是10位"
          },
          age:{//年龄
            range:"*年龄必须在18-80之间"
            PostCode:"错误"
          },
          password:{//密码
            required:"*必填",
            rangelength:"2-6"
          },
          password1:{//重置密码
            equalTo:"*密码不一致"
          },
          email:{//邮箱格式
            email:"*邮箱格式不正确"
          }
        },
        submitHanfler:function () {//如果全部验证正确就弹出弹窗
          alert("全部通过")
        },
        errorClass:"wrong",//给错误字段添加wrong样式
        ignore:"#pass1",//忽略密码不一
        errorElement:"p",//错误信息单独显示一行
        focusInvalid:true,//提交表单后,未通过验证的表单(第一个或提交之 前获得焦点的未通过验证的表单)会获得焦点 
        focusCleanup:true,// 当未通过验证的元素获得焦点时,并移除错误提示
        highlight:function (element,errorClass) {//在信息错误时会出现一闪的效果
          $(element).addClass(errorClass);
          $(element).fadeOut().fadeIn()
        }
      });
        $.validator.addMethod("PostCode",function () { //此外，我们还可自定义样式
          var reg=/^[0-9]{6}$/;
          return reg.test(value)
        },"邮编输入不正确");
      });

ログイン後にコピー

今日のストラップ検証プラグインは学習しましたか？