Question

我想在ma文本输入无效时显示工具提示

这是我在js中的功能：

function check()
{
var ok=true;

regLast = /^[a-zA-Z]{2,20}$/;

if (!regLast.test(document.getElementById("lastName").value))
{
    ok=false;
}

return ok;
}

这里是html：

<div class="form-group">
  <label for ="lastName">Last name:</label>
  <input type = "text" class = "form-control" id = "lastName" placeholder = "Put your last name" name = "lastName" />
</div>

我知道如何在document.getElementById("wronglastnamediv").innerHTML = "Put valid last name"

的输入下放置div中的文本

但我不知道在这些文字区域无效时如何提供工具提示..

Answer 1

您可以像这样为输入字段添加工具提示。使用setAttribute('title', 'some tooltip')设置工具提示，使用removeAttribute('title')从输入字段中删除工具提示。

我在输入字段中添加了输入事件侦听器，每次键入字符时都会对输入值进行验证，并根据验证结果添加或删除工具提示。

如果您只键入一个字符并将鼠标悬停在输入字段上，则应该会看到工具提示。如果键入第二个字符，它将消失（请注意，您需要将鼠标光标移动到输入字段之外，然后返回实际看到工具提示）。

function check() {
  var ok = true;
  const regLast = /^[a-zA-Z]{2,20}$/;

  if (!regLast.test(document.getElementById("lastName").value)) {
    ok = false;
  }

  return ok;
}

const inp = document.querySelector('input');
inp.addEventListener('input', event => {
  if (!check(inp.value)) {
    inp.setAttribute('title', 'incorrect value');
  } else {
    inp.removeAttribute('title');
  }
});

<div class="form-group">
  <label for ="lastName">Last name:</label>
  <input type = "text" class = "form-control" id = "lastName" placeholder = "Put your last name" name = "lastName" />
</div>

如果您需要更复杂且更“可见”的内容，那么您可以将css与数据属性结合使用。逻辑与前面的代码相同。根据验证结果，您可以将数据属性添加到输入字段或将其删除。

function check() {
  var ok = true;
  const regLast = /^[a-zA-Z]{2,20}$/;

  if (!regLast.test(document.getElementById("lastName").value)) {
    ok = false;
  }

  return ok;
}

const inp = document.querySelector('input');
inp.addEventListener('input', event => {
  if (!check(inp.value)) {
    inp.parentElement.dataset.tip = 'incorrect input value';
  } else {
    delete inp.parentElement.dataset.tip;
  }
});

[data-tip] {
	position:relative;

}
[data-tip]:before {
	content:'';
	display:none;
	content:'';
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid #1a1a1a;
	position:absolute;
	top:30px;
	left:35px;
	z-index:8;
	font-size:0;
	line-height:0;
	width:0;
	height:0;
}
[data-tip]:after {
	display:none;
	content:attr(data-tip);
	position:absolute;
	top:35px;
	left:0px;
	padding:5px 8px;
	background:#1a1a1a;
	color:#fff;
	z-index:9;
	font-size: 0.75em;
	height:18px;
	line-height:18px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	white-space:nowrap;
	word-wrap:normal;
}
[data-tip]:hover:before,
[data-tip]:hover:after {
	display:block;
}

<div class="form-group" >
  <label for ="lastName">Last name:</label>
  <input type = "text" class = "form-control" id = "lastName" placeholder = "Put your last name" name = "lastName" />
</div>

要在表单提交而不是悬停时添加工具提示，您可以使用submit-event listener并执行与以前相同的代码，但您还需要添加event.preventDefault();以防止表单在验证时提交失败（你需要稍微改变一下css。）

现在单击“提交”按钮时，如果输入值不正确，您应该看到工具提示。

function check() {
  var ok = true;
  const regLast = /^[a-zA-Z]{2,20}$/;

  if (!regLast.test(document.getElementById("lastName").value)) {
    ok = false;
  }

  return ok;
}

const inp = document.querySelector('input');
const form = document.querySelector('form');

form.addEventListener('submit', event => {
  if (!check(inp.value)) {
    event.preventDefault();
    inp.parentElement.dataset.tip = 'incorrect input value';
  } else {
    delete inp.parentElement.dataset.tip;
  }
});

[data-tip] {
	position:relative;

}
[data-tip]:before {
	content:'';
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid #1a1a1a;
	position:absolute;
	top:30px;
	left:35px;
	z-index:8;
	font-size:0;
	line-height:0;
	width:0;
	height:0;
}
[data-tip]:after {
	content:attr(data-tip);
	position:absolute;
	top:35px;
	left:0px;
	padding:5px 8px;
	background:#1a1a1a;
	color:#fff;
	z-index:9;
	font-size: 0.75em;
	height:18px;
	line-height:18px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	white-space:nowrap;
	word-wrap:normal;
}
[data-tip]:hover:before,
[data-tip]:hover:after {
	display:block;
}

<form>
  <div class="form-group" >
    <label for ="lastName">Last name:</label>
    <input type = "text" class = "form-control" id = "lastName" placeholder = "Put your last name" name = "lastName" />
  </div>
  <input type="submit" value="submit" />
</form>

Answer 2

您只需使用HTML5 Form Validation（如果您不想要自定义工具提示）。

请参阅下面的代码段：

＆＃13;

<form>
    <p>
        <label for="firstName">First name: </label>
        <input type="text" id="firstName" placeholder="Put your first name" pattern="[a-zA-Z]{2,20}" required />
    </p>
    <p>
        <label for="lastName">Last name: </label>
        <input type="text" id="lastName" placeholder="Put your last name" pattern="[a-zA-Z]{2,20}" required />
    </p>
    <input type="submit" Value="Submit" />
</form>

＆＃13;

此时，您可以在发生setCustomValidity事件时使用oninvalid函数来更改必填字段的默认消息。

示例：

＆＃13;
＆＃13;
<form> <p> <label for="firstName">First name: </label> <input type="text" id="firstName" placeholder="Put your first name" pattern="[a-zA-Z]{2,20}" oninvalid="this.setCustomValidity('Please enter a valid Name')" required /> </p> <p> <label for="lastName">Last name: </label> <input type="text" id="lastName" placeholder="Put your last name" pattern="[a-zA-Z]{2,20}" required /> </p> <input type="submit" Value="Submit" /> </form>
＆＃13;
＆＃13;
＆＃13;

Answer 3

您应该相应地编辑以下代码，也可以链接jquery 1.7或以上 -

<script>
 $('#lastName').on('keyup', function () {

$('.text-error').remove();
var ok=true;
regLast = /^[a-zA-Z]{2,20}$/;
if (!regLast.test(document.getElementById("lastName").value))
{
    ok=false;
    $(this).parent('.form-group').append("<span class='text-error'>Please enter a valida string.</span>");
}
return ok;

});
</script>

//CSS add your own CSS for tooltip style etc
<style type="text/css">
.form-group{
position:relative;
}
.text-error{
position:absolute;
right:0;
top:0px;
background:red;
color:white;
border-radius:5px;
padding:5px 3px;
}
</style>

希望代码能为您服务。

Pure Javascript

            <!DOCTYPE html>
            <html>
            <head>
                <title></title>

            <style type="text/css">
            .form-control{
                position:relative;
                width: 100%;
                float: left;
            }
            .text-error{
                position:absolute;
                right:0;
                top:0px;
                background:red;
                color:white;
                border-radius:5px;
                padding:5px 3px;
                display: none;
            }
            .display_block{
                display: block;
            }
            </style>

            </head>
            <body>




            <div class="form-group">
              <label for ="lastName">Last name:</label>
              <input type = "text" class = "form-control" id = "lastName" onkeyup="check()" placeholder = "Put your last name" name = "lastName" />
              <span class="text-error" id="error_lastname"></span>
            </div>


            <script type="text/javascript">
            function check () {
                var div = document.getElementById("error_lastname");
                div.setAttribute('class', 'text-error'); 

                var ok=true;
                regLast = /^[a-zA-Z]{2,20}$/;
                if (!regLast.test(document.getElementById("lastName").value))
                {
                    ok=false;

                    div.setAttribute('class', 'text-error display_block'); 
                    div.innerHTML = "Please enter a valid string.";


                    console.log("XXXX");

                }
                return ok;

            }

            </script>

            </body>
            </html>

如何在无效时输入工具提示

3 个答案: