JavaScript 함수 양식 유효성 검사: 사용자 입력의 유효성을 확인합니다.

JavaScript 함수 양식 유효성 검사: 사용자 입력의 유효성 확인

사용자가 웹 양식에 데이터를 입력할 때 우수한 사용자 경험과 데이터 보안을 제공하기 위해 이러한 입력 데이터의 유효성을 확인해야 합니다. JavaScript 함수 양식 유효성 검사는 사용자가 입력한 데이터가 요구 사항을 충족하는지 확인하는 데 사용할 수 있는 일반적으로 사용되는 방법입니다. 다음으로 몇 가지 일반적인 양식 유효성 검사 방법을 다루고 구체적인 코드 예제를 제공하겠습니다.

1. Non-null 유효성 검사

Non-null 유효성 검사는 가장 기본적인 양식 유효성 검사 기능입니다. 양식을 제출하기 전에 사용자의 필수 입력 상자에 값이 있는지 확인해야 합니다. 다음은 null이 아닌 간단한 유효성 검사 기능입니다.

function validateRequired(input){
  if(input.value == ""){
    input.classList.add("error"); // 添加错误样式
    return false;
  } else {
    input.classList.remove("error"); // 移除错误样式
    return true;
  }
}

HTML에서는 onsubmit 이벤트를 사용하여 유효성 검사를 트리거할 수 있습니다. onsubmit事件来触发验证：

<form onsubmit="return validateForm()">
  <input type="text" id="name" required>
  <button type="submit">提交</button>
</form>

2. 邮箱验证

邮箱验证是常见的表单验证功能之一。我们可以使用正则表达式来验证用户输入的邮箱地址是否符合规范：

function validateEmail(input){
  var emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/; // 邮箱正则表达式
  if(!emailRegex.test(input.value)){
    input.classList.add("error");
    return false;
  } else {
    input.classList.remove("error");
    return true;
  }
}

HTML中的使用方式：

<form onsubmit="return validateForm()">
  <input type="email" id="email" required>
  <button type="submit">提交</button>
</form>

3. 密码验证

密码验证是保证用户账号安全性的重要环节。我们可以通过验证密码的长度、包含大小写字母和数字来判断密码的强度：

function validatePassword(input){
  var passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*d)[a-zA-Zd]{8,}$/; // 密码正则表达式（至少8个字符，包含大小写字母和数字）
  if(!passwordRegex.test(input.value)){
    input.classList.add("error");
    return false;
  } else {
    input.classList.remove("error");
    return true;
  }
}

HTML中的使用方式：

<form onsubmit="return validateForm()">
  <input type="password" id="password" required>
  <button type="submit">提交</button>
</form>

4. 数字验证

有时候，我们需要验证用户输入的是否为数字。可以使用内置的isNaN()

function validateNumber(input){
  if(isNaN(input.value)){
    input.classList.add("error");
    return false;
  } else {
    input.classList.remove("error");
    return true;
  }
}

이메일 확인

이메일 검증은 일반적인 양식 검증 기능 중 하나입니다. 정규 표현식을 사용하여 사용자가 입력한 이메일 주소가 사양을 충족하는지 확인할 수 있습니다:

<form onsubmit="return validateForm()">
  <input type="number" id="age" required>
  <button type="submit">提交</button>
</form>

🎜HTML에서 사용: 🎜rrreee
🎜비밀번호 확인🎜🎜🎜비밀번호 확인은 이메일의 보안을 보장하기 위한 것입니다. 사용자 계정 중요한 링크. 대문자, 소문자 및 숫자를 포함한 길이를 확인하여 비밀번호의 강도를 판단할 수 있습니다. 🎜rrreee🎜HTML에서의 사용: 🎜rrreee
🎜번호 확인🎜🎜🎜때로는 다음을 확인해야 합니다. 사용자 입력은 숫자입니다. 검증을 위해 내장된 isNaN() 함수를 사용할 수 있습니다: 🎜rrreee🎜HTML에서의 사용: 🎜rrreee🎜위는 실제 필요에 따라 결합하고 확장할 수 있는 몇 가지 일반적인 양식 검증 방법입니다. . JavaScript 함수 양식 유효성 검사를 통해 사용자가 입력한 데이터의 유효성을 보장하고 사용자 경험과 데이터 보안을 향상시킬 수 있습니다. 🎜

위 내용은 JavaScript 함수 양식 유효성 검사: 사용자 입력의 유효성을 확인합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!