时间戳

首页 > 解决方案 > 提交表单时如何验证输入的用户名和密码在ajax中是否为空

javascript - 提交表单时如何验证输入的用户名和密码在ajax中是否为空

问题描述

这是Javascript。如何验证输入框是否为空，如果错误则控制台。没有 PHP Query 可以单独使用 Javascript 来验证它吗？

$('#manage-user').submit(function (e) {
    e.preventDefault();
    start_load()
    $.ajax({
        url: 'ajax?action=save_user',
        method: 'POST',
        data: $(this).serialize(),
        success: function (resp) {
            if (resp == 1) {
                alert_toast("Data successfully saved", 'success')
                setTimeout(function () {
                    location.reload()
                }, 100)
            }
        }
    })
})

这是表格：

<form action="" id="manage-user">
    <input type="hidden" name="id" value="<?php echo isset($meta['id']) ? $meta['id']: '' ?>">
    <div class="form-group">
        <label for="name">Name</label>
            <input type="text" name="name" id="name" class="form-control" value="<?php echo isset($meta['name']) ? $meta['name']: '' ?>">
    </div>
    <div class="form-group">
        <label for="username">Username</label>
        <input type="text" name="username" id="username" class="form-control" value="<?php echo isset($meta['username']) ? $meta['username']: '' ?>">
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input type="text" name="password" id="password" class="form-control" value="<?php echo isset($meta['password']) ? $meta['password']: '' ?>">
    </div>
    <div class="form-group">
        <label for="type">User Type</label>
        <select name="type" id="type" class="custom-select">
            <option value="1" <?php echo isset($meta['type']) && $meta['type'] == 1 ? 'selected': '' ?>>Admin</option>
            <option value="2" <?php echo isset($meta['type']) && $meta['type'] == 2 ? 'selected': '' ?>>Cashier</option>
        </select>
    </div>
</form>

标签： javascriptphpajax

解决方案

首先，用户输入不可信。因此，我不建议您单独进行客户端验证。

现在要在客户端进行验证，只需从输入框中获取当前值并检查该值是否为空。

const name=document.getElementById("name");
const username=document.getElementById("username");
const password=document.getElementById("password");
if(name!=""&&username!=""&&password!="")
{
alert("Perfect");
}
else
{
alert("All Fields are required");
}

您可以使用代码检查输入并根据结果发送 ajax 请求

推荐阅读