PHP開発登録ページの検証情報

まず登録ページを見てみましょう

上の図から、ユーザーがユーザー名、パスワード、確認コードを入力せずに登録した場合、これら 3 つの項目を入力する必要がないことがわかります。ユーザーのパスワードと確認パスワードが 2 回異なるように入力されていますが、これは私たちの検証範囲でもあります。

まず、<form> フォームに JS イベントを追加する必要があります。このようにして、ユーザーがフォームを送信すると、JS イベントがトリガーされます

<form action="" method="post"  name="myform" onsubmit=" return checkinput();" >

ユーザーが間違った情報を入力すると、JS イベントがトリガーされ、関連するプロンプト情報が表示されます。

検証完了コードは次のとおりです

<script type="text/javascript">
    function checkinput()
    {
        if(myform.name.value=="")
        {
            alert("请输入用户名");
            myform.name.focus();
            return false;
        }
        if (myform.pwd.value=="")
        {
            alert("请输入密码");
            myform.pwd.focus();
            return false;
        }
        if(myform.pwd.value != myform.pwdconfirm.value){
            alert("你输入的两次密码不一致，请重新输入！");
            myform.pwd.focus();
            return false;
        }
        if (myform.yzm.value=="")
        {
            alert("请输入验证码");
            myform.yzm.focus();
            return false;
        }
    }
</script>

学び続ける

新しいファイル

<!doctype html> <html> <head> <meta charset="utf-8"> <title>PHP中文网</title> <script type="text/javascript"> function checkinput() { if(myform.name.value=="") { alert("请输入用户名"); myform.name.focus(); return false; } if (myform.pwd.value=="") { alert("请输入密码"); myform.pwd.focus(); return false; } if(myform.pwd.value != myform.pwdconfirm.value){ alert("你输入的两次密码不一致，请重新输入！"); myform.pwd.focus(); return false; } if (myform.yzm.value=="") { alert("请输入验证码"); myform.yzm.focus(); return false; } } </script> </head> <body> <form action="" method="post" name="myform" onsubmit=" return checkinput();" > <div class="container"> <div class="right"> <h2>用户注册</h2> <p>用户名：<input type="text" name="name" id="name"></p> <p>密　　码: <input type="password" name="pwd" id="pwd"></p> <p>确认密码: <input type="password" name="pwdconfirm" id="pwdconfirm"></p> <p>验证码：<input type="text" name="yzm" id="yzm"> <img src="yanzhengma.php" onClick="this.src='yanzhengma.php?nocache='+Math.random()" style="cursor:hand"></p> <p><button type="submit" value="注册" >立即注册</button></p> </div> </div> </form> </body> </html>

提出するリセットコード

自動運転