使用jQuery的validate插件实现一个简单的表单验证

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body style="margin: 50px;">

        <form id="form1" action="#" method="get">

            <table>

                <tr>

                    <td>用户名</td>

                    <td><input type="text" name="username" id="username" /></td>

                </tr>

                <tr>

                    <td>密码</td>

                    <td><input type="password" name="password" id="password" /></td>

                </tr>

                <tr>

                    <td></td>

                    <td><input type="submit" value="提交" /></td>

                </tr>

            </table>

        </form>

        <!--引入JQ库-->

        <script src="../js/jquery-3.3.1.js"></script>

        <!--引入validate库-->

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

        <script type="text/javascript">

            $("#form1").validate({

                rules:{

                    username:{

                        required:true

                    },

                    password:{

                        required:true,

                        minlength:4,

                        maxlength:6

                    }

                },

                messages:{

                    username:{

                        required:"用户名必填"

                    },

                    password:{

                        required:"密码不能为空",

                        minlength:"密码的最小长度为4",

                        maxlength:"密码的最大长度为6"

                    }

                }

            })

        </script>

    </body>

</html>

如果是radio或者checkbox，校验不通过时默认的提示信息在第一个radio后面，的解决方案：

//在radio标签前后面加上以下标签：注意，lable的for属性值要与radio的name属性值保持一致。

    <label class="error" for="gender" style="display: none;"></label>

JQuery表单验证插件的更多相关文章

  1. 【jquery】Validform，一款不错的 jquery 表单验证插件

    关于 Validform 这是一款很不错的 jquery 表单验证插件,它几乎能够满足任何验证需求,仅仅一行代码就能搞定整站的表单验证. $('form').Validform(); 为什么能如此方便 ...

  2. 【jQuery基础学习】06 jQuery表单验证插件-Validation

    jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等1 ...

  3. jQuery 表单验证插件 jQuery Validation Engine 使用

    jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...

  4. jquery validate强大的jquery表单验证插件

    jquery validate的官方演示和文档地址: 官方网站:http://jqueryvalidation.org/ 官方演示:http://jqueryvalidation.org/files/ ...

  5. 轻量级实用JQuery表单验证插件：validateForm5

    表单验证是Web项目一个必不可少的环节,而且是一项重复的劳动,于是小菜封装了一款简单的表单验证插件,名字叫:validateForm5. validateForm5插件基于Jquery,并向HTML5 ...

  6. (转)强大的JQuery表单验证插件 FormValidator使用介绍

    jQuery formValidator表单验证插件是客户端表单验证插件.在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者(J ...

  7. 强大的JQuery表单验证插件 FormValidator使用介绍

    jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者( ...

  8. Jquery表单验证插件validate

    写在前面: 在做一些添加功能的时候,表单的提交前的验证是必不可少的,jquery的validate插件就还可以,对于基本的需求已经够了.这里记录下基本的用法. 还是写个简单的demo吧 <htm ...

  9. jQuery 表单验证插件——Validation(基础)

    这个插件不错,是用jquery写的.能进行表单验证.我喜欢它的原因是因为 1.他有自带的验证规则 2.你可以自己写验证规则 3.可以通过ajax与后台交互,与后台数据比较.最后返回结果!我在表单中要验 ...

随机推荐

  1. （五）多点触控之兼容ViewPager

    在上一篇文章中,自定义的ZoomImageView已经实现了自由缩放,自由移动以及双击放大与缩小的功能.已经可以投入使用这个控件了.下面我们就在ViewPager中使用这个控件.如果你还没读过上一篇文 ...

  2. HTML DOM 初学笔记

    JavaScript HTML DOM 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树,如图: 通过可编程的对象 ...

  3. 【C++】随机重命名MP3文件

    新置MP3一件,竟然没有随机播放的功能.坑啊!身为程序媛一枚,自己动手吧~ 获取当前路径: char buf[1000]; GetCurrentDirectory(1000,buf); string ...

  4. [19/04/04-星期四] IO技术_CommonsIO(通用IO,别人造的轮子,FileUtils类 操作文件 & IOUtilsl类 操作里边的内容 )

    一.概念 JDK中提供的文件操作相关的类,但是功能都非常基础,进行复杂操作时需要做大量编程工作.实际开发中,往往需要 你自己动手编写相关的代码,尤其在遍历目录文件时,经常用到递归,非常繁琐. Apac ...

  5. Selenium图片上传

    方式1: 如果是input类型的标签则可直接赋值 部分代码: driver.find_element_by_name("file").send_keys("E:\\tes ...

  6. VC++ MFC SDI/MDI Ribbon程序的停靠窗格被关闭后如何再次显示

    VC++ 创建基于MFC的SDI应用程序,Visual Studio风格的主界面如下图所示,在该主界面上的视图菜单下包含有队对各个可停靠窗格显示或隐藏的控制菜单项.而基于Ribbon风格的应用程序,所 ...

  7. 【luogu P2491 [SDOI2011]消防】 题解

    题目链接:https://www.luogu.org/problemnew/show/P2491 题外话: OI一共只有三种题--会的题,不会的题,二分题. 题解: step 1 求树的直径,把树的直 ...

  8. HDU 1789 Doing Homework again（非常经典的贪心）

    Doing Homework again Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Oth ...

  9. 使用java将base64码与图片互转！

    本篇文章主要介绍了java 后台将base64字符串保存为图片的方法,现在分享给大家,也给大家做个参考. import java.io.FileInputStream; import java.io. ...

  10. 一点一点看JDK源码（五）java.util.ArrayList 后篇之SubList

    一点一点看JDK源码(五)java.util.ArrayList 后篇之SubList liuyuhang原创,未经允许禁止转载 本文举例使用的是JDK8的API 目录:一点一点看JDK源码(〇) S ...