Home > Article > Backend Development > JS verification for PHP7 message board development
JS verification for PHP7 message board development
- coldplay.xixiforward
- 2020-12-22 09:29:411679browse
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!