Heim > Artikel > Web-Frontend > Beispiel für einen Formularvalidierungseintrag in jquery validieren.js (mit Quellcode)_jquery

Beispiel für einen Formularvalidierungseintrag in jquery validieren.js (mit Quellcode)_jquery

WBOYOriginal: 2016-05-16 15:32:581260Durchsuche

Der Herausgeber hat viele Artikel über jquery.validate im Internet gelesen. Die meisten davon stellen nur die API und die Verwendung vor. Nach langem Lernen kann ich immer noch nicht beginnen. Zu diesem Zweck hat der Herausgeber ein einführendes Beispiel für die Formularvalidierung von jquery validate.js erstellt. Das Schreiben ist nicht besonders gut, aber es sollte für Anfänger geeignet sein und ich möchte es mit allen teilen.

Im Folgenden finden Sie den Referenzquellcode des Validate.js-Formularverifizierungseintrags. Die Downloadadresse für den Quellcode befindet sich unter dem Artikel:

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>j2query.validate快速入门范例-代潇瑞博客</title>
 <meta name="keywords" content="" />
 <meta name="description" content="jquery.validate.js是一个强大的表单验证插件，这里将来个快速入门范例，展示它的快速易用性。" />
 <script src="jquery-1.8.0.min.js" type="text/javascript"></script>
 <script src="jquery.validate.min.js" type="text/javascript"></script>
 <style type="text/css">
 label.error{color:red;font-size:13px;}
 </style>
</head>
<body>
 <p>信息录入</p>
 <form action="" name="infos" id="infos">
 <p>用户名：<input type="text" name="username" /></p>
 <p>工作号：<input type="text" name="nums" /></p>
 <p>备 注：<input type="text" name="notes" /></p>
 <p><input type="submit" name="sub" /></p>
 </form>
 <script type="text/javascript">
 $(function(){
 $('#infos').validate({
 debug:false, //false表示验证通过后不要自动提交表单
 onkeyup:false, //表示关闭按键松开时候监听验证
 rules:{ //验证规则
 username:{
 required:true, //必填字段
 rangelength:[6,10] //长度在6-10之间
 },
 nums:{
 required:true,
 digits:true
 },
 notes:"required"
 },
 messages:{ //自定义错误信息，默认为英文，除了在这里配置以为，还可以通过配置文件进行配置
 username:{
 required:"用户名必填",
 rangelength:"用户名长度必须为6-10位"
 },
 nums:{
 required:"工作号必填",
 digits:"工作号必须为数字"
 },
 notes:"备注必填"
 },
 //验证通过可以在这里做你想做的事情
 submitHandler:function(form){
 alert("验证通过");
 }
 });
 });
 </script>
</body>
</html>

Download des Quellcodes: Beispiel für den Formularvalidierungseintrag in jquery validieren.js

Demoadresse: jquery validate.js Formularvalidierungseintragsbeispiel

Das Obige ist ein einfaches Einführungsbeispiel für die Formularvalidierung von jquery.js, das allen zur Verfügung gestellt wird, um gemeinsam zu lernen, und ich hoffe, dass es für das Lernen aller hilfreich sein wird.

Stellungnahme：

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

Vorheriger Artikel：Zusammenfassung gängiger Techniken zum Abfangen und Aufteilen von Strings_Javascript in JSNächster Artikel：Zusammenfassung gängiger Techniken zum Abfangen und Aufteilen von Strings_Javascript in JS

In Verbindung stehende Artikel

Mehr sehen