javascript - 使用 Bootstrap 工具提示和 jQuery 进行验证？

Question

我有一个表单，用户可以在其中输入所有必需的数据。

当用户输入无效数据(例如在他/她的姓名字段中输入数字)时，应在该字段上生成一个工具提示。

如何实现这个功能？我的表格看起来像这样。

1. 名字
2. 姓氏
3. 电话号码
4. 电邮
5. 部门 6) 出生日期等

Answer 1

我假设您的名字输入 ID 是“first_name”并且您想要进行长度验证。 您应该使用验证示例制作一个 javascript 函数:

function valid_first_name() {
    if (($("#first_name").val().length > 3) && ($("#first_name").val().length < 20)) {
        return true;
    }
    else {
        return false;
    }
}
$(document).ready(function() {
    $('#first_name').on('blur', function() {
        if (!valid_first_name()) {
            $("#first_name_error").text("invalid name").css('color', '#FF0000').show();
        }
    });
});

和你的 html :

<div id="first_name_error" style="display:none"></div>
<input type="text" id="first_name">

这只是一个对 blur 进行长度验证的基本示例。