recherche

Maison >interface Web >js tutoriel >jquery validate.js formulaire d'entrée de validation exemple (avec code source)_jquery

jquery validate.js formulaire d'entrée de validation exemple (avec code source)_jquery

WBOY
WBOYoriginal
2016-05-16 15:32:581319parcourir

L'éditeur a lu de nombreux articles sur jquery.validate sur Internet. La plupart d'entre eux ne présentent que son API et son utilisation. Il n'y a pas d'introduction détaillée au cas après avoir étudié pendant une longue période. À cette fin, l'éditeur a réalisé un exemple d'introduction de validation de formulaire jquery validate.js. L'écriture n'est pas particulièrement bonne, mais elle devrait convenir aux débutants et j'aimerais la partager avec tout le monde.

Ce qui suit est le code source de référence de l'exemple d'entrée de vérification du formulaire validate.js. L'adresse de téléchargement du code source se trouve sous l'article : 

<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>

Téléchargement du code source : Exemple d'entrée de validation de formulaire jquery validate.js

Adresse de démonstration : Exemple d'entrée de validation de formulaire jquery validate.js

Ce qui précède est un simple exemple d'introduction à la validation du formulaire jquery validate.js fourni à tout le monde. Tout le monde est invité à apprendre ensemble, et j'espère que cela sera utile à l'apprentissage de chacun.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Résumé des techniques courantes d'interception JS et de fractionnement des techniques strings_javascriptArticle suivant：Résumé des techniques courantes d'interception JS et de fractionnement des techniques strings_javascript

Articles Liés

Voir plus