JS verification for PHP7 message board development
PHP7 TutorialThe column introduces JS verification used in message board development
function, onsubmit, onclick , document.getElementsByTagName (These are commonly used in front-end development, so they must be mastered)
- 1. Determine how to trigger the mouse click event, such as
onclick
I added a submit button to the message board,onsubmit,xxx.click(function(){})and so on (many verification methods, you need to slowly discover in the future, the magical JS world is waiting for you);onclick
event, in order to trigger thecheckformfunction to activate form validation; then add theonsubmit="return false;"attribute to the form tag, in order to prevent the form table The default submission event (prevents event bubbling); look at the code specifically and try it in practice~a, sample code snippet - 2. Define JS function;a.The function name starts with
function
b. To select form elements, use
document.getElementsByTagName('input')c. To prevent bubbling (prevent form submission, it must be submitted only if the verification is successful), use
return false;
document.feedback_form.submit();,feedback_formis the name of the form form - 3. Bind the mouse click event to the submit tag to trigger the JS function we defined. For example, add
onclick="function name"
a to the form submit tag attribute. Sample code snippet< ;input type="submit" onclick="checkform()" value="Submit your message" class="sub" />
<!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>Practice, practice, practice. Shout important things three times! ! !
Okay, our message board for native JS verification ends here. If you have other verification methods or have any questions, please feel free to doodle in the comment area! ~
The above is the detailed content of JS verification for PHP7 message board development. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
What should I do if the plug-in is installed in php7.0 but it still shows that it is not installed?
Apr 02, 2024 pm 07:39 PM
To resolve the plugin not showing installed issue in PHP 7.0: Check the plugin configuration and enable the plugin. Restart PHP to apply configuration changes. Check the plugin file permissions to make sure they are correct. Install missing dependencies to ensure the plugin functions properly. If all other steps fail, rebuild PHP. Other possible causes include incompatible plugin versions, loading the wrong version, or PHP configuration issues.
How to install mongo extension in php7.0
Nov 21, 2022 am 10:25 AM
How to install the mongo extension in php7.0: 1. Create the mongodb user group and user; 2. Download the mongodb source code package and place the source code package in the "/usr/local/src/" directory; 3. Enter "src/" directory; 4. Unzip the source code package; 5. Create the mongodb file directory; 6. Copy the files to the "mongodb/" directory; 7. Create the mongodb configuration file and modify the configuration.
How to solve the problem when php7 detects that the tcp port is not working
Mar 22, 2023 am 09:30 AM
In php5, we can use the fsockopen() function to detect the TCP port. This function can be used to open a network connection and perform some network communication. But in php7, the fsockopen() function may encounter some problems, such as being unable to open the port, unable to connect to the server, etc. In order to solve this problem, we can use the socket_create() function and socket_connect() function to detect the TCP port.
PHP Server Environment FAQ Guide: Quickly Solve Common Problems
Apr 09, 2024 pm 01:33 PM
Common solutions for PHP server environments include ensuring that the correct PHP version is installed and that relevant files have been copied to the module directory. Disable SELinux temporarily or permanently. Check and configure PHP.ini to ensure that necessary extensions have been added and set up correctly. Start or restart the PHP-FPM service. Check the DNS settings for resolution issues.
How to install and deploy php7.0
Nov 30, 2022 am 09:56 AM
How to install and deploy php7.0: 1. Go to the PHP official website to download the installation version corresponding to the local system; 2. Extract the downloaded zip file to the specified directory; 3. Open the command line window and go to the "E:\php7" directory Just run the "php -v" command.
How to automatically set permissions of unixsocket after system restart?
Mar 31, 2025 pm 11:54 PM
How to automatically set the permissions of unixsocket after the system restarts. Every time the system restarts, we need to execute the following command to modify the permissions of unixsocket: sudo...
Why does an error occur when installing an extension using PECL in a Docker environment? How to solve it?
Apr 01, 2025 pm 03:06 PM
Causes and solutions for errors when using PECL to install extensions in Docker environment When using Docker environment, we often encounter some headaches...
Record once and use strace to diagnose the problem of PHP occupying too much system resources.
May 03, 2024 pm 04:31 PM
Local environment: redhat6.7 system. nginx1.12.1, php7.1.0, the code uses the yii2 framework problem: the local web site needs to use the elasticsearch service. When PHP uses elasticsearch built on a local server, the local load is normal. When I use AWS's elasticsearch service, the load on the local server is often too high. Check the nginx and php logs and find no exceptions. The number of concurrent connections in the system is also not high. At this time, I thought of a strace diagnostic tool that our boss told me. Debugging process: Find a php sub-process idstrace-
