Laravel - 请问如何让用户可以编辑表单字段,当它里面没有值时,但当它有值时是只读的

Laravel - Please how can I make a form field editable by a user when it has no value inside, but read-only when it has value on it

我正在使用 Laravel 进行的项目需要帮助。 我正在处理用户个人资料页面。

在页面上进行用户注册时,用户可以选择提供用户名或跳过它。 对于那件事我没有任何疑问。 但我想在用户个人资料页面上,如果用户想要编辑他们的详细信息。 我希望用户能够在字段的配置文件用户名中编辑和添加 his/her 用户名,前提是他们还没有用户名。 但是如果用户已经有了用户名,那么他们就不能 change/edit 他们的用户名。 如果他们已经有用户名,那么在用户个人资料页面上,他们的用户名字段应该是只读的,同时向他们显示他们的用户名,而不能从他们的末端再次 edit/change 用户名。 这是我的表单用户名字段代码示例。 非常感谢您的帮助。

提前致谢。

<div class="form-group">
<label for="username">@lang('Username')</label>
<input type="text"
       class="form-control input-solid"
       id="username"
       placeholder="(@lang('Enter username'))"
       name="username"
       value="{{ $edit ? $user->username : '' }}">

允许没有用户名的用户仅用于 UI:

document.getElementById("editUserName").addEventListener("click", enableUserNameEditing);

function enableUserNameEditing(){
  document.getElementById("username").disabled = false;
}
<div class="form-group">
<label for="username">username</label>
<input type="text"
       class="form-control input-solid"
       id="username"
       placeholder="user name"
       name="username"
       value="john doe"
       disabled
       >
<button id='editUserName'>edit</button>
</div>

如果用户已有用户名,则应在服务器端添加验证。不要更新。

在编辑按钮和可以添加检查的 JS 上

$show_edit = empty($user->username) ? true : false;

现在您可以使用此 $show_edit 变量来控制用户查看显示 username 字段的权限:

<input type="text"
   class="form-control input-solid"
   id="username"
   placeholder="(@lang('Enter username'))"
   name="username"
   value="{{ $edit ? $user->username : '' }}"
   {{ $show_edit === false ? "disabled" : "" }}>

@if($show_edit)
   <button id='editUserName'>edit</button>
@endif
   

尝试使用 Laravel blade if statement 指令有条件地呈现输入字段,如下所示:

<div class="form-group">
    <label for="username">@lang('Username')</label>
    @if($user->username ?? false)
    <input type="text"
           class="form-control input-solid"
           id="username"
           placeholder="(@lang('Enter username'))"
           name="noname"
           value="{{ $user->username }}" disabled>
    @else
    <input type="text"
           class="form-control input-solid"
           id="username"
           placeholder="(@lang('Enter username'))"
           name="username"
           value="{{ $edit ? $user->username : '' }}">
    @endif
</div>

我在这里使用 disabled 是因为除了使字段 read-only 外,它还会阻止提交该字段。如果您仍希望提交 read-only 字段,请使用 readonly="readonly"。另外,我更改了 read-only 字段的名称,这样即使它被客户端上的黑客编辑并提交,您的服务器 PHP 脚本也会简单地忽略它而不会出错(我假设您没有'想要它提交)。如果您还想提交,请保留正确的名称。

我还建议您在服务器端控制器上有条件地验证用户名字段以获得额外保护。例如

function update(Request $request, User $user) 
{
    if($user->username ?? false) {
        // ignore username field, validate other user input fields and update profile
    } else {
        // validate username field with other fields and update profile
    }
}

注意

任何具有 html 知识的人都可以在客户端浏览器上编辑您的 html 并提交。黑客很可能会在劫持另一个用户会话后尝试这样做。始终使用 Laravel csrf 保护来防止这种情况。