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

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

  其实我想说的是,下班了,走起!

时间: 2024-11-09 04:02:32

锋利的jquery-validation的相关文章

【锋利的jQuery】中全局事件ajaxStart、ajaxStop不执行

最近一直都在研究[锋利的jQuery],确实是一本好书,受益匪浅.但由于技术发展及版本更新等原因,里面还是有些坑需要踩的. 比如:第六章七节中提到的全局事件ajaxStart.ajaxStop照着案例敲结果并不会执行. 在查阅资料后,发现原来在jquery1.9+版本以后,ajax全局事件需绑定到document对象上才能触发. 下面是各版本不同写法: <html> <head> <meta charset="utf-8"> <style>

jquery and jquery validation 错误解决记录

Cannot read property 'settings' of undefined jquery validation 这个问题常常发生在动态添加rule的时候. 解决方法 // 在timeout 方法中加入规则. setTimeout(function() { $('#my_field').rules('add', { required: true }) }, 0);  

《锋利的jquery》源码整理——jquery技巧上

        在看<锋利的jquery>这本书的时候,书末尾总结了jquery的一些用法技巧,感觉很实用,先收藏着以后用到,可以借鉴看看.   一,资源(在w3cfuns资源中可以找到第一版和第二版)          <锋利的jquery>: http://pan.baidu.com/share/link?shareid=1725756399&uk=4245516461(PDF)                                        http:/

某网站品牌的列表效果(引自锋利的jQuery)

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="generator" content="editplus" /> <title>某网站品牌的列表效果</title> <script src="jquery-1.7.1.min.js" type

使一个特定的表格隔行变色(引自锋利的jQuery)

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="generator" content="editplus" /> <title>使一个特定的表格隔行变色</title> <script src="jquery-1.7.1.min.js" ty

复选框的全选(引自锋利的jQuery)

1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta name="generator" content="text/html" charset="utf-8" /> 5 <title>复选框组的全选/非全选</title> 6 <script

给网页中的元素添加onclick事件(引自锋利的jQuery)

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="generator" content="editplus" /> <title>给网页中的元素添加onclick事件</p></title> <script src="jquery-1.7.1

输出选中的复选框的个数(引自锋利的jQuery)

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="generator" content="editplus" /> <title>输出选中的复选框的个数</title> <script src="jquery-1.7.1.min.js" typ

jquery.validation.js 表单验证

jquery.validation.js 表单验证 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 一导入js库 <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/jq

《锋利的Jquery》

一.Js及库的异同和作用. 1.JQuery的代码风格: 链式操作风格.对于同一对象操作不超过三个,可以写成一行:对于较多操作的对象,每行一个操作:对于多对象少量操作,可以每个对象些一行,子对象缩进: 代码注释.//..... 2.JQuery对象和DOM对象: JQuery对象和DOM对象之间的转化.var $cr=$("#cr")----->var cr=$cr[0]; DOM对象和JQuery对象之间的转化.$()包起来: JQuery判断:is(":checke