Was ist jquery-validate

jquery-validate bezieht sich auf das Formularvalidierungs-Plug-in. Es handelt sich um ein auf jquery basierendes Validierungs-Plug-in, das leistungsstarke Validierungsfunktionen für Formulare bereitstellt und die clientseitige Formularvalidierung vereinfacht nützliche Validierungsmethoden, einschließlich URL- und E-Mail-Verifizierung, und stellt gleichzeitig eine API zum Schreiben benutzerdefinierter Methoden bereit.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Version jquery2.2.1 und jquery-validate1.14.0, Dell G3-Computer.

jquery-validate bezieht sich auf das Formularvalidierungs-Plug-in, bei dem es sich um ein auf jquery basierendes Verifizierungs-Plug-in handelt.

Das jQuery Validate-Plug-in bietet leistungsstarke Validierungsfunktionen für Formulare, die die clientseitige Formularvalidierung erleichtern und gleichzeitig eine Vielzahl von Anpassungsoptionen bieten, um verschiedene Anwendungsanforderungen zu erfüllen. Das Plugin bündelt eine Reihe nützlicher Validierungsmethoden, einschließlich URL- und E-Mail-Validierung, und stellt eine API zum Schreiben benutzerdefinierter Methoden bereit. Alle gebündelten Methoden verwenden standardmäßig Englisch für Fehlermeldungen und wurden in 37 weitere Sprachen übersetzt.

Dieses Plugin wurde von Jörn Zaefferer geschrieben und gepflegt, einem Mitglied des jQuery-Teams, einem leitenden Entwickler im jQuery-UI-Team und einem Betreuer von QUnit. Dieses Plugin gibt es seit den Anfängen von jQuery im Jahr 2006 und wird seitdem ständig aktualisiert. Die aktuelle Version ist 1.14.0.

Besuchen Sie die offizielle Website von jQuery Validate und laden Sie die neueste Version des jQuery Validate-Plug-ins herunter.

Download-Adresse der Version 1.14.0: http://libs.cdnjs.net/jquery-validate/1.14.0/

JS-Bibliothek importieren

<script src="http://libs.cdnjs.net/jquery/2.2.1/jquery.js" rel="external nofollow"  rel="external nofollow" ></script>
<script src="http://libs.cdnjs.net/jquery-validate/1.14.0/jquery.validate.min.js" rel="external nofollow"  rel="external nofollow" ></script>

Standardüberprüfungsregeln

Seriennummer	Regel	Beschreibung
1	erforderlich:true	Felder, die eingegeben werden müssen.
2	remote:"check.php"	Verwenden Sie die Ajax-Methode, um check.php aufzurufen und den Eingabewert zu überprüfen.
3	email:true	Sie müssen eine korrekt formatierte E-Mail-Adresse eingeben.
4	url:true	Sie müssen die URL im richtigen Format eingeben.
5	Datum:wahr	Das Datum muss im richtigen Format eingegeben werden. Datumsüberprüfung IE6-Fehler, mit Vorsicht verwenden.
6	dateISO:true	Das Datum (ISO) muss im richtigen Format eingegeben werden, zum Beispiel: 23.06.2009, 22.01.1998. Es wird nur das Format überprüft, nicht die Gültigkeit.
7	Zahl:wahr	Es muss eine gültige Zahl eingegeben werden (negative Zahl, Dezimalzahl).
8	digits:true	Muss eine ganze Zahl eingegeben werden.
9	Kreditkarte:	Es muss eine gültige Kreditkartennummer eingegeben werden.
10	equalTo:"#field"	Der Eingabewert muss mit #field identisch sein.
11	akzeptieren:	Geben Sie eine Zeichenfolge mit einem zulässigen Suffix ein (das Suffix der hochgeladenen Datei).
12	maxlength:5	Geben Sie eine Zeichenfolge mit einer maximalen Länge von 5 ein (chinesische Zeichen zählen als ein Zeichen).
13	minlength:10	Geben Sie eine Zeichenfolge mit einer Mindestlänge von 10 ein (chinesische Zeichen zählen als ein Zeichen).
14	rangelength:[5,10]	Die Eingabelänge muss zwischen 5 und 10 liegen (chinesische Zeichen zählen als ein Zeichen).
15	Bereich:[5,10]	Der Eingabewert muss zwischen 5 und 10 liegen.
16	max:5	Der Eingabewert darf nicht größer als 5 sein.
17	min:10	Der Eingabewert darf nicht kleiner als 10 sein.

默认提示

messages: {
    required: "This field is required.",
    remote: "Please fix this field.",
    email: "Please enter a valid email address.",
    url: "Please enter a valid URL.",
    date: "Please enter a valid date.",
    dateISO: "Please enter a valid date ( ISO ).",
    number: "Please enter a valid number.",
    digits: "Please enter only digits.",
    creditcard: "Please enter a valid credit card number.",
    equalTo: "Please enter the same value again.",
    maxlength: $.validator.format( "Please enter no more than {0} characters." ),
    minlength: $.validator.format( "Please enter at least {0} characters." ),
    rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ),
    range: $.validator.format( "Please enter a value between {0} and {1}." ),
    max: $.validator.format( "Please enter a value less than or equal to {0}." ),
    min: $.validator.format( "Please enter a value greater than or equal to {0}." )
}

jQuery Validate提供了中文信息提示包，位于下载包的 /localization/messages_zh.js，内容如下：

(function( factory ) {
    if ( typeof define === "function" && define.amd ) {
        define( ["jquery", "../jquery.validate"], factory );
    } else {
        factory( jQuery );
    }
}(function( $ ) {
/*
 * Translated default messages for the jQuery validation plugin.
 * Locale: ZH (Chinese, 中文 (Zhōngwén), 汉语, 漢語)
 */
$.extend($.validator.messages, {
    required: "这是必填字段",
    remote: "请修正此字段",
    email: "请输入有效的电子邮件地址",
    url: "请输入有效的网址",
    date: "请输入有效的日期",
    dateISO: "请输入有效的日期 (YYYY-MM-DD)",
    number: "请输入有效的数字",
    digits: "只能输入数字",
    creditcard: "请输入有效的信用卡号码",
    equalTo: "你的输入不相同",
    extension: "请输入有效的后缀",
    maxlength: $.validator.format("最多可以输入 {0} 个字符"),
    minlength: $.validator.format("最少要输入 {0} 个字符"),
    rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
    range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
    max: $.validator.format("请输入不大于 {0} 的数值"),
    min: $.validator.format("请输入不小于 {0} 的数值")
});
}));

你可以将该本地化信息文件 /localization/messages_zh.js 引入到页面：

<script src="http://libs.cdnjs.net/jquery-validate/1.14.0/localization/messages_zh.js" rel="external nofollow"  rel="external nofollow" ></script>

使用方式

1、将校验规则写到控件中

<script src="http://libs.cdnjs.net/jquery/2.2.1/jquery.js" rel="external nofollow"  rel="external nofollow" ></script>
<script src="http://libs.cdnjs.net/jquery-validate/1.14.0/jquery.validate.min.js" rel="external nofollow"  rel="external nofollow" ></script>
<script src="http://libs.cdnjs.net/jquery-validate/1.14.0/localization/messages_zh.js" rel="external nofollow"  rel="external nofollow" ></script>
<script>
$.validator.setDefaults({
    submitHandler: function() {
      alert("提交事件!");
    }
});
$().ready(function() {
    $("#commentForm").validate();
});
</script>

  

    
输入您的名字，邮箱，URL，备注。
    

      Name (必需, 最小两个字母)
      
    
    

      E-Mail (必需)
      
    
    

      URL (可选)
      
    
    

      备注 (必需)
      
    
    

      
    
  

2、将校验规则写到 js 代码中

$().ready(function() {
// 在键盘按下并释放及提交后验证提交表单
  $("#signupForm").validate({
    rules: {
      firstname: "required",
      lastname: "required",
      username: {
        required: true,
        minlength: 2
      },
      password: {
        required: true,
        minlength: 5
      },
      confirm_password: {
        required: true,
        minlength: 5,
        equalTo: "#password"
      },
      email: {
        required: true,
        email: true
      },
      topic: {
        required: "#newsletter:checked",
        minlength: 2
      },
      agree: "required"
    },
    messages: {
      firstname: "请输入您的名字",
      lastname: "请输入您的姓氏",
      username: {
        required: "请输入用户名",
        minlength: "用户名必需由两个字母组成"
      },
      password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字母"
      },
      confirm_password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字母",
        equalTo: "两次密码输入不一致"
      },
      email: "请输入一个正确的邮箱",
      agree: "请接受我们的声明",
      topic: "请选择两个主题"
     }
    })
});

messages 处，如果某个控件没有 message，将调用默认的信息

<form class="cmxform" id="signupForm" method="get" action="">
  <fieldset>
    <legend>验证完整的表单</legend>
    <p>
      <label for="firstname">名字</label>
      <input id="firstname" name="firstname" type="text">
    </p>
    <p>
      <label for="lastname">姓氏</label>
      <input id="lastname" name="lastname" type="text">
    </p>
    <p>
      <label for="username">用户名</label>
      <input id="username" name="username" type="text">
    </p>
    <p>
      <label for="password">密码</label>
      <input id="password" name="password" type="password">
    </p>
    <p>
      <label for="confirm_password">验证密码</label>
      <input id="confirm_password" name="confirm_password" type="password">
    </p>
    <p>
      <label for="email">Email</label>
      <input id="email" name="email" type="email">
    </p>
    <p>
      <label for="agree">请同意我们的声明</label>
      <input type="checkbox" class="checkbox" id="agree" name="agree">
    </p>
    <p>
      <label for="newsletter">我乐意接收新信息</label>
      <input type="checkbox" class="checkbox" id="newsletter" name="newsletter">
    </p>
    <fieldset id="newsletter_topics">
      <legend>主题 (至少选择两个) - 注意：如果没有勾选“我乐意接收新信息”以下选项会隐藏，但我们这里作为演示让它可见</legend>
      <label for="topic_marketflash">
        <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic">Marketflash
      </label>
      <label for="topic_fuzz">
        <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic">Latest fuzz
      </label>
      <label for="topic_digester">
        <input type="checkbox" id="topic_digester" value="digester" name="topic">Mailing list digester
      </label>
      <label for="topic" class="error">Please select at least two topics you&#39;d like to receive.</label>
    </fieldset>
    <p>
      <input class="submit" type="submit" value="提交">
    </p>
  </fieldset>
</form>

说明：

• required: true 值是必须的。

• required: "#aa:checked" 表达式的值为真，则需要验证。

• required: function(){} 返回为真，表示需要验证。

后边两种常用于，表单中需要同时填或不填的元素。

常用方法及注意问题

1、用其他方式替代默认的 SUBMIT

$().ready(function() {
 $("#signupForm").validate({
        submitHandler:function(form){
            alert("提交事件!");   
            form.submit();
        }    
    });
});

使用 ajax 方式

$(".selector").validate({     
 submitHandler: function(form) 
   {      
      $(form).ajaxSubmit();     
   }  
 })

可以设置 validate 的默认值，写法如下：

$.validator.setDefaults({
  submitHandler: function(form) { alert("提交事件!");form.submit(); }
});

如果想提交表单, 需要使用 form.submit()，而不要使用 $(form).submit()。

2、debug，只验证不提交表单

如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便。

$().ready(function() {
 $("#signupForm").validate({
        debug:true
    });
});

如果一个页面中有多个表单都想设置成为 debug，则使用：

$.validator.setDefaults({
   debug: true
})

3、ignore：忽略某些元素不验证

ignore: ".ignore"

4、更改错误信息显示的位置

errorPlacement：Callback

指明错误放置的位置，默认情况是：error.appendTo(element.parent());即把错误信息放在验证的元素后面。

errorPlacement: function(error, element) {  
    error.appendTo(element.parent());  
}

【推荐学习：jQuery视频教程、web前端视频】

Das obige ist der detaillierte Inhalt vonWas ist jquery-validate. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!