Question

在我正在开发的应用程序中，我在该面板中有一个管理面板，可以创建，编辑和删除用户。

在表单中，我使用while循环创建3个用户类型，该循环从数据库中拖动数据，并且3个用户类型是：

管理
管理器
用户

HTML表单：

<?php
/**
 * Created by PhpStorm.
 * User: SiNUX
 * Date: 4/6/2017
 * Time: 3:41 PM
 */

session_start();
include_once("../iConnect/handShake.php");

$getUserRole = "SELECT * FROM userroles ORDER BY urId ASC";
$getUserRoleQuery = $dbConnect -> query($getUserRole);
?>

<html>
<head>
    <title>Timer User Creation</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Style Sheets -->
    <link rel="stylesheet" type="text/css" href="../../CSS/main.css">

    <!-- Java Scripts -->
    <script language="JavaScript" type="text/javascript" src="../../jScripts/jquery-3.2.0.min.js"></script>
    <script language="javascript" type="text/javascript" src="../../jScripts/svrTimeDate.js"></script>
    <script language="JavaScript" type="text/javascript" src="../../jScripts/reload.js"></script>
    <script language="JavaScript" type="text/javascript" src="../../jScripts/setMsg.js"></script>
    <script language="JavaScript" type="text/javascript" src="../../jScripts/userCreatFunctions.js"></script>
    <script language="JavaScript" type="text/javascript" src="../../jScripts/multiScript.js"></script>
    <script language="JavaScript" type="text/javascript" src="../../jScripts/getIds.js"></script>

</head>
<body onload="pauseLoad4()">
    <div id="divCenter" class="box">
        <label id="userName">Hello <?php echo $_SESSION["fName"]." ".$_SESSION["lName"]; ?></label><br><br>
        <label id="uId" hidden>1</label>
        <div style="width: 166px; position: absolute; left: 642px; top: 20px; height: 44px;">
            <img src="../../images/logo.png" width="142" height="33">
        </div>
        <label for="date">Date:</label>
        <label id="date" style="margin-left: 50px;"></label><br><br>
        <label for="fName">First Name:</label>
        <input type="text" id="fName" name="fName" style="margin-left: 10px;" onkeyup="checkEmpty();">
        <label for="lName" style="margin-left: 8px;">Last Name:</label>
        <input type="text" id="lName" name="lName" style="margin-left: 10px;" onkeyup="checkEmpty();" disabled>
        <label for="uName" style="margin-left: 8px;">User Name:</label>
        <input type="text" id="uName" name="uName" style="margin-left: 7px;" onkeyup="checkEmpty();" disabled><br><br>
        <label for="pWord1" style="margin-left: 8px;" >Password:</label>
        <input type="password" id="pWord1" name="pWord1" style="margin-left: 17px;" onkeyup="checkLength();" disabled>
        <label for="pWord2" style="margin-left: 8px;">Confirm Password:</label>
        <input type="password" id="pWord2" name="pWord2" style="margin-left: 8px;" onkeyup="checkPass();" disabled>
        <label for="uTeam" style="margin-left: 8px;">Team</label>
        <select name="uTeam" id="uTeam" style="width: 170px;" onchange="teamId(this.id);enableRoles();" disabled>
            <option></option>
        </select>
        <input type="text" name="uTeamId" id="uTeamId" hidden><br><br>
        <div id="userRoles">
            <label for="userRoles">User Role:</label><label for="uAttrib" style="margin-left: 250px;">User Attributes:</label><br>
            <?php while ($row = $getUserRoleQuery -> fetch(PDO::FETCH_ASSOC)) { ?>
                <input type="radio" class="userRoles" name="userRoles" value="<?php echo $row["urId"]; ?>"
                <?php if ($_SESSION["uRole"] != "1" && $row["userRole"] == "Admin" ){?> disabled <?php } ?>><?php echo $row["userRole"]; }?>
                <input type="checkbox" id="tl" name="tl" value="yes" style="margin-left: 120px;" disabled>Team Leader
        </div>
        <label id="msgID" hidden></label>
        <div id="msg"></div>
        <div id="sbmBtns">
            <input type="button" value="Reset" name="reset" id="reset" class="btn" onclick="resetForm()">
            <input type="button" value="Submit" name="submit" id="submit" class="btn" onclick="pauseLoad3();" disabled>
        </div>
    </div>
</body>
</html>

我使用JavaScript来验证表单，并在满足验证条件时启用下一个文本框。

JavaScript的：

function checkEmpty() {
    var msg = document.getElementById('msg'),
        fName = document.getElementById('fName'),
        lName = document.getElementById('lName'),
        uName = document.getElementById('uName'),
        pass1 = document.getElementById("pWord1");

    //Using ajax made the function to check if the text box value is empty or not
    //when that text box has focus.
    if ($("#fName").is(':focus')){
        if (fName.value.length <= 3){
            msg.innerHTML = "First name is too short";
        }else{
            msg.innerHTML = "";
            lName.disabled = false;
        }
    }

    if ($("#lName").is(':focus')){
        if (lName.value === fName.value){
            msg.innerHTML = "Last and first name can't be the same";
            pass1.disabled = true;
        }else{
            if (lName.value.length <= 3){
                msg.innerHTML = "Last name is too short";
            }else{
                msg.innerHTML = "";
                uName.disabled = false;
            }
        }
    }

    if ($("#uName").is(':focus')){
            if (uName.value.length <= 3){
                msg.innerHTML = "User name is too short";
                pass1.disabled = true;
            }else{
                if(uName.value.length > 0){
                    checkUname();
                }
            }
    }

    function checkUname() {

        if(window.XMLHttpRequest)
        {
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange=function(){

            if(xmlhttp.readyState==4 && xmlhttp.status==200){
                if (xmlhttp.responseText === "1"){
                    msg.innerHTML="Username taken";
                    pass1.disabled = true;
                }else{
                    msg.innerHTML = "";
                    pass1.disabled = false;
                }
            }
        };
        xmlhttp.open("POST","../Functions/matchUname.php?uName="+uName.value,true);
        xmlhttp.send();
    }
}

function checkLength() {
    var pass1 = document.getElementById("pWord1"),
        pass2 = document.getElementById("pWord2"),
        passLength1 = pass1.value.length;

    if(passLength1 <= 4){
        document.getElementById("msg").innerHTML ="Password is less than 4 characters!";
    }else{
        document.getElementById("msg").innerHTML ="";
        pass2.disabled = false;
    }
}

function checkPass() {
    var pass1 = document.getElementById("pWord1"),
        pass2 = document.getElementById("pWord2"),
        uTeam = document.getElementById("uTeam"),
        matchColor = "#66cc66",
        noMatchColor = "#ff6666";

    if (pass1.value === pass2.value){
        document.getElementById("msg").innerHTML ="Passwords match!";
        pass1.style.backgroundColor = matchColor;
        pass2.style.backgroundColor = matchColor;
        uTeam.disabled = false;
    }else{
        document.getElementById("msg").innerHTML ="Passwords do not match!";
        pass1.style.backgroundColor = noMatchColor;
        pass2.style.backgroundColor = noMatchColor;
    }
}

function enableRoles() {
    var team = document.getElementById("uTeam").value,
        teamId = document.getElementById("uTeamId").value,
        tlCheck = document.getElementById("tl"),
        role = document.getElementsByClassName("userRoles");

    if (team !== ""){
        //For loop to enable radio buttons
        for (var i = 1; i < role.length; i++){
            role[i].disabled = false;

                //This part will take the team is from uTeamId text box
                //send it to getTeam.php checks if that team has a leader if that team has a leader
                //"set" value will be returned making the check box for team attribute team leader disabled.
                if(window.XMLHttpRequest){

                    xmlhttp=new XMLHttpRequest();

                }else{

                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }

                xmlhttp.onreadystatechange=function(){

                    if(xmlhttp.readyState==4 && xmlhttp.status==200){

                        // document.getElementById("msgID").innerHTML = xmlhttp.responseText;
                        tlCheck.disabled = xmlhttp.responseText === "set";

                    }
                };
                xmlhttp.open("POST","../Functions/getTeam.php?teamId="+teamId,true);
                xmlhttp.send();
            }

        }
}

$(document).ready(function () {
    /*Register the change element to #roles
     || When clicked...*/

    //This code base was originally developed by zer00ne I'm using it under his permission
    //Thanks man

    var form = document.getElementById('userRoles');

    if (form){
        form.addEventListener('change', function(e) {

                /* Determine if the e.target (radio that's clicked)
                 || is NOT e.currentTarget (#roles)
                 */
                if (e.target !== e.currentTarget) {

                    // Assign variable to e.target
                    var target = e.target;

                    // Reference the submit button
                    var btn = document.querySelector('[name=submit]');

                    // Enable submit button
                    btn.disabled = false;

                    // call rolrDist() passing the target,value
                    roleDist(target.value);
                }
        }, false);
    }

    function roleDist(rank) {
        var display = document.getElementById("msg");

        if (rank !== null) {
            display.innerHTML = "All done! You can save";
        } else {
            display.innerHTML = "Please Select User Type";
        }
    }
});

它正在处理任何错误，但如果登录用户不是管理员，我想禁用管理员用户类型。我可以通过使用纯PHP来完成这项工作，但它会破坏表单的流程。

在我的HTML / PHP表单中，我使用PHP来存档我正在描述的内容，但它并不是真正想做的事情，我想使用JavaScript或jQuery或AJAX来存档它。

我使用的PHP：

 <div id="userRoles">
            <label for="userRoles">User Role:</label><label for="uAttrib" style="margin-left: 250px;">User Attributes:</label><br>
            <?php while ($row = $getUserRoleQuery -> fetch(PDO::FETCH_ASSOC)) { ?>
                <input type="radio" class="userRoles" name="userRoles" value="<?php echo $row["urId"]; ?>"
                <?php if ($_SESSION["uRole"] != "1" && $row["userRole"] == "Admin" ){?> disabled <?php } ?>><?php echo $row["userRole"]; }?>
                <input type="checkbox" id="tl" name="tl" value="yes" style="margin-left: 120px;" disabled>Team Leader
        </div>

有些人可以指引我走正确的道路或向我展示如何做到这一点。

更新在与专业人士交谈后，我了解到我想要做的就是用自己的枪射击自己的脚。使用客户端语言来处理安全选项并且我们无法信任用户是一个坏主意。我的主要问题是表格的流动，但安全性胜过美，所以这将被分成另一个普通用户甚至想看到管理选项。

我想在这里留下这个问题，不介意它是否被关闭，以便其他人可以从我的错误中学到一些东西。

Answer 1

只是为了解决这个问题......

在一个不错的chat discussion之后，Jack（OP）似乎已经理解了不管理客户端用户级安全性的重要性。

问题不再需要更多回答 ;）

仅为管理员用户启用单选按钮

1 个答案: