Web and Mobile Programming: августа 2013

четверг, 22 августа 2013 г.

Валидация с помощью регулярного выражения для плагина jquery.validate

Плагин для валидации полей ввода jQuery Validate не позволяет использовать регулярные выражения для проверки корректности ввода. Поэтому для того чтобы проверить введенный пользователем текст с помощью регулярного выражения необходимо сделать следующее.

1. Добавить метод для валидации, который будет проверять на соответствие регулярному выражению

jQuery.validator.addMethod(
    'regexp',
    function(value, element, regexp) {
        var re = new RegExp(regexp);
        return this.optional(element) || re.test(value);
    },
    "Please check your input." 
);

2. После чего использовать добавленный метод следующим образом

$('#form').validate({
  rules: {
    reg_password: {
      required: true,
      minlength: 6,
      regexp: '^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$'
    },
    ...
  },
  messages: {
    reg_password: {
      regexp: 'Пароль должен содержать 
        как минимум один числовой символ один буквенный символ'
    }
    ...
  }
});

Regex with at least 1 number and 1 character

Регулярное выражение, которое, например, может подойти для проверки сложности пароля. Такое выражение требует, чтобы пароль содержал как минимум один буквенный символ и один цифровой символ.

'^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$'

понедельник, 19 августа 2013 г.

html5 круговой индикатор процесса

Круговой индикатор процесса который показывает процент заполнения. Установлен интервал в 42 секунды. Данный код можно просто скопировать и вставить себе в html документ, все будет работать.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"
 type="text/javascript"></script>
<style>
.timer {
 position: relative;
 font-size: 200px;
 width: 1em;
 height: 1em;
 float: left;
}
 
.timer>.percent {
 position: absolute;
 top: 1.05em;
 left: 0;
 width: 3.33em;
 font-size: 0.3em;
 text-align: center;
}
 
.timer>#slice {
 position: absolute;
 width: 1em;
 height: 1em;
 clip: rect(0px, 1em, 1em, 0.5em);
}
 
.timer>#slice.gt50 {
 clip: rect(auto, auto, auto, auto);
}
 
.timer>#slice>.pie {
 border: 0.1em solid #c0c0c0;
 position: absolute;
 width: 0.8em; /* 1 - (2 * border width) */
 height: 0.8em; /* 1 - (2 * border width) */
 clip: rect(0em, 0.5em, 1em, 0em);
 -moz-border-radius: 0.5em;
 -webkit-border-radius: 0.5em;
 border-radius: 0.5em;
}
 
.timer>#slice>.pie.fill {
 -moz-transform: rotate(180deg) !important;
 -webkit-transform: rotate(180deg) !important;
 -o-transform: rotate(180deg) !important;
 transform: rotate(180deg) !important;
}
 
.timer.fill>.percent {
 display: none;
}
 
.timer.fill>#slice>.pie {
 border: transparent;
 background-color: #c0c0c0;
 width: 1em;
 height: 1em;
}
</style>
<script type="text/javascript">
 var timer;
 var timerCurrent;
 var timerFinish;
 var timerSeconds;
 function drawTimer(percent){
  $('div.timer').html(
          '<div class="percent"></div><div id="slice"'+
   (percent > 50?' class="gt50"':'')+
   '><div class="pie"></div>'+
   (percent > 50?'<div class="pie fill"></div>':'')+'</div>');
  var deg = 360/100*percent;
  $('#slice .pie').css({
   '-moz-transform':'rotate('+deg+'deg)',
   '-webkit-transform':'rotate('+deg+'deg)',
   '-o-transform':'rotate('+deg+'deg)',
   'transform':'rotate('+deg+'deg)'
  });
  $('.percent').html(Math.round(percent)+'%');
 }
 function stopWatch(){
  var seconds = (timerFinish-(new Date().getTime()))/1000;
  if(seconds <= 0){
   drawTimer(100);
   clearInterval(timer);
  }else{
   var percent = 100-((seconds/timerSeconds)*100);
   drawTimer(percent);
  }
 }
    $(document).ready(function(){    
  timerSeconds = 42;
  timerCurrent = 0;
  timerFinish = new Date().getTime()+(timerSeconds*1000);
  timer = setInterval('stopWatch()',50);  
 });
</script>
</head>
<body>
 <div class="timer">
</body>
</html>

Web and Mobile Programming

Поиск по этому блогу

четверг, 22 августа 2013 г.

Валидация с помощью регулярного выражения для плагина jquery.validate

Regex with at least 1 number and 1 character

понедельник, 19 августа 2013 г.

html5 круговой индикатор процесса

Обо мне

Поиск по этому блогу

четверг, 22 августа 2013 г.

Валидация с помощью регулярного выражения для плагина jquery.validate

Regex with at least 1 number and 1 character

понедельник, 19 августа 2013 г.

html5 круговой индикатор процесса

четверг, 22 августа 2013 г.

понедельник, 19 августа 2013 г.