iT邦幫忙

0

web密碼確認無法執行

剛接觸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";
}

1

幫你重構了一下,建議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";
}
j7550155 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()"
請問一下是為甚麼?

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

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

0
柯柯
iT邦新手 5 級 ‧ 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邦新手 5 級 ‧ 2018-07-20 10:24:04

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

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

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

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

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

我要發表回答

立即登入回答