Laravel-请告诉我，当表单字段内部没有值时，我如何让它可由用户编辑，但当它有值时，它是只读的

Question

我需要一个关于我正在使用Laravel进行的项目的帮助。我正在处理用户配置文件页面。

在用户注册页面期间，用户可以选择提供用户名或跳过用户名。我对此没有意见。但如果用户想编辑他们的详细信息，我希望在用户配置文件页面上。我希望用户能够在配置文件用户名字段中编辑和添加他/她的用户名，如果他们还没有用户名的话。但是，如果用户已经有了用户名，那么他们就不能更改/编辑他们的用户名。如果他们已经有用户名，那么在用户配置文件页面上，他们的用户名字段应该是只读的，同时向他们显示他们的用户名，而不能从他们的端再次编辑/更改用户名。这是我的表单用户名字段代码示例。我们将非常感谢您的帮助。

提前谢谢。

<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 : '' }}">

Answer 1

尝试使用Laravel-blade if语句指令来有条件地呈现如下输入字段：

<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，因为除了将字段设为只读之外，它还防止提交字段。如果仍然希望提交只读字段，请使用readonly="readonly"。此外，我更改了只读字段的名称，这样即使它被客户端上的黑客编辑并提交，您的服务器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保护来防止这种情况发生。

Answer 2

用于允许没有用户名的用户仅用于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