jquery validate的两种方法

最新推荐文章于 2024-09-04 11:04:51 发布

米米余

最新推荐文章于 2024-09-04 11:04:51 发布

阅读量568

点赞数 1

分类专栏：编程文章标签： jquery validate 验证 js

本文链接：https://blog.csdn.net/qq_37017864/article/details/70117972

版权

编程专栏收录该内容

27 篇文章 0 订阅

订阅专栏

1.方法一：

引用文件：

<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="jquery-validate.js"></script>

 
 代码： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .error{
            color: red;
        }
        .active{
            color: #32BC61;
        }
    </style>
</head>
<body>
<div class="rightInput">
    <form >
        <div>
            <label>姓名</label>
            <input type="text" class="required" data-tip="请输入文字" data-valid="isNonEmpty||between:2-6"
                   data-error="姓名不能为空||范围是2-6">
        </div>
    </form>
</div>
<div>
    <input type="submit"/>
</div>
</body>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="jquery-validate.js"></script>
<script>
    $('form').validate({
        onFocus: function() {
            this.parent().addClass('active');
            return false;
        },

        onBlur: function() {
            var $parent = this.parent();
            var _status = parseInt(this.attr('data-status'));
            $parent.removeClass('active');
            if (!_status) {
                $parent.addClass('error');
            }
            return false;

        }

    });

    $('form').on('submit', function(event) {
         event.preventDefault();
        $(this).validate('submitValidate'); //return boolean;

    });
</script>
</html>

2.方法二：

  引用文件：

   <script src="jquery.validate.min.js" type="text/javascript"></script>

代码;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery.validate.min.js</title>
</head>
<body>
<form>
    <div>
        <label>输入内容</label>
        <input type="text" minlength="6" data-msg-minlength="至少输入6个字符" required>
    </div>
    <input type="submit">
</form>
</body>
<script src="jquery.validate.min.js" type="text/javascript"></script>
</html>