jquery插件
jquery插件项目托管于gitHub,项目地址https://github.com/jquery/plugins.jquery.com
jquery插件的使用
表单验证插件
现在网页的表单如果没有验证功能,在用户咬牙切齿填写完那一望无际的表单按下提交按钮的一刹那,作为一名伟大的前端开发人员,内心会受到谴责的。当然,表单验证的方式有很多,但是validation作为最优秀的插件之一,必须得用起来,不然,你好意思吹牛*吗?不对,应该说你好意思吗?还不能吹牛*!
jquery Validation插件地址jquery validation插件下载
鉴于令人发指的下载速度,也可以转到jquery validation插件下载
绝对要相信一句话,实践是检验真理的唯一标准。所以走着!
<script src="../jquery-1.12.0.min.js"></script> // 引入jquery,千万不要问我为什么<script src="jquery.validate.min.js"></script> //引入validate插件,在下载文件的dist文件夹下就能看到;
<script> $(function () { $("#commentForm").validate(); //在表单对象下调用validate方法; })</script>
<div class="code"> <form class="cmxform" id="commentForm" method="get" action="#"> <fieldset> <legend>表单</legend> <p> <label for="cusername">姓名:</label> <input id="cusername" name="username" size="25" class="required" minlength="2"/>//注意class和minlength,这两个属性的值required和2为validate方法准备的,意思是必填字段,长度大于2 </p> <p> <label for="cemail">电子邮件</label> <input id="cemail" name="email" size="25" class="required email">//同样注意class属性,required同上,email当然就是确定这是一个邮箱啦; </p> <p> <label for="curl">网址</label> <input id="curl" name="url" size="25" class="url" value=""> //同上 </p> <p> <label for="ccomment">我的评论:</label> <textarea id="ccomment" name="comment" cols="20" class="required"></textarea> //同上 </p> <p> <input class="submit" type="submit" value="提交"> </p> </fieldset> </form> </div>
多么的言简意赅,几个属性就给表单验证了,这么偷懒真的好吗,不写正则真的符合作为一名前端开发攻城狮的身份嘛!其实我想说是真的好,整个世界都清新脱俗了;(但是如果能给正则写的飞起的,请留下你的联系方式,我们做朋友好吗!)
表单验证结果,然并卵,这是我想要的嘛,作为一名中华家人民,你确定后面那一坨有用嘛;相信我,人与人之间还是可以信任的;我们的大师们不会忘了拥有十四亿国民的中华家所用的语言
只要在
<script src="jquery.validate.min.js"></script>
后再引入
<script src="messages_zh.min.js"></script>
你就会发现突然又变得无比自信
哇咔咔,这是什么,这就是我们人见人爱的中文,可以自信的对老板说,表单验证just so so啦;
现在的我们已经可以粗略的做出一个具有一定功能的验证表单了,可是作为一名傲娇的前端攻城狮,目标是星辰大海的我们会就这么满足了嘛!
强迫癌患者极度不能忍受,一个功能这一点,那一点;生命可贵啊,Jörn Zaefferer,请记住他,作为编写和维护validate的神一样的人物,是他拯救了你们的生命,不对,是我们的生命。
表单如果为控件<label>用于对控件所属内容点击后触发光标聚焦;都会设置一个id;于是我们只要记住每个需要验证的id,就愉快的去js中玩耍了,怎么舍得在HTML上乱涂乱画呢,会被打的。
$("#signupForm").validate({ rules: { }, messages: { } });
表单验证我们需要什么,请大声的说出来(规则和提示,吼吼)!于是在validate内就有了rules和messages!有不明白这两个单词的意思的嘛,请自行百度!
(嘿嘿,打广告百度会给我钱嘛!
百度:你确定有人看!好意思嘛
...
)
然后呢,当时是填写规则了,规则怎么写呢!请记住,一切都是对象,一切都是对象, 一切都是没有结局的对象!亲,是对象嗷!
$("#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: "请选择两个主题" } });
rules是对象1,key/value分别是ID/对象2!value也是一个对象嗷;那这个对象2内的key/value值又是什么意思呢!请看前文!
messages也是一个对象1,key/value分别是id/对象2,对象2内则分别value值则为提示消息,与rules对象2的规则一一对应。
是不是非常清楚呢,是不是感觉整个世界都清晰了呢。
其实我想说的是,下班了,走起!