[JavaScript] 초 간단 유효성 체크 ( 이메일, IP, Port, 비밀번호, 글자 길이 제한 )

 

 

 

1. 이메일 유효성 검사

 

let emailCheck = true;
const ValidateEmail = (text) => {
  var emailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/
  if (emailformat.test(text)) {
      return emailCheck = true;
  } else {
      return emailCheck = false;
  }
}

 

 

 

2. IP 유효성 검사

 

let srvrIpCheck = true;
const ValidateServerIp = (text) => {
  var ipformat = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
  if (ipformat.test(text)) {
      return srvrIpCheck = true;
  } else {
      return srvrIpCheck = false;
  }
}

 

 

 

3. Port 유효성 검사

 

let srvrPortCheck = true;
const ValidateServerPort = (text) => {
  var portformat = /^[0-9]+$/;
  if (portformat.test(text) && Number(text) <= 65535) {
      return srvrPortCheck = true;
  } else {
      return srvrPortCheck = false;
  }
}

 

 

 

4. 비밀번호 유효성 검사

 

let passwordCheck = true;
const ValidatePassword = (text) => {
  var pwdformat = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$/
  if (pwdformat.test(text)) {
      return passwordCheck = true;
  } else {
      return passwordCheck = false;
  }
}

 

 

 

5. 글자 길이 제한

 

const ValidateVarchar128 = (text) => {
  if(text.length >= 128){
    return ValidateVarchar = false;
  }else{
    return ValidateVarchar = true;
  }
}

 

 

 

보면 알겠지만, 전부 같은 형식으로 정규식과 조건만 바꿔서 사용 했다.

정규식만 알면 간단하게 처리 할 수 있다.

화면 단에서는 span을 이용하여 if 조건에 따라 표시한다.

 

 

 

<el-col>
  <el-form-item label="ID" prop="">
    <el-input v-model="" @input="ValidateVarchar128"></el-input>
    <span class="" v-if="!ValidateVarchar">128자리 까지만 입력 가능합니다.</span>
  </el-form-item>
</el-col>