編集者はインターネット上で jquery.validate に関する多くの記事を読みましたが、そのほとんどはその API と使用方法を紹介するだけで、長い間勉強したにもかかわらず、まだ始められません。この目的のために、編集者は jquery validate.js フォーム検証の入門サンプルを作成しました。文章は特に優れているわけではありませんが、初心者に適したものになっているので、皆さんと共有したいと思います。
以下は、validate.js フォーム検証エントリのサンプルの参照ソース コードです。ソース コードのダウンロード アドレスは記事の下にあります。
<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>
ソースコードのダウンロード: jquery validate.js フォーム検証エントリの例
デモアドレス: jquery validate.js フォーム検証エントリの例
上記は、どなたでもご利用いただける簡単な jquery validate.js フォーム検証の入門例です。ぜひ一緒に学習してください。皆さんの学習に役立つことを願っています。