rtivital
2/25/2016 - 6:14 PM

dataValidator.js

styles.css
content_copyfile_download
.main-header {
  background-color: #2c3e50;
  color: #ecf0f1;
  text-align: center;
  padding-bottom: 1.5rem; }

.validator-container {
  margin-top: 2rem; }

/*# sourceMappingURL=styles.css.map */
scripts.js
content_copyfile_download
var onError = function() {
  var parentNode = this.element.parentNode;
  parentNode.classList.add('has-error');
  parentNode.classList.remove('has-success');
  parentNode.querySelector('.help-block').textContent = 'Ошибка: ' + this.message;
};

var onSuccess = function() {
  var parentNode = this.element.parentNode;
  parentNode.classList.add('has-success');
  parentNode.classList.remove('has-error');
  parentNode.querySelector('.help-block').textContent = 'Ура! Всё прошло хорошо, ваши данные полность валидные.';
};

var emailInput = new InputValidator(document.getElementById('email'), {
  rules: {
    min: 5,
    max: 20,
    match: 'email'
  },
  messages: {
    min: 'Это поле должно содержать минимум %rule% символов. Значение %data% не подходит',
    max: 'Это поле должно содержать максимум %rule% символов. Значение %data% не подходит',
    match: 'Это поле должно содержать адрес электронной почты. Значение %data% не подходит'
  },
  onError: onError,
  onSuccess: onSuccess
});

var passwordInput = new InputValidator(document.getElementById('password'), {
  rules: {
    required: true,
    password: true
  },
  messages: {
    required: 'Это поле обязательно для заполнения!',
    password: 'Пароль должет быть 12345qwerty Значение "%data%" не подходит'
  },
  onError: onError,
  onSuccess: onSuccess
});



var validateBtn = document.getElementById('validate');
validateBtn.addEventListener('click', function(e) {
  emailInput.validate();
  // passwordInput.validate();
}, false);

// Validator.fn.password = function() {
//   return this.value.toLowerCase() === '12345qwerty';
// };
inputValidator.js
content_copyfile_download
var InputValidator = (function() {
  'use strict';

  var _createMessage = function(message, settings) {
    for (var key in settings) {
      message = message.replace('%' + key + '%', settings[key]);
    }
    return message;
  };

  var Validator = function(element, settings) {
    DataValidator.call(this, element.value);
    // console.log(DataValidator);
    this.rules = settings.rules;
    this.element = element;
    this.settings = settings;
  };

  // console.log(DataValidator);
  Validator.prototype = Object.create(DataValidator.prototype);
  Validator.prototype.constructor = DataValidator;

  Validator.prototype.validate = function() {
    this.data = this.element.value.trim();
    this.length = this.data.length;
    // console.log(this.rules);
    var result = this.init(this.rules);
    if (!result.valid) {
      for (var rule in this.rules) {
        // console.log(rule, this.rules);
        if (!result[rule].passed) {
          // console.log(result[rule]);
          this.message = _createMessage(this.settings.messages[rule], {
            rule: result[rule].param,
            data: this.data
          });
          break;
        }
      }
      this.settings.onError.call(this);
    } else {
      this.settings.onSuccess.call(this);
    }
  };

  return Validator;
})();
index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Validator</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <header class="container-fluid main-header">
    <div class="row">
      <h1>Валидация данных</h1>
    </div>
  </header>

  <!-- Классы в Bootsrap 3 - http://getbootstrap.com/css/#forms-control-validation -->
  <main class="container validator-container">
    <div class="row">

      <!-- Контейнер для email адреса -->
      <div class="col-sm-6">
        <div class="input-group center-block">
          <label for="email">Ваш адрес электронной почты</label>
          <input type="text" class="form-control" id="email" placeholder="example@email.com">
          <span id="email-error-container" class="help-block">Введите адресс вашей электронной почты</span>
        </div>
      </div>

      <!-- Контейнер для пароля -->
      <div class="col-sm-6">
        <div class="input-group center-block">
          <label for="password">Ваш пароль</label>
          <input type="password" class="form-control" id="password" placeholder="******">
          <span id="password-error-container" class="help-block">Введите ваш пароль</span>
        </div>
      </div>

      <!-- Контейнер для кнопки, при нажатие на которую будет происходить валидация -->
      <div class="col-sm-12">
        <button class="btn btn-default" id="validate" type="button">Провести валидацию</button>
      </div>

    </div>
  </main>

  <script src="data-validator.js"></script>
  <script src="validate.js"></script>
  <script src="scripts.js"></script>
</body>
</html>
dataValidator.js
content_copyfile_download
var DataValidator = (function() {
  'use strict';

  var regExps = {
    email: /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i,
    url: /^((https?):\/\/(\w+:{0,1}\w*@)?(\S+)|)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/,
    numbers: /^\d+(\.\d{1,2})?$/,
    digits: /[0-9]*$/,
    letters: /[a-z][A-Z]*$/
  };

  var Validator = function(data) {
    this.data = data.trim();
    this.length = this.data.length;
  };

  var fn = Validator.prototype;

  fn.min = function(param) { return this.length >= param; };
  fn.max = function(param) { return this.length <= param; };
  fn.required = function() { return this.length > 0; };
  fn.match = function(param) { return regExps[param].test(this.data); };

  fn.init = function(rules) {
    var results = {
      data: this.data,
      valid: true
    };

    for (var rule in rules) {
      var param = rules[rule];
      var passed = this[rule](param);
      console.log('Rule: ' + rule, 'Param: ' + param);
      if (!passed) {
        results.valid = false;
      }

      results[rule] = {
        passed: passed,
        param: param,
        rule: rule
      };
    }

    return results;
  };

  return Validator;
})();