Home > Article > Backend Development > 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)
, 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 the checkform function to activate form validation; then add the onsubmit="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
functionb. 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; d, script triggers form submission using
document.feedback_form.submit();, feedback_form is the name of the form form
< ;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>
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!