Javascript: проверка форм для валидации

Я играю с проверкой формы с помощью javascript. поэтому, когда я использую (это) ключевое слово в прототипе метода (Validator), консоль дает мне ошибку, которая находится на этом рисунке Error from chrome. помоги мнеJavascript: проверка форм для валидации

function Validation(id, event, target, regex) { 
 
    this.id = id; 
 
    this.event = event; 
 
    this.target = target; 
 
    this.regex = regex; 
 
} 
 

 
Validation.prototype.Validator = function() { 
 
    var result = this.regex.exec(this.target.value); 
 
    if(result && this.target != null) { 
 
     alert("you did it"); 
 
    } 
 
    else { 
 
     alert('no you didn\'t'); 
 
    } 
 
}; 
 
    
 
var object1 = new Validation(document.getElementById('btn'), eventer, document.getElementById('box'), /\w/); 
 

 
var eventer = object1.id.addEventListener("click", object1.Validator); 
 

 
var object2 = new Validation(document.getElementById('btn'), 
 
          eventer2,document.getElementById('passbox'), /\d/); 
 

 
var eventer2 = object2.id.addEventListener("click", object2.Validator);

<style> 
 
     .label { 
 
      display: inline-block; 
 
      margin-top: 5px; 
 
     } 
 
     #box { 
 
      margin-left: 5px; 
 
     } 
 
     #passbox { 
 
      margin-left: 8px; 
 
     } 
 
     
 
    </style>

<!doctype html> 
 
    <html> 
 
    <head> 
 
    <title>playing with forms</title> 
 
    </head> 
 
    <body> 
 
     <div> 
 
     <div><span class="label">Username: </span><input type="text" id="box"> 
 
     </div> 
 
     <div><span class="label">Password: </span><input type="text"    
 
     id="passbox"></div> 
 
    </div> 
 
    <input type="submit" id="btn" value="clickme"/> 
 

 
    </body> 
 
    </html>

источник

2015-12-23 Yya09

Почему строить свой собственный сценарий проверки? Как насчет проверки ограничений HTML5? Это, безусловно, сделает, что вы пытаетесь закодировать здесь. – Marcel

Да, но мне нужно узнать, как это сделать в моем собственном сценарии. Я хочу быть разработчиком javascript. и спасибо за это предложение – Yya09

При передаче функции проверки в качестве обработчика события и он вызывается, объект this устанавливается на элемент, а не к объекту валидатора. Это приводит к тому, что свойство this.regex не определено и вызывает неудачное совпадение.

Таким образом, вы должны убедиться, что объект this привязан к считывающему вместо этого, и вы можете сделать это с помощью:

var eventer = object1.id.addEventListener("click", object1.Validator.bind(object1));

источник

2015-12-23 08:36:01 bcc32

Это не сработало, я попробовал, он дал мне ошибку (this.regex.match isnot a function) – Yya09

@ Yya09 на [RegExp] (https: // developer. mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/RegExp) – Hacketo

Вы используете this.regex.exec или this.regex.match? Класс Regexp не имеет функции соответствия, но имеет функцию exec. Вы думаете о String.prototype.match, возможно? – bcc32

Выпуск Validator функции назначается как событие щелчка к DOM элементу, поэтому, когда вы говорите this, он будет представлять этот элемент DOM, а не ваш объект. Вам нужно будет использовать функцию bind(), чтобы изменить контекст функции.

Ниже приводится код:

function Validation(id, event, target, regex) { 
 
    this.id = id; 
 
    this.event = event; 
 
    this.target = target; 
 
    this.regex = regex; 
 
} 
 

 
Validation.prototype.Validator = function() { 
 
    console.log(this); 
 
    var result = this.regex.exec(this.target.value); 
 
    if(result && this.target != null) { 
 
     alert("you did it"); 
 
    } 
 
    else { 
 
     alert('no you didn\'t'); 
 
    } 
 
}; 
 
    
 
var object1 = new Validation(document.getElementById('btn'), eventer, document.getElementById('box'), /\w/); 
 

 
var eventer = object1.id.addEventListener("click",object1.Validator.bind(object1)); 
 

 
var object2 = new Validation(document.getElementById('btn'), 
 
          eventer2,document.getElementById('passbox'), /\d/); 
 

 
var eventer2 = object2.id.addEventListener("click", object2.Validatorbind(object2));

.label { 
 
    display: inline-block; 
 
    margin-top: 5px; 
 
} 
 
#box { 
 
    margin-left: 5px; 
 
} 
 
#passbox { 
 
    margin-left: 8px; 
 
}

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <title>playing with forms</title> 
 
</head> 
 

 
<body> 
 
    <div> 
 
    <div><span class="label">Username: </span> 
 
     <input type="text" id="box"> 
 
    </div> 
 
    <div><span class="label">Password: </span> 
 
     <input type="text" id="passbox"> 
 
    </div> 
 
    </div> 
 
    <input type="submit" id="btn" value="clickme" /> 
 

 
</body> 
 

 
</html>

источник

2015-12-23 08:38:07 Rajesh

спасибо, что работает @Rajesh – Yya09

Javascript: проверка форм для валидации

ответ

Смежные вопросы