Maison > Article > développement back-end > Vérification JS pour le développement de forums de discussion PHP7

Vérification JS pour le développement de forums de discussion PHP7

coldplay.xixiavant: 2020-12-22 09:29:411660parcourir

Tutoriel PHP7La colonne présente la vérification JS utilisée dans le développement de forums de messages

Recommandé ( Gratuit) : Tutoriel PHP7

Les mots-clés JS de cette section sont : function, onsubmit, onclick, document.getElementsByTagName (ceux-ci sont utilisés dans le développement front-end sont couramment utilisés, ils doivent donc être maîtrisés)

Ajoutez des événements de formulaire de vérification JS basés sur la page de l'étape 1 pour améliorer l'expérience utilisateur et garantir que les données soumises par l'utilisateur sont reçues par le backend est programmé.

Ne vous précipitez pas pour taper le code lorsque vous obtenez les exigences. Confirmez d'abord les points de connaissances que vous devez utiliser, clarifiez vos idées et ayez probablement un plan en tête. Surtout à l'ère actuelle des nouvelles technologies. et de nouvelles astuces chaque jour. De plus, nous devons garder notre pensée claire à tout moment. Qu'il s'agisse de js natif, de jquery ou d'autres frameworks front-end, tout reste le même. Ce n'est qu'avec une base js solide que nous pouvons réussir dans le monde. .

Il existe de nombreuses façons d'implémenter la vérification JS native du formulaire de forum ci-dessous. L'une des méthodes les plus couramment utilisées est utilisée ici. Pouvez-vous trouver d'autres méthodes ? Vous pouvez la partager dans la zone de commentaires. , je veux juste partager ! ~

Méthode :

1. Déterminez la manière de déclencher l'événement de clic de souris, tel que onclick, onsubmit, xxx.click(function(){}), etc. de nombreuses méthodes de vérification sont nécessaires. Vous découvrirez petit à petit dans le futur que le monde magique de JS vous attend);

J'ai ajouté l'événement onclick au bouton de soumission du forum, afin de déclencher le checkform fonction pour activer la vérification du formulaire ; puis a donné la balise form L'attribut onsubmit="return false;" est ajouté pour empêcher l'événement de soumission par défaut de la table du formulaire (empêchant le bouillonnement de l'événement, regardez le code spécifiquement et essayez-le en pratique~a. Exemples d'extraits de code
2. Définissez les fonctions JS
a. éléments avec
functionc. Empêcher les bulles (empêcher la soumission du formulaire, soumettre uniquement si la vérification est réussie) Utilisez
document.getElementsByTagName('input')d Utilisez
pour que le script déclenche la soumission du formulaire. nom du formulaire. return false;
document.feedback_form.submit();feedback_form 3. Lier dans la balise submit L'événement de clic de souris déclenche la fonction JS que nous avons définie, comme l'ajout de
a au formulaire. attribut de balise de soumission du formulaire, exemple d'extrait de code
onclick="函数名"

<input type="submit" onclick="checkform()" value="提交您的留言" class="sub" />
code complet :

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

Entraînez-vous, entraînez-vous, entraînez-vous. Criez trois fois les choses importantes ! ! !

D'accord, notre forum de discussion pour la vérification JS native est ici. Si vous avez d'autres méthodes de vérification ou si vous avez des questions, n'hésitez pas à gribouiller dans la zone de commentaires ! ~

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

jquery 前端框架表单验证 class JS function 事件 input 表单事件

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Recherche de liste de développement de forums de messages PHP7Article suivant：Recherche de liste de développement de forums de messages PHP7

Articles Liés

Voir plus

Vérification JS pour le développement de forums de discussion PHP7

1. Déterminez la manière de déclencher l'événement de clic de souris, tel que `onclick`, `onsubmit`, `xxx.click(function(){})`, etc. de nombreuses méthodes de vérification sont nécessaires. Vous découvrirez petit à petit dans le futur que le monde magique de JS vous attend);

`onclick="函数名"`

D'accord, notre forum de discussion pour la vérification JS native est ici. Si vous avez d'autres méthodes de vérification ou si vous avez des questions, n'hésitez pas à gribouiller dans la zone de commentaires ! ~

Articles Liés

Vérification JS pour le développement de forums de discussion PHP7

1. Déterminez la manière de déclencher l'événement de clic de souris, tel que onclick, onsubmit, xxx.click(function(){}), etc. de nombreuses méthodes de vérification sont nécessaires. Vous découvrirez petit à petit dans le futur que le monde magique de JS vous attend);

onclick="函数名"

D'accord, notre forum de discussion pour la vérification JS native est ici. Si vous avez d'autres méthodes de vérification ou si vous avez des questions, n'hésitez pas à gribouiller dans la zone de commentaires ! ~

Articles Liés

1. Déterminez la manière de déclencher l'événement de clic de souris, tel que `onclick`, `onsubmit`, `xxx.click(function(){})`, etc. de nombreuses méthodes de vérification sont nécessaires. Vous découvrirez petit à petit dans le futur que le monde magique de JS vous attend);

`onclick="函数名"`