반응형
1. 이메일 정규식
이메일 형식으로 입력되었는지 확인하는 방법
// 이메일 형식 체크 정규식
function validEmail(obj){
console.log(obj)
if(validEmailCheck(obj)==false){ // 이메일 형식에 맞지 않을 때
result.textContent = '이메일 형식으로 입력해주세요. ex) xxx@000.000' ;
result.style.color = "red";
// obj.value=''; // 형식에 맞지 않을 때 공백 처리
obj.focus();
return false;
}else{
result.textContent = '올바른 메일 형식입니다.'
result.style.color = "blue";
}
}
function validEmailCheck(obj){
var pattern = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
return (obj.value.match(pattern)!=null)
이메일 형식 ex) abc123@defgh456.ijk
validEmailCheck() 함수는 영문소문자, 숫자 입력되는지
" -" ," _"," ." 세개의 문자 입력을 허용하며
도메인 주소 " ." 이전에 "@" 가 나와야 하고
도메인 주소 "." 이후에 2-3 문자는 와야된다.
2. 이메일 정규식 실행결과
3. 휴대폰 번호 정규식
숫자만 입력받아 휴대폰 형식으로 자동 적용하는 방법
링크: https://gurtn.tistory.com/86
function phoneFormat(target) {
// 특수문자 제거
target.value = target.value.replace(/[^0-9]/g, "");
const value = target.value.split("");
const textArr = [
// 첫번째 구간 (00 or 000)
[0, value.length > 9 ? 3 : 2], // 9자리가 넘을 경우 첫번째 수는 3자리로
// 두번째 구간 (000 or 0000)
[0, value.length > 10 ? 4 : 3], // 10자리가 넘을 경우 두번째 수는 4자리로
// 남은 마지막 모든 숫자
[0, 4] // 세번째 수는 나머지 숫자
];
// 총 3번의 반복 ({2,3}) - ({3,4}) - ({4})
target.value = textArr
.map(function(v) {
return value.splice(v[0], v[1]).join("")
})
.filter(function(text) {
return text
})
.join("-");
}4. 휴대폰 번호정규식 실행결과
전화번호 형식 예시 ex) 000-0000-0000 / 00-000-0000
자동으로 "-" 삽입
5. 전체 소스 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
</head>
<style>
div{
text-align: left;
font-family: system-ui;
padding: 20px;
width:200px
height: auto;
}
</style>
<body>
<div>
<div >
<h4>Email형식 유효성 검사</h4>
<input type = "text" id="emailCheck" /><span class = "result"></span>
</div>
<div>
<h4>휴대폰 형식 적용</h4>
<input type = "text" id="phoneCheck" maxlength="13" />
</div>
</div>
<script type="text/javascript">
const emailCheck = document.getElementById("emailCheck");
const phoneCheck = document.getElementById("phoneCheck");
const result = document.querySelector(".result");
emailCheck.addEventListener("change",(e)=> {
validEmail(e.target)
});
phoneCheck.addEventListener("input",(e) => {
phoneFormat(e.target)
});
// 이메일 형식 체크 정규식
function validEmail(obj){
console.log(obj)
if(validEmailCheck(obj)==false){
result.textContent = '이메일 형식으로 입력해주세요. ex) xxx@000' ;
result.style.color = "red";
// obj.value='';
obj.focus();
return false;
}else{
result.textContent = '올바른 메일 형식입니다.'
result.style.color = "blue";
}
}
function validEmailCheck(obj){
var pattern = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
return (obj.value.match(pattern)!=null)
}
//전화번호 체크
function phoneFormat(target) {
// 특수문자 제거
target.value = target.value.replace(/[^0-9]/g, "");
const value = target.value.split("");
const textArr = [
// 첫번째 구간 (00 or 000)
[0, value.length > 9 ? 3 : 2],
// 두번째 구간 (000 or 0000)
[0, value.length > 10 ? 4 : 3],
// 남은 마지막 모든 숫자
[0, 4]
];
// 총 3번의 반복 ({2,3}) - ({3,4}) - ({4})
target.value = textArr
.map(function(v) {
return value.splice(v[0], v[1]).join("")
})
.filter(function(text) {
return text
})
.join("-");
}
</script>
</body>
</html>반응형
'Java script' 카테고리의 다른 글
| JavaScript_자바스크립트 Math.random() 외 난수 생성하는 방법 (0) | 2022.08.16 |
|---|---|
| JavaScript_프로토타입1 (0) | 2022.08.16 |
| JavaScript_두 INPUT 값 자동 합산 구현/ 숫자만 입력되도록 구현 하는 방법 (0) | 2022.08.08 |
| JavaScript_if문, 삼항 연산자, switch 조건문 (0) | 2022.07.31 |
| JavaScript_자바스크립트 구성 요소, DOM접근 메소드 (0) | 2022.07.27 |
