JS verification for PHP7 message board development-PHP7-php.cn

JS verification for PHP7 message board development

coldplay.xixi

Release： 2023-02-17 18:24:01

forward

1733 people have browsed it

PHP7 TutorialThe column introduces JS verification used in message board development

JS verification for PHP7 message board development

##Recommended ( Free):

PHP7 tutorial

The JS keywords in this section are:

function, onsubmit, onclick , document.getElementsByTagName (These are commonly used in front-end development, so they must be mastered)

Add JS verification form events based on the page in step 1 to improve user experience. Also ensure that the user-submitted data received by the backend is intended.

Don’t rush to type the code when you get the requirements. First, confirm the knowledge points you need to use, clarify your ideas, and probably have a plan in mind. Especially in the current era of new technologies and new tricks every day, we What’s more, we should keep our thinking clear at all times. Whether it’s native js, jquery or other front-end frameworks, everything remains the same. Only with a solid js foundation can we succeed in the world.

There are many ways to implement native JS verification of the message board form below. One of the commonly used ones is used here. Can you find other methods? You can share it in the comment area. Good stuff. , just want to share! ~

Method:

1. Determine how to trigger the mouse click event, such as
onclick, 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);
I added a submit button to the message board
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
2. Define JS function;
a.The function name starts with
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
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" />

##Full code :

<!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>

Copy after login

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!