dw는 자바스크립트 양식 확인을 구현합니다.-프런트엔드 Q&A-php.cn

dw는 자바스크립트 양식 확인을 구현합니다.

WBOY

풀어 주다： 2023-05-17 20:28:36

원래의

953명이 탐색했습니다.

프론트엔드 개발에서는 폼 유효성 검사가 매우 중요한 부분입니다. 이는 사용자가 입력한 데이터가 요구 사항을 충족하는지 확인하고 더 나은 사용자 경험을 제공합니다. JavaScript는 양식 유효성 검사를 구현하는 데 사용할 수 있는 매우 널리 사용되고 강력한 프로그래밍 언어입니다. 이 기사에서는 dw(Dreamweaver)를 사용하여 JavaScript 양식 유효성 검사를 구현하는 방법을 소개합니다.

dw는 뛰어난 HTML 편집기이자 웹 사이트 개발 도구입니다. 여기에는 개발자가 웹 사이트를 보다 효율적으로 만들고 관리하는 데 도움이 되는 풍부한 시각적 도구와 코드 편집기가 있습니다. dw는 또한 JavaScript 코드 프롬프트와 구문 검사 기능을 제공하여 JavaScript 코드를 더 쉽고 빠르게 작성할 수 있도록 해줍니다.

시작하기 전에 양식이 있어야 합니다. dw에서 양식을 생성하는 것은 매우 간단합니다. 양식 제어판을 사용하기만 하면 됩니다. dw의 메뉴 표시줄에서 "창"->"컨트롤"을 선택하여 양식 제어판을 엽니다. 패널에서 필요한 양식 컨트롤을 선택하고 페이지 중앙으로 드래그합니다. 이 글에서는 양식 확인을 구현하기 위한 예로 간단한 로그인 양식을 사용하겠습니다.

코드 구현은 다음과 같습니다.

이메일 확인 구현

로그인 양식에 사용자는 자신의 이메일을 입력해야 하므로 사용자가 입력한 이메일을 확인해야 합니다.

먼저 JavaScript에서 작동하기 위해서는 이메일 입력창의 ID를 정의해야 합니다. dw에서는 속성 패널에서 양식 컨트롤의 ID를 설정할 수 있습니다. 이 예에서는 이메일 입력 상자에 대해 ID를 "email"로 설정했습니다.

다음으로 이메일 확인을 수행하기 위해 JavaScript 코드에 함수를 정의해야 합니다. 코드는 다음과 같이 구현됩니다.

function validateEmail() {
  var email = document.getElementById("email").value;
  var emailPattern = /^w+@[a-zA-Z_]+?.[a-zA-Z]{2,3}$/;

  if (!emailPattern.test(email)) {
    alert("请输入有效的邮箱地址！");
    return false;
  }

  return true;
}

로그인 후 복사

먼저 사용자가 입력한 이메일 주소를 저장하기 위해 "email" 변수를 정의합니다. 다음으로 이메일 주소와 일치하는 정규식을 정의했습니다. 이 정규식은 가장 일반적인 이메일 주소 형식과 일치합니다.

그런 다음 test() 메서드를 사용하여 사용자가 입력한 이메일 주소가 정규식과 일치하는지 확인합니다. 일치하지 않으면 사용자에게 유효한 주소를 입력하고 false를 반환하라는 경고 상자가 나타납니다. 그렇지 않으면 true를 반환합니다.

마지막으로 사용자가 제출 버튼을 클릭할 때 유효성을 검사하기 위해 양식의 제출 이벤트에 함수를 바인딩해야 합니다. dw에서는 속성 패널에서 양식 컨트롤에 대한 제출 이벤트를 설정할 수 있습니다.

코드는 다음과 같이 구현됩니다.

<form onsubmit="return validateEmail()">
  // 表单控件
  <input type="email" id="email" name="email" required>
  
  // 提交按钮
  <input type="submit" value="提交">
</form>

로그인 후 복사

form 요소에서 onsubmit 이벤트를 정의하고 방금 정의한 확인 함수에 바인딩합니다. 사용자가 제출 버튼을 클릭하면 양식이 자동으로 데이터의 유효성을 검사하고 제출합니다.

비밀번호 확인 구현

로그인 양식에 사용자도 자신의 비밀번호를 입력해야 하므로 우리도 사용자가 입력한 비밀번호를 확인해야 합니다.

비밀번호 확인 요구 사항에는 일반적으로 비밀번호 길이 제한, 비밀번호 복잡성 제한 등이 포함됩니다. 이 문서에서는 비밀번호 길이를 6~20자 사이로 제한합니다.

먼저 자바스크립트에서 비밀번호 입력창이 동작하기 위해서는 아이디를 정의해야 합니다. dw에서는 속성 패널에서 양식 컨트롤의 ID를 설정할 수 있습니다. 이 예에서는 비밀번호 입력 상자의 ID를 "password"로 설정했습니다.

다음으로 비밀번호 확인을 위해 JavaScript 코드에 함수를 정의해야 합니다. 코드는 다음과 같이 구현됩니다.

function validatePassword() {
  var password = document.getElementById("password").value;

  if (password.length < 6 || password.length > 20) {
    alert("密码长度必须在6到20个字符之间！");
    return false;
  }

  return true;
}

로그인 후 복사

먼저 사용자가 입력한 비밀번호를 저장하기 위해 "password" 변수를 정의합니다. 다음으로 비밀번호 길이가 6~20자인지 확인합니다. 일치하지 않으면 사용자에게 유효한 비밀번호를 입력하고 false를 반환하라는 경고 상자가 나타납니다. 그렇지 않으면 true를 반환합니다.

코드는 다음과 같이 구현됩니다.

<form onsubmit="return validateEmail() && validatePassword()">
  // 表单控件
  <input type="email" id="email" name="email" required>
  <input type="password" id="password" name="password" required>
  
  // 提交按钮
  <input type="submit" value="提交">
</form>

로그인 후 복사

form 요소에서 onsubmit 이벤트를 정의하고 방금 정의한 확인 함수에 바인딩합니다. 여기서는 "&&" 연산자를 사용하여 이메일 확인 기능과 비밀번호 확인 기능을 결합합니다. 두 함수의 반환 값이 true인 경우에만 데이터 제출이 허용됩니다.

이 시점에서 dw에서 JavaScript 양식 유효성 검사를 구현하는 프로세스가 종료되었습니다. 사용자가 입력한 데이터가 요구 사항을 충족하지 않는 경우 경고 상자가 나타나 사용자에게 이를 알리고 양식 제출을 방지합니다. 이러한 방식으로 우리는 사용자의 데이터 보안을 더 잘 보호하고 더 나은 사용자 경험을 제공할 수 있습니다.

위 내용은 dw는 자바스크립트 양식 확인을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!