表单验证插件jquery.validate.js学习

Posted 2020-07-21

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了表单验证插件jquery.validate.js学习相关的知识，希望对你有一定的参考价值。

一、前言

　　在做web应用的时候，数据验证是非常重要的，一个不小心就产生bug，而bug多了显得个人开发能力都有问题，这个时候如果能有一个用着得心应手的验证插件，开发效率也会大大的提高。就好像牛魔王告诉孙悟空，你缺少一件兵器，于是他就抢来了棒子，用着那叫一个爽。三首蛟告诉杨戬，你手里缺少一件兵器，于是他把三首蛟变成了三尖两刃枪里，再配合一个忠心而又嗅觉灵敏的狗狗，办起事来真是事半功倍。今天我也学学这款比较流行的表单验证插件，给自己搞一个好使的兵器。

　　插件官网：https://jqueryvalidation.org

二、cnd的选择

　　bootcdn(http://www.bootcdn.cn)提供了比较多的插件cdn，比较稳定，使用了一段时间感觉比较靠谱，所以就选择使用它了，当然也可以自己下载到本地使用。

　　jquery：http://cdn.bootcss.com/jquery/1.8.1/jquery.js

　　validate：http://cdn.bootcss.com/jquery-validate/1.15.0/jquery.validate.js

　　插件要生效必须要引入jQuery才可以。

三、简单示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="http://cdn.bootcss.com/jquery/1.8.1/jquery.js"></script>
    <script src="http://cdn.bootcss.com/jquery-validate/1.15.0/jquery.validate.js"></script>
    <link href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.css" rel="stylesheet">
</head>
<body>
    <div class="container">
          <form id="commentForm">
              <div class="form-group">
                <label for="exampleInputName">Name</label>
                <input type="text" class="form-control" id="exampleInputName" name="exampleInputName" style="width:40%" required>
              </div>
              <div class="form-group">
                <label for="exampleInputEmail">Email</label>
                <input type="email" class="form-control" id="exampleInputEmail" name="exampleInputEmail" style="width:40%" required>
              </div>
              <button type="submit" class="btn btn-default">Send invitation</button>
        </form>
    </div>
</body>
<script>
    $.validator.setDefaults({
        submitHandler: function() {
            alert("submitted!");
        }
    });

    $().ready(function() {
        // validate the comment form when it is submitted
        $("#commentForm").validate();
    });
</script>
</html>

View Code

　　只要为html标签指定了required属性，js中只需要一句 $("#commentForm").validate(); 即可完成验证，效率真是大大的提高了。

四、不在html上指定属性

　　111

以上是关于表单验证插件jquery.validate.js学习的主要内容，如果未能解决你的问题，请参考以下文章

jQuery表单验证插件——jquery.validate.js

jQuery.validate.js表单验证插件

jquery.validate.js表单验证

jquery.validate.js使用之自定义表单验证规则

表单验证插件jquery.validate.js学习

jquery.validate.js 验证框架详解