使用jQuery Validation插件来验证表单

jQuery Validation是一个用于验证表单的jQuery插件,简单易用,已经包含了16种内置的验证规则.Github上也有更多的验证规则可以使用.这都不是重点,重点是你可以轻松的定制自己的规则.

内置规则:

  • required – Makes the element required.
  • remote – Requests a resource to check the element for validity.
  • minlength – Makes the element require a given minimum length.
  • maxlength – Makes the element require a given maximum length.
  • rangelength – Makes the element require a given value range.
  • min – Makes the element require a given minimum.
  • max – Makes the element require a given maximum.
  • range – Makes the element require a given value range.
  • step – Makes the element require a given step.
  • email – Makes the element require a valid email
  • url – Makes the element require a valid url
  • date – Makes the element require a date.
  • dateISO – Makes the element require an ISO date.
  • number – Makes the element require a decimal number.
  • digits – Makes the element require digits only.
  • equalTo – Requires the element to be the same as another one

内置规则的使用

内置规则的使用非常简单:

首先将该插件的js文件包含进html文件:

    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/jquery.validate.min.js"></script>

然后用jQuery选择需要验证的表单,执行validate()函数即可:

    <script>
    $("#form_id").validate();
    </script>

jQuery Validation官网上的例子:

    <!DOCTYPE HTML>
    <html>
    <head>
    <script src="jquery.min.js"></script>
    </head>
    <body>
    <form class="cmxform" id="commentForm" method="get" action="">
    <fieldset>
    <legend>Please provide your name, email address (won't be published) and a comment</legend>
    <p>
    <label for="cname">Name (required, at least 2 characters)</label>
    <input id="cname" name="name" minlength="2" type="text" required>
    </p>
    <p>
    <label for="cemail">E-Mail (required)</label>
    <input id="cemail" type="email" name="email" required>
    </p>
    <p>
    <label for="curl">URL (optional)</label>
    <input id="curl" type="url" name="url">
    </p>
    <p>
    <label for="ccomment">Your comment (required)</label>
    <textarea id="ccomment" name="comment" required></textarea>
    </p>
    <p>
    <input class="submit" type="submit" value="Submit">
    </p>
    </fieldset>
    </form>
    <script>
    $("#commentForm").validate();
    </script>
    </body>
    </html>

jQuery Validation会根据表单设置的type和属性自动为他们分配内置的规则,比如email,url,required等.

运行一下看看:

什么都不输入,直接点提交:

空表单

输入错误的Email地址,改正后错误提示自动消失: Email输入错误Email输入正确

添加自定义规则

jQuery Validation最吸引人的feature,它可以轻松的加入自定义的规则:

第一步,在js中调用jQuery.validator.addMethod函数来添加规则,例如添加IP格式检查的规则:

$.validator.addMethod( "ipv4", function( value, element ) {return this.optional( element ) || /^(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)$/i.test( value );}, "Invalid IP v4 address." ); //自定义其他规则只需要替换规则名"ipv4",正则表达式//之间的内容,以及出错后显示的字符串"Invalid IP v4 address."即可.

第二步,把规则应用到指定的表单项,即在执行$(“#form_id”).validate()函数的时候加入rules参数:

    23 $("#ip_form").validate({
    24     rules: {
    25         ip: {
    26             required: true,
    27             ipv4: true,
    28         },
    29         netmask: {
    30             required: true,
    31             ipv4: true,
    32         },
    33         gateway: {
    34             required: true,
    35             ipv4: true,
    36         },
    37     },
    38 }); //其中ip,netmask,gateway为表单项的name属性.required和ipv4是规则名.

生效后的样子,可以添加如下css来修改错误信息的样式:

    label.error {
        margin-left: 10px;
        padding-left: 5px;
        padding-right: 5px;
        color: #E2303A;
        font-style: italic;
        font: Helvetica Neue, 12px, #E2303A;
        border: 1px solid #F2A9AE;
    }

ipv4规则生效

使用json提交数据

表单验证通过后,提交动作默认是使用form本身的提交动作,即指定form的action和method属性:

    method="get" action=""

可以在validate()函数中添加submitHandler参数来指定点击提交后执行的函数,我们可以在该函数中使用$.json来提交数据:

    23 $("#ip_form").validate({
    24     rules: {
    25         ip: {
    26             required: true,
    27             ipv4: true,
    28         },
    29         netmask: {
    30             required: true,
    31             ipv4: true,
    32         },
    33         gateway: {
    34             required: true,
    35             ipv4: true,
    36         },
    37         dns: {
    38             dns: true,
    39         }
    40     },
    41     submitHandler: function(form) {
    42         ip_ok();
    43         $("#ip-conf").modal('hide');
    44     }
    45 });

阅读原文

JQuery 摘要

选择符与遍历

  1. $(): $函数接受css选择符作为参数,充当一个工厂函数,返回对应元素的JQuery对象。

  2. 3种基本的选择符:

    • 标签名 $(‘p’)
    • ID $(‘#myid’)
    • 类 $(‘.myClass’)
  3. 子元素组合符>: $(‘#myid > li’)选择id为myid的元素的所有列表项(li).

  4. 否定式伪类: $(‘#myid li:not(.myClass)’)选择id为myid的元素中不属于myClass类的所有列表项(li).

  5. 属性选择符$(‘img[alt]’): 选择所有带有alt属性的img元素.

  6. 属性选择符+类正则匹配:

    • $(‘a[href^=”mailto:”]’): 选择所有URL以mailto:开头的超链接.
    • $(‘a[href$=”.pdf”]’): 选择所有URL以.pdf结尾的超链接.
    • $(‘a[href*=”rose”]’): 选择所有URL中包含rose的超链接.
  7. 自定义选择符:

    • $(‘li:eq(1)’): 选择第二个列表项
    • $(‘li:odd’): 选择奇数的列表项
    • $(‘li:even’): 选择偶数的列表项
    • $(‘li:nth-child(odd)’): 选择从父元素的第一个元素开始计算的所有奇数列表项
    • $(‘li:contain(string)’): 选择包含string的列表项
  8. 表单选择符:

    • :input
    • :button
    • :checked
    • :selected
    • :enabled
    • :disabled
  9. filter: 过滤器,可接选择器和lambda函数

    • $(‘li’).filter(‘:even’)
    • $(‘li’).filter(function(){return this.hostname && this.hostname!=location.hostname})
  10. next,nextALL,prev,prevAll,andSelf,siblings:选择所选元素的下一个元素等

  11. 连缀(chaining)

    • $(‘tr:contains(Henry)’).parent().find(‘td:eq(1)’).addClass(‘myClass’).end().find(‘td:eq(2)’).addClass(‘myClass’);
  12. $(‘#myId’).get(0) 等价于 $(‘myId’)[0]

事件

  1. window.onload vs $(document).ready

    • window.onload 是在页面的全部元素都下载好了之后才能执行,而$(document).ready()则是在DOM树准备好就可以执行了。
    • window.onload只能指定一个函数,而$(document).ready()指定的所有函数都会按顺序执行。
    • $(document).ready(func)可以简写为$(func);
  2. bind(event, func)函数可以为DOM节点绑定事件,以及事件发生时所执行的函数。event可以是:

    • blur
    • change
    • click
    • dbclick
    • error
    • focus
    • keydown
    • keypress
    • keyup
    • load
    • mousedown
    • mousemove
    • mouseout
    • mouseover
    • mouseup
    • resize
    • scroll
    • select
    • submit
    • unload
  3. toggle(func1, func2): 单击时轮流执行func1和func2

  4. toggleClass(“someclass”): 单击时轮流添加或删除someclass.

  5. 事件捕获和事件冒泡:事件捕获是从父节点开始将事件传递给子节点,而事件冒泡则正好相反。JQuery采取事件冒泡的策略。

  6. 事件对象:事件发生时执行的函数可以把事件对象作为参数。

    • event.target属性:保存发生事件的目标元素
    • event.stopPropagation(): 阻止事件继续冒泡
    • event.preventDefault(): 阻止事件的默认操作
  7. $(event.target).is(): 接收一个选择符表达式作为参数,并验证JQuery对象是否满足它。

  8. unbind(): 移除事件处理

  9. 事件命名空间:bind(‘click.sometag’, func) 可以在unbind的时候只解绑指定名字的事件。

  10. trigger(): 使用javascript去触发某个事件

效果

  1. .css(): 参数可以是(“attr”, “value”),也可以是({“attr”: “value”, “attr”: “value”}),修改JQuery对象的css
  2. .hide(): 将JQuery对象的内联css属性”display”设置为”none”
  3. .show(): 将JQuery对象的内联css属性”display”恢复成hide之前的值。hide和show可以传入速度作为参数:”slow”, “normal”, “fast”
  4. fadeIn()和fadeOut(): 淡入和淡出,可传入速度参数。
  5. slideDown()和slideUp(): 滑下和滑上,可传入速度参数。
  6. toggle(): 相当于轮流执行show()和hide()方法,可传入速度参数。
  7. slideToggle(): 相当于轮流执行slideUp()和slideDown(),可传入速度参数。
  8. animate(): 自定义动画。有两种传入参数的方式:
    • ({“attr”: “value”, “attr”, “value}, speed, easing, func):第一个参数是css属性,第二个是速度,第三个是缓动,第四个是动画完成后的回调函数。
    • ({“attr”: “value”, “attr”: “value”}, {duration: “value”, easing: “value”, complete: functiong(){}, queue: true…})
  9. outerWidth(true): 返回width+padding+border+margin的值
  10. outerWidth(), outerWidth(false): 返回width+padding+border的值
  11. innerWidth(): 返回width+padding的值
  12. outerHeight(), innerHeight()与outerWidth(), innerWidth()类似
  13. animate()中指定多个css属性变化可以让动画并发,而用多个效果方法如animate,fadeIn等连缀则可以让动画排队显示。设置queue参数为false则可以让该动画不用排队。
  14. css()方法不属于效果方法,不能排队,但可以用queue()方法将其加入队列,例如:
    • .fadeTo().queue(function(next){$(xxx).css(); next();})
  15. JQuery为每个效果方法都提供了回调函数,可以用来让多个JQuery对象的动画排队执行。

操作DOM

AJAX