iT邦幫忙

0

web密碼確認無法執行

php jquery
吉娃娃 2018-07-19 20:49:43 ‧ 1603 瀏覽

  • 分享至 

  • xImage

剛接觸php的新手，想先是做一個會員註冊的頁面
在網路上邊找資料邊做，用ajax+php像資料庫確認帳號是否有重複和用jquery做密碼確認
檢查帳號是否重複的功能正常但是密碼確認一直沒效果想請問如何更改程式碼?

    <form  id="userinf" action="reg.php" method="post">
        <input type="text" id="email" name="email" value="" placeholder="email" onkeyup="checkRegAcc()">
        <span  id="msg_user_name" name="msg_user_name"></span></br>
        <input type="text" id="pwd" name="pwd" value="" placeholder="password">
        <span  id="msg_pwd" name="msg_pwd"></span></br>
        <input type="text" id="pwd2" name="pwd2" value="" placeholder="Password Confirmation
        " onblur="pwd()">
        <span  id="msg_pwd2" name="msg_pwd2"></span></br>
        </br>
        <input type="submit" name="registered" value="registered">
      </form>

$(document).ready(function(){
checkRegAcc = function (){
if ($('#email').val().length >=4) {
  $.ajax( {
    url: 'checkEmail.php',
    type: 'post',
    data: {
      email: $('#email').val()
    },
    error: function(xhr) {
      alert('Ajax request fails');
    },
    success: function(res) {
        $('#msg_user_name').html(res);
        $('#msg_user_name').fadeIn();
    }
  });
}else if($('#email').val()==""){
    $("#msg_user_name").html("Id cannot be blank！");
  }
};
pwd =function () {
    if($('#pwd').val()==$('#pwd2').val()){
      $('#msg_pwd2').html("");
    }
    else {
      $('#msg_pwd2').html("Password confirmation error");
      $('#msg_pwd2').fadeIn();
  }
}
});

$email=$_POST['email'];
/*$pwd=$_POST['pwd'];
$pwd2=$_POST['pwd2'];
*/

$sql="select * from user where email='$email'";
$res=$conn->query($sql);
$row=mysqli_num_rows($res);
//echo $row;
if($row!=0){
  echo "repeat";
}
else {
  echo "ok";
}
登入發表討論
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

3 個回答

1
跟著鄉民看熱鬧
iT邦高手 1 級 ‧ 2018-07-20 09:51:39

幫你重構了一下，建議html上不要使用onblur="pwd()"這種作法…
另外像$('#email') 這部份重覆寫會有效率及維護上的問題，盡量先宣告後再使用

form.php

<html>
<head>
    <title>member register</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!-- CSS -->
    <style type="text/css">
    </style>

    <!-- Javascript -->
    <script language="javascript">
        $(document).ready(function() {
            var mailObj = $('#email');
            var msgObj =  $('#msg_user_name');
            var pwdObj = $('#pwd');
            var pwd2Obj = $('#pwd2');
            var pwdMsgObj =  $('#msg_pwd');
            var pwd2MsgObj =  $('#msg_pwd2');

            mailObj.on( "keyup", function() {
                var mailVal = mailObj.val();
                if(!mailVal){
                    msgObj.html("Id cannot be blank！");
                    return;
                }
                if (mailVal.length >= 4) {
                    $.ajax( {
                        url: 'checkEmail.php',
                        type: 'post',
                        data: {
                            email: mailVal
                        },
                        error: function(xhr) {
                            alert('Ajax request fails');
                        },
                        success: function(res) {
                            msgObj.html(res);
                            msgObj.fadeIn();
                        }
                    });
                }
            });

            pwdObj.on( "blur", function() {
                if(pwdObj.val() == pwd2Obj.val()){
                    pwd2MsgObj.html("");
                } else {
                    pwd2MsgObj.html("Password confirmation error");
                    pwd2MsgObj.fadeIn();
                }
            });
        });
    </script>
</head>
<body>
<form  id="userinf" action="reg.php" method="post">
    <input type="text" id="email" name="email" value="" placeholder="email"/>
    <span  id="msg_user_name" name="msg_user_name"></span></br>
    <input type="text" id="pwd" name="pwd" value="" placeholder="password">
    <span  id="msg_pwd" name="msg_pwd"></span></br>
    <input type="text" id="pwd2" name="pwd2" value="" placeholder="Password Confirmation"/>
    <span  id="msg_pwd2" name="msg_pwd2"></span></br></br>
    <input type="submit" name="registered" value="registered">
</form>
</body>
</html>

reg.php

<?php
/**
 * Created by PhpStorm.
 * User: User
 * Date: 2018/7/20
 * Time: 上午 09:43
 */

$db_host = 'localhost';
$db_name = 'test';
$db_user = 'root';
$db_pwd = '';

$conn = new mysqli($db_host, $db_user, $db_pwd, $db_name);
if(mysqli_connect_error()){
    echo mysqli_connect_error();
}
$conn->set_charset("utf8");//或者 $conn->query("set names 'utf8'")
$conn->close();
$conn = mysqli_connect($db_host, $db_user, $db_pwd, $db_name);
if(!$conn){
    echo mysqli_connect_error();
}
mysqli_close($conn);

$email = $_POST['email'];
/*$pwd = $_POST['pwd'];
$pwd2 = $_POST['pwd2'];
*/

$sql = "select * from user where email='$email'";
$res = $conn->query($sql);
$row = mysqli_num_rows($res);
//echo $row;
if($row != 0){
    echo "repeat";
}else {
    echo "ok";
}
吉娃娃 iT邦新手 5 級 ‧ 2018-07-21 01:37:13 檢舉

不好意思 可以請問一下為甚麼不要在html上使用onblur="pwd()"這種作法?

還有如果我把function寫法改成
functionName.on( "keyup", function() {
//do somthing
})
這種寫就沒有效果只能用
functionName=function(){//do somthing}
搭配html上的onblur="functionName()"
請問一下是為甚麼?

跟著鄉民看熱鬧 iT邦高手 1 級 ‧ 2018-07-21 05:19:46 檢舉

因為on是jQuery的設計，是針對DOM的物件加上事件，使用functionName無法辨認是要針對哪個DOM的物件，所以沒有效果。

至於不要在html上使用onblur="pwd()"這種作法，因為那種寫法是早期js的用法，但在開發設計上，都會讓html, js, css盡可能分離，這樣如果調整其中一項，可以不用再調整其他兩項，讓維護及功能開發上，達到彈性最大，例如要將js進行加密，如果在html上寫了事件名，那就會變得無法加密事件名，而專案內容一直增加或調整，就會越體現這種效果，所以建議新手養成習慣，當作是一種coding standard

登入發表回應
0
柯柯
iT邦新手 2 級 ‧ 2018-07-20 10:08:01

這樣應該可以 你試試看

然後email的長度>4是為了甚麼 如果是要檢查格式
可以google 正規表示法 HTML5內建的 input type='email' 也可以

<form  id="userinf" action="reg.php" method="post">
	<input type="email" id="email" name="email" value="" placeholder="email">
	<span  id="msg_user_name" name="msg_user_name"></span></br>

	<input type="text" id="pwd" name="pwd" placeholder="password" value=""></br>
	<input type="text" id="pwd2" name="pwd2" value="" placeholder="Password Confirmation">
	<span  id="msg_pwd2" name="msg_pwd2"></span></br>

	</br>
	<input type="submit" name="registered" value="registered">
</form>

<script>
	$(document).ready(function(){
		$('#email').on('change',function(){
			if($('#email').val() =='') {
				$("#msg_user_name").html("Id cannot be blank！");
				return false;
			}
			$.ajax({
				url: 'checkEmail.php',
				type: 'post',
				data:{ email: $('#email').val() },
				dataType: 'json',
				success:function(data){
					$('#msg_user_name').html(data);
					$('#msg_user_name').fadeIn();
				}
			})
		});

		$('#pwd2').on('change',function(){
			if($('#pwd').val() != $('#pwd2').val()){
				$('#msg_pwd2').html("Password confirmation error");
				$('#msg_pwd2').fadeIn();
			}
		});
	}
</script>
登入發表回應
2
rewrite
iT邦新手 2 級 ‧ 2018-07-20 10:24:04

這是一個看似簡單卻又有點有趣的技術問題，一開始寫js & html語法都有可能會遇到的問題。

你這個寫法的問題在於「from name 與 function name 衝突」

你建構了一個全域的pwd()，而在後面的行為又在HTMLFormElement 上建構了以name為DOM的物件 （大致的意思是這樣），如果要詳細的了解這個狀況，可以查看看DOM的建構概念

不過這有點扯遠了，先讓功能動比較重要，你可以改寫from name的值或是function name，但是既然都用了jquery，那就照jquery的建構方式比較妥當，你在維護上也比較好。

已經有前輩把code打出來這裡就不獻醜了

登入發表回應

我要發表回答

立即登入回答
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22195 篇
完賽人數
600 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙