jquery validate的两种方法

来源：互联网发布：爱古兰中阿文软件下载编辑：程序博客网时间：2024/05/17 21:48

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>

1 0