PHP7 게시판 개발을 위한 JS 검증
PHP7 Tutorial이 칼럼에서는 메시지 보드 개발에 사용되는 JS 검증을 소개합니다
권장(무료): PHP7 Tutorial
이 섹션의 JS 키워드는 다음과 같습니다: function code>, <code>onsubmit, onclick, document.getElementsByTagName (이것들은 프런트 엔드 개발에서 일반적으로 사용되므로 숙지해야 함) function、onsubmit、onclick、document.getElementsByTagName（这些在前端开发中是常用的，所以必须掌握）
根据步骤一的页面基础上加入JS验证表单事件，提升用户体验，也确保后端接收到的用户提交的数据是预定的。
拿到需求的时候不要急着敲代码，首先确认一下需要用的到知识点，理清思路，脑子里大概有个方案，特别是当下新技术天天新花样的时代，我们更应该思路要时刻保持清晰，不管是原生的js还是jquery或者是其他前端框架，万变不离其宗，只有稳固的js基础，方能走天下。
下面原生JS验证留言板表单的时候也是有多种方法可以实现的，这里用的是其中一个常用的，你能发现其他方法吗，可以在评论区分享个大家，好东西，就是要分享的！~
方法：
-
1、确定触发鼠标点击事件方式，如
onclick，onsubmit，xxx.click(function(){})等等（诸多验证方式，需要你们日后慢慢发现，神奇的JS世界等着你）；我给留言板submit按钮添加了
onclick事件，为了触发checkform函数激活表单验证；然后又给了form标签添加了onsubmit="return false;"属性，为了阻止form表默认的提交事件（阻止事件冒泡）；具体看代码并进行实践试试看~
a、示例代码片段 -
2、定义JS函数；
a、函数命名以
function开头
b、选中表单元素用document.getElementsByTagName('input')
c、阻止冒泡（阻止表单提交，验证成功才能提交）用return false;
d、脚本触发表单提交用document.feedback_form.submit();，feedback_form为form表单的name名称 -
3、submit标签中绑定鼠标点击事件触发我们定义的JS函数，如表单submit标签属性加入
onclick="函数名"a、示例代码片段
1단계에 따르면 사용자 경험을 개선하고 사용자가 제출한 데이터가 백엔드에서 수신되도록 예약하기 위해 JS 확인 양식 이벤트가 페이지에 추가됩니다.<input type="submit" onclick="checkform()" value="提交您的留言" class="sub" />
아래 메시지 보드 양식의 기본 JS 확인을 구현하는 방법은 여러 가지가 있습니다. 여기서 일반적으로 사용되는 방법 중 하나를 댓글 영역에서 모든 사람과 공유할 수 있습니까? 공유하고 싶습니다! ~
메서드:
-
1.
onclick,onsubmit,xxx와 같은 마우스 클릭 이벤트를 트리거하는 방법을 결정합니다. .click( function(){})등(많은 확인 방법이 있으므로 나중에 천천히 발견해야 합니다. 마법의 JS 세계가 여러분을 기다리고 있습니다.)
🎜를 추가했습니다. 메시지 보드이벤트의 제출 버튼을 클릭하여checkform기능을 실행하여 양식 유효성 검사를 활성화한 다음onsubmit="return false;"폼 테이블이 Submit 이벤트를 기본값으로 설정하는 것을 방지하기 위해 속성이 추가되었습니다(이벤트 버블링 방지). 코드를 구체적으로 살펴보고 실제로 사용해 보세요~
a. form name="feedback_form" action="/#" method="post" onsubmit="return false;"> -
2. JS 함수 정의;
🎜a . 함수 이름은function
으로 시작합니다. b. 양식 요소를 선택하려면document.getElementsByTagName('input')을 사용합니다. c. 양식 제출을 방지하려면 확인이 성공한 경우에만 제출해야 합니다.)return false;
d를 사용하면 스크립트가document.feedback_form.submit()를 사용하여 양식 제출을 트리거합니다.,feedback_form은 양식의 이름입니다. form🎜🎜 -
3. 마우스 클릭 이벤트를 제출 태그에 바인딩하여 우리가 정의한 JS 함수를 트리거합니다. 양식 제출 태그 속성에
을 추가하세요. 🎜a, 샘플 코드 조각onclick="함수 이름"< ;input type="submit" onclick="checkform()" 값 ="메시지 제출" class="sub" />🎜🎜🎜🎜🎜전체 코드: 🎜🎜연습, 연습, 연습 . 중요한 것은 세 번 외쳐라! ! ! 🎜🎜네, 네이티브 JS 검증을 위한 게시판이 있습니다. 다른 검증 방법이 있거나 궁금한 점이 있으면 언제든지 댓글 영역에 낙서해 주세요! ~🎜<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>留言板_科科分享</title> <!-- 2.新建css样式文件并根据效果图编写css代码 --> <link rel="stylesheet" href="feedback.css"> <!-- 3.js表单验证 --> <script type="text/javascript"> function checkform(){ var nickname = document.getElementsByTagName('input')[0].value; // 获取用户输入的姓名 var tel = document.getElementsByTagName('input')[1].value; // 获取用户输入的联系方式 var content = document.getElementsByTagName('textarea')[0].value; // 获取用户输入的留言内容 // 如果没有输入姓名 则提示 if(nickname == ''){ alert('请输入您的姓名'); document.getElementsByTagName('input')[0].focus(); // 将光标定位到姓名输入框 return false; // 阻止冒泡 输入姓名后才能通过 } // 如果没有输入联系方式 则提示 if(tel == ''){ alert('请输入您的联系方式'); document.getElementsByTagName('input')[1].focus(); // 将光标定位到联系方式输入框 return false; // 阻止冒泡 输入联系方式才能通过 } // 如果没有输入留言内容 则提示 if(content == ''){ alert('请输入您的联系方式'); document.getElementsByTagName('textarea')[0].focus(); // 将光标定位到留言内容输入框 return false; // 阻止冒泡 输入留言内容才能通过 } document.feedback_form.submit(); // 提交用户数据到后端action中的地址 } </script> </head> <body> <!-- 工作区，呈现给用户看的 --> <!-- 1.开始搭建脚手架 --> <p class="container_box"> <p class="up"> <h3 class="title">留言板</h3> <h5 class="subtitle">FEEDBACK</h5> </p> <p class="down"> <form name="feedback_form" action="/#" method="post" onsubmit="return false;"> <p class="input"> <input type="text" class="fl" name="name" placeholder="输入您的姓名" /> <input type="text" class="fr" name="tel" placeholder="输入您的联系方式" /> </p> <textarea class="content" cols="30" rows="10" name="nr"></textarea> <input type="submit" onclick="checkform()" value="提交您的留言" class="sub" /> </form> </p> </p> </body> </html>로그인 후 복사
위 내용은 PHP7 게시판 개발을 위한 JS 검증의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7563
15
1385
52
84
11
61
19
28
99
php7.0에 mongo 확장을 설치하는 방법
Nov 21, 2022 am 10:25 AM
php7.0에서 mongo 확장을 설치하는 방법: 1. mongodb 사용자 그룹 및 사용자를 생성합니다. 2. mongodb 소스 코드 패키지를 다운로드하고 소스 코드 패키지를 "/usr/local/src/" 디렉터리에 넣습니다. "src/" 디렉터리를 입력합니다. 4. 소스 코드 패키지의 압축을 풉니다. 5. mongodb 파일 디렉터리를 생성합니다. 6. "mongodb/" 디렉터리에 파일을 복사합니다. 7. mongodb 구성 파일을 생성하고 구성을 수정합니다.
php7에서 tcp 포트가 작동하지 않는 것을 감지했을 때 문제를 해결하는 방법
Mar 22, 2023 am 09:30 AM
php5에서는 fsockopen() 함수를 사용하여 TCP 포트를 감지할 수 있습니다. 이 기능은 네트워크 연결을 열고 일부 네트워크 통신을 수행하는 데 사용할 수 있습니다. 그러나 php7에서는 fsockopen() 함수에 포트를 열 수 없거나 서버에 연결할 수 없는 등의 몇 가지 문제가 발생할 수 있습니다. 이 문제를 해결하기 위해, 우리는 소켓_create() 함수와 소켓_연결() 함수를 사용하여 TCP 포트를 감지할 수 있습니다.
php7.0에 플러그인이 설치되어 있는데 여전히 설치되지 않은 것으로 표시되면 어떻게 해야 합니까?
Apr 02, 2024 pm 07:39 PM
PHP 7.0에서 설치된 플러그인이 표시되지 않는 문제를 해결하려면: 플러그인 구성을 확인하고 플러그인을 활성화하세요. 구성 변경 사항을 적용하려면 PHP를 다시 시작하세요. 플러그인 파일 권한이 올바른지 확인하세요. 플러그인이 올바르게 작동하도록 하려면 누락된 종속성을 설치하세요. 다른 모든 단계가 실패하면 PHP를 다시 빌드하세요. 다른 가능한 원인으로는 호환되지 않는 플러그인 버전, 잘못된 버전 로드 또는 PHP 구성 문제 등이 있습니다.
PHP 서버 환경 FAQ 가이드: 일반적인 문제를 신속하게 해결
Apr 09, 2024 pm 01:33 PM
PHP 서버 환경에 대한 일반적인 솔루션에는 올바른 PHP 버전이 설치되어 있는지, 관련 파일이 모듈 디렉터리에 복사되었는지 확인하는 것이 포함됩니다. SELinux를 일시적으로 또는 영구적으로 비활성화합니다. 필요한 확장이 추가되고 올바르게 설정되었는지 확인하려면 PHP.ini를 확인하고 구성하십시오. PHP-FPM 서비스를 시작하거나 다시 시작합니다. 해결 문제에 대해서는 DNS 설정을 확인하세요.
php7.0을 설치하고 배포하는 방법
Nov 30, 2022 am 09:56 AM
php7.0 설치 및 배포 방법: 1. PHP 공식 웹사이트로 이동하여 로컬 시스템에 해당하는 설치 버전을 다운로드합니다. 2. 다운로드한 zip 파일을 지정된 디렉터리에 추출합니다. 3. 명령줄 창을 열고 다음으로 이동합니다. "E:\php7" 디렉토리 "php -v" 명령을 실행하세요.
시스템 재시작 후 UnixSocket의 권한을 자동으로 설정하는 방법은 무엇입니까?
Mar 31, 2025 pm 11:54 PM
시스템이 다시 시작된 후 UnixSocket의 권한을 자동으로 설정하는 방법. 시스템이 다시 시작될 때마다 UnixSocket의 권한을 수정하려면 다음 명령을 실행해야합니다.
Docker 환경에서 PECL을 사용하여 확장자를 설치할 때 오류가 발생하는 이유는 무엇입니까? 그것을 해결하는 방법?
Apr 01, 2025 pm 03:06 PM
Docker 환경을 사용할 때 Docker 환경에 Extensions를 설치하기 위해 PECL을 사용하여 오류의 원인 및 솔루션. 종종 일부 두통이 발생합니다 ...
php8과 php7 중 어느 것이 더 낫나요?
Nov 16, 2023 pm 03:09 PM
PHP7과 비교하여 PHP8은 성능, 새로운 기능 및 구문 개선, 유형 시스템, 오류 처리 및 확장 측면에서 몇 가지 장점과 개선 사항을 가지고 있습니다. 그러나 사용할 버전을 선택하는 것은 특정 요구 사항과 프로젝트 상황에 따라 다릅니다. 자세한 소개: 1. 성능 향상, PHP8은 코드 실행 속도를 향상시킬 수 있는 JIT(Just-in-Time) 컴파일러를 도입합니다. 2. 새로운 기능 및 구문 개선, PHP8은 명명된 매개 변수 및 선택적 매개 변수 선언을 지원합니다. 함수 만들기 호출이 더 유연해졌습니다. 익명 클래스, 속성 유형 선언 등이 도입되었습니다.
