Как проверить правильность формата?

Question

У меня есть этот пример:

link

КОД HTML:

<input class="" type="text" name="primary_phone" id="primary_phone" maxlength="10" placeholder="1234567890"> 

КОД CSS:

.valid{ 
    border:1px solid green; 
} 
.invalid{ 
    border:1px solid red; 
} 

КОД JS:

$("#primary_phone").blur(function() { 
     text = $(this).val().replace(/(\d\d\d)(\d\d\d)(\d\d\d\d)/, '($1)$2-$3'); 
     $(this).val(text); 

    if(the form==valid) 
    { 
     addClass.(valid); 
    }else{ 
     addClass.(invalid); 
    } 

}); 

, что я хочу сделать, это проверить ваши ... добавить красную границу в случае, если это опечатка и формат не соблюдается.

Я положил в код идею, как я хочу сделать Если пользователь сначала набирает правильную форму, а затем удаляет и записывает ее неправильно, я хочу сделать недействительным код.

Если вам нужна дополнительная информация, пожалуйста, дайте мне знать

Заранее спасибо!

Answer 1

сделать (заменить . на :), проверьте this

:valid{ 
    border:1px solid green; 
} 
:invalid{ 
    border:1px solid red; 
} 

<input class="" type="text" name="primary_phone" id="primary_phone" maxlength="10" placeholder="1234567890" pattern="(\d\d\d)(\d\d\d)(\d\d\d\d)"> 

добавить pattern атрибут, как (\d\d\d)(\d\d\d)(\d\d\d\d) так, что браузер знает, что valid и что invalid

проверить этот обновленный fiddle

Answer 2

Вы можете указать regex.test(), чтобы проверить формат, который действителен или не нравится. Он вернет true, если формат действителен и false, если он недействителен.

$("#primary_phone").blur(function() { 
 
    var text = $(this).val(); 
 
    if(text.length==13) return; 
 
    
 
    var isValid = /(\d\d\d)(\d\d\d)(\d\d\d\d)/.test(text); 
 
    if (isValid) { 
 
    $(this).val(text.replace(/(\d\d\d)(\d\d\d)(\d\d\d\d)/, '($1)$2-$3')); 
 
    $(this).addClass('valid').removeClass('invalid'); 
 
    } else { 
 
    $(this).addClass('invalid').removeClass('valid'); 
 
    } 
 
});

.valid { 
 
    border: 1px solid green; 
 
} 
 

 
.invalid { 
 
    border: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input class="" type="text" name="primary_phone" id="primary_phone" maxlength="10" placeholder="1234567890">