validate是一款功能强大的表单验证插件,尤其是做后台管理项目的时候,需要判断的表单比较多,这时候validate就格外好用。本文主要介绍一下validate结合dialog弹窗“不能为空”的验证方式。
由于后台管理的表单验证比较多,有的时候如果有一两个不能为空的,那么我们使用$(".xxx").val() != ""来判断就可以,但是如果内容多的时候,也使用这种方式,就太过繁琐了,此时借助validate是再好不过的了~
以下为页面效果图:

首先,引入validate.js以及message_zh.js()
由于使用dialog.js弹窗插件,其插件自带了两个button按钮,分别为返回和确定,所以在进行表单验证时,我们并不需要在form表单中创建这两个button,只需要一个隐藏的class名为submit的input按钮即可(用于判断validate的提交),然后使用dialog自带的两个button按钮,具体请往下看:
以下是通过template写的弹窗的内容,以下为html结构(红框内的为重点部分):



以下为js:

在form表单内加一个input<input class="submit" type="submit" value="Submit" style="display: none;">,需要判断不能为空的input或者select添加一个required属性;
在js中通过点击dialog的确定按钮,触发函数,当点击完确定按钮时,类名为submit的函数则被点击,此时只需要判断cb = $(".form").validate().form();若cb返回的是false,则说明没有验证成功,表单中还存在的为空的字段,那么就给dialog弹窗返回一个false,这样弹窗就不会在被点击了确定按钮后消失,反而会一直留在页面上,继续判断,直到cb返回true为止,弹窗才会消失,此时验证成功!