JavaScript를 사용하여 확인하는 방법

웹 개발에서 양식은 매우 일반적인 요소입니다. 그러나 사용자가 양식에 입력한 데이터는 정확성이 보장되지 않는 경우가 많으므로 데이터의 유효성을 확인하기 위해 몇 가지 확인 작업을 수행해야 합니다. 웹 프론트 엔드 개발의 중요한 부분인 JavaScript에는 매우 강력한 확인 기능이 있습니다. 이 기사에서는 JavaScript를 사용하여 양식 데이터를 확인하는 방법을 소개합니다.

1. 양식 데이터 가져오기

양식 데이터를 확인하려면 먼저 입력 데이터를 가져와야 합니다. JavaScript에서는 아래와 같이 문서 개체를 사용하여 양식 요소를 얻을 수 있습니다.

let username = document.getElementById('username').value; // 获取用户名的值
let password = document.getElementById('password').value; // 获取密码的值

그 중 getElementById() 메서드는 요소의 id 속성을 기반으로 해당 요소를 가져올 수 있습니다. 양식 요소의 값을 얻은 후 해당 값을 확인할 수 있습니다.

2. 사용자 이름 확인

사용자 이름을 확인할 때 정규식을 사용할 수 있습니다. 다음은 대문자, 소문자, 숫자 및 밑줄을 일치시킬 수 있는 6~20자 길이의 간단한 정규식입니다.

let usernamePattern = /^[a-zA-Z0-9_]{6,20}$/;

그런 다음 얻은 사용자 이름을 정규식과 일치시켜 요구 사항을 충족하는지 확인할 수 있습니다.

if (!usernamePattern.test(username)) {
  // 满足条件
} else {
  // 不满足条件
}

위 코드에서 test() 메서드는 문자열이 특정 정규 표현식과 일치하는지 테스트할 수 있습니다. 일치하면 true를 반환하고, 일치하지 않으면 false를 반환합니다.

3. 비밀번호 확인

비밀번호를 확인할 때 정규식을 사용할 수도 있습니다. 다음은 6~20자 길이의 대문자와 소문자, 숫자 및 특수 문자를 일치시킬 수 있는 간단한 정규식입니다.

let passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[@$!%*?&])[A-Za-zd@$!%*?&]{6,20}$/;

그런 다음 얻은 비밀번호를 정규식과 일치시켜 요구 사항을 충족하는지 확인할 수 있습니다. :

if (!passwordPattern.test(password)) {
  // 满足条件
} else {
  // 不满足条件
}

마찬가지로 위 코드에서 test() 메서드는 문자열이 특정 정규 표현식과 일치하는지 테스트할 수 있습니다. 일치하면 true를 반환하고, 일치하지 않으면 false를 반환합니다.

4. 이메일 주소 확인

이메일 주소는 매우 일반적인 양식 요소이므로 이메일 주소 확인도 매우 필요합니다. 마찬가지로 검증을 위해 정규식을 사용할 수 있습니다. 다음은 합법적인 이메일 주소를 일치시킬 수 있는 간단한 정규식입니다.

let emailPattern = /^[a-zA-Z0-9]+([._]?[a-zA-Z0-9]+)*@[a-zA-Z0-9]+([.][a-zA-Z0-9]+)+$/;

그런 다음 획득한 이메일 주소를 정규식과 일치시켜 요구 사항을 충족하는지 확인할 수 있습니다.

if (!emailPattern.test(email)) {
  // 满足条件
} else {
  // 不满足条件
}

마찬가지로 위 코드에서 테스트( ) 메서드는 문자열이 정규식과 일치하는지 테스트할 수 있으며, 일치하면 true를 반환하고, 일치하지 않으면 false를 반환합니다.

5. 휴대폰 번호 확인

휴대폰 번호 확인 시 정규식도 사용할 수 있습니다. 다음은 합법적인 휴대폰 번호를 일치시킬 수 있는 간단한 정규식입니다.

let phonePattern = /^1[34578]d{9}$/;

그런 다음 획득한 휴대폰 번호를 정규식과 일치시켜 요구 사항을 충족하는지 확인할 수 있습니다.

if (!phonePattern.test(phone)) {
  // 满足条件
} else {
  // 不满足条件
}

마찬가지로 위 코드에서 테스트 () 메소드는 문자열이 특정 정규 표현식과 일치하는지 테스트할 수 있습니다. 일치하면 true를 반환하고, 일치하지 않으면 false를 반환합니다.

6. 검증 기능 구현

위의 검증 규칙을 통합하여 완전한 양식 검증 기능을 구현할 수 있습니다. 다음은 간단한 샘플 코드입니다.

let usernamePattern = /^[a-zA-Z0-9_]{6,20}$/; // 校验用户名
let passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[@$!%*?&])[A-Za-zd@$!%*?&]{6,20}$/; // 校验密码
let emailPattern = /^[a-zA-Z0-9]+([._]?[a-zA-Z0-9]+)*@[a-zA-Z0-9]+([.][a-zA-Z0-9]+)+$/; // 校验邮箱地址
let phonePattern = /^1[34578]d{9}$/; // 校验手机号码

function validateForm() { // 表单校验函数
  let username = document.getElementById('username').value; // 获取用户名
  let password = document.getElementById('password').value; // 获取密码
  let email = document.getElementById('email').value; // 获取邮箱地址
  let phone = document.getElementById('phone').value; // 获取手机号码

  if (!usernamePattern.test(username)) { // 校验用户名
    alert('请填写6到20位大小写字母、数字和下划线');
    return false;
  } else if (!passwordPattern.test(password)) { // 校验密码
    alert('请填写6到20位大小写字母、数字、特殊字符');
    return false;
  } else if (!emailPattern.test(email)) { // 校验邮箱地址
    alert('请填写正确的邮箱地址');
    return false;
  } else if (!phonePattern.test(phone)) { // 校验手机号码
    alert('请填写正确的手机号码');
    return false;
  } else {
    return true;
  }
}

위 코드에서는 양식이 제출되면 유효성 검사Form() 함수가 자동으로 호출되어 양식에 포함된 데이터를 확인합니다. 확인에 실패하면 함수는 양식이 제출되지 않도록 false를 반환합니다. 확인에 성공하면 함수는 true를 반환하고 양식이 제출됩니다. 동시에 확인에 실패하면 해당 프롬프트 메시지가 팝업되어 사용자가 쉽게 수정할 수 있습니다.

7. 요약

JavaScript는 매우 중요한 웹 프론트엔드 개발 언어로서 매우 강력한 검증 기능을 제공합니다. 양식 개발에서 데이터 확인을 위해 JavaScript를 사용하면 데이터의 유효성과 정확성을 크게 보장하고 사용자 경험과 데이터 보안을 향상시킬 수 있습니다. 위 내용은 참고용으로 사용할 수 있는 일반적으로 사용되는 확인 규칙과 코드 구현을 소개합니다.

위 내용은 JavaScript를 사용하여 확인하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!