使用Ajax和正则表达式进行表单验证

Question

现在我正在使用ajax，在按键时从输入框获取值，并将其与mysql中的数据匹配，如果数据唯一，则会使边框变绿色并打勾，否则为红色边框和叉号。现在我想添加正则表达式来验证输入并对其进行限制。

function username_check() {
        var username = $('#warden_id').val();
        if (username == "" || username.length < 4) {
            $('#warden_id').css('border', '1px #CCC solid');
            $('#tick').hide();
        } else {

            jQuery.ajax({
                type: "POST",
                url: "check.php",
                data: 'username=' + username,
                cache: false,
                success: function (response) {
                    if (response == 1) {
                        $('#warden_id').css('border', '1px #C33 solid');
                        $('#tick').hide();
                        $('#cross').fadeIn();
                    } else {
                        $('#warden_id').css('border', '1px #090 solid');
                        $('#cross').hide();
                        $('#tick').fadeIn();
                    }

                }
            });
        }

我想使用的正则表达式来验证数据

/^[a-zA-Z\s]+$/

- Muhammad Mannan Masood

---

这可能会有所帮助：https://dev59.com/R2Ei5IYBdhLWcg3wCoQp - Hameed

Answer 1

仅供参考，您不应该在客户端验证用户代码。始终将来自客户端的输入视为恶意

我更改了正则表达式，以便包括用户名的最小长度（username.length < 4）

 function username_check() {
    var username = $('#warden_id').val();

    // if / else has been turned
    if (username.match(/^[a-zA-Z\s]{4,}$/)) {
        ...
    } else {
        $('#warden_id').css('border', '1px #CCC solid');
        $('#tick').hide();
    }
     ...

...

- winner_joiner

---

谢谢你的建议，但不知何故我需要实现我所说的。这就是我需要使用正则表达式匹配输入的地方。if（response == 1）{                     $（'#warden_id'）。css（'border'，'1px #C33 solid'）;                     $（'#tick'）。hide（）;                     $（'#cross'）。fadeIn（）;                 } else {                     $（'#warden_id'）。css（'border'，'1px #090 solid'）;                     $（'#cross'）。hide（）;                     $（'#tick'）。fadeIn（）;                 } - Muhammad Mannan Masood

如何在 if(response ==1) 语句中添加与条件的正则表达式匹配条件？ - Muhammad Mannan Masood

这取决于服务器的响应是什么。数据从服务器来干什么？你写道“你想验证输入”，但在成功函数中，响应是来自服务器的输出。 - winner_joiner

@MannanMasood 也许你可以编辑/更新你的问题，提供验证的位置信息，以及一些输入输出的示例。 - winner_joiner

@MannanMasood，我的回答有帮到你吗？你还有什么问题吗？ - winner_joiner

抱歉回复晚了，是的，它确实帮了我很多。非常感谢你。 - Muhammad Mannan Masood