锋利的jquery-validation

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的规则一一对应。

　　是不是非常清楚呢，是不是感觉整个世界都清晰了呢。

　　其实我想说的是，下班了，走起！