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>

提出するリセットコード

自動運転

全画面表示