Was ist jquery-validate

青灯夜游
Freigeben: 2022-05-16 13:34:06
Original
1718 Leute haben es durchsucht

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.

Was ist jquery-validate

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>
Nach dem Login kopieren

Standardüberprüfungsregeln

Seriennummer RegelBeschreibung
1erforderlich:trueFelder, die eingegeben werden müssen.
2remote:"check.php"Verwenden Sie die Ajax-Methode, um check.php aufzurufen und den Eingabewert zu überprüfen.
3email:trueSie müssen eine korrekt formatierte E-Mail-Adresse eingeben.
4url:trueSie müssen die URL im richtigen Format eingeben.
5Datum:wahrDas Datum muss im richtigen Format eingegeben werden. Datumsüberprüfung IE6-Fehler, mit Vorsicht verwenden.
6dateISO:trueDas 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.
7Zahl:wahrEs muss eine gültige Zahl eingegeben werden (negative Zahl, Dezimalzahl).
8digits:trueMuss eine ganze Zahl eingegeben werden.
9Kreditkarte:Es muss eine gültige Kreditkartennummer eingegeben werden.
10equalTo:"#field"Der Eingabewert muss mit #field identisch sein.
11akzeptieren:Geben Sie eine Zeichenfolge mit einem zulässigen Suffix ein (das Suffix der hochgeladenen Datei).
12maxlength:5Geben Sie eine Zeichenfolge mit einer maximalen Länge von 5 ein (chinesische Zeichen zählen als ein Zeichen).
13minlength:10Geben Sie eine Zeichenfolge mit einer Mindestlänge von 10 ein (chinesische Zeichen zählen als ein Zeichen).
14rangelength:[5,10]Die Eingabelänge muss zwischen 5 und 10 liegen (chinesische Zeichen zählen als ein Zeichen).
15Bereich:[5,10]Der Eingabewert muss zwischen 5 und 10 liegen.
16max:5Der Eingabewert darf nicht größer als 5 sein.
17min:10Der 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}." )
}
Nach dem Login kopieren

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} 的数值")
});
}));
Nach dem Login kopieren

你可以将该本地化信息文件 /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>
Nach dem Login kopieren

使用方式

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,备注。

Nach dem Login kopieren

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: "请选择两个主题"
     }
    })
});
Nach dem Login kopieren

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>
Nach dem Login kopieren

说明:

  • required: true 值是必须的。

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

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

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

常用方法及注意问题

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

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

使用 ajax 方式

$(".selector").validate({     
 submitHandler: function(form) 
   {      
      $(form).ajaxSubmit();     
   }  
 })
Nach dem Login kopieren

可以设置 validate 的默认值,写法如下:

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

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

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

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

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

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

$.validator.setDefaults({
   debug: true
})
Nach dem Login kopieren

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

ignore: ".ignore"
Nach dem Login kopieren

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

errorPlacement:Callback
Nach dem Login kopieren

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

errorPlacement: function(error, element) {  
    error.appendTo(element.parent());  
}
Nach dem Login kopieren

【推荐学习: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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage