Question

我是HTML / CSS / JS的新手。

我有一个带有两个输入字段的HTML表单：电子邮件和收藏的网站。我的JS文件中有两个正则表达式来检查输入。这工作正常，但我想在用户点击开箱即{（1}}事件）时触发错误消息。

我的问题是我想对错误应用过渡效果，因此它随着时间的推移变得可见，而不是突然出现。此外，此时，错误消息仅弹出一次。

所以我的问题是：

如何对错误消息应用转换效果;
如何让用户无法输入正确的输入次数。

这是我的HTML文件：

onblur

CSS文件：

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="CSS2_2.css">
</head>
<body>

    <div id="webpagevalidationerror" class="error">
        <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
        <p>Wrong website !</p>
    </div>


    <div id="emailvalidationerror" class="error">
        <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
        <p>Wrong e-mail !</p>
    </div>

    <form name="myform" class = "relative">
        <fieldset>
            <legend>Personal information:</legend>

            E-mail :<br>
            <input id="email" type="text" name="email" onblur="validateEmail(this)"><br>

            Favorite website :<br>
            <input id="webpage" type="text" name="webpage" onblur="validateWebpage(this)"><br><br>

            <input id="submit" type="submit" value="Submit">

        </fieldset>
    </form>

    <script src="JS_2.js"></script>

</body>

和Javascript文件：

fieldset { 
    display: inline;
}

form.relative {
    position: relative;
    left: 150px;
    top: 150px;
}

p {
    position: relative;
    left: 30px;
    top: 16px;
    width: 150px;
}

div {
    position: relative;
    left: 120px;
    top: 130px;
    width: 250px;
    height: 50px;
    background-color: #f44336;
    color: white;
    display: none;
    /*transition: 2s; How to apply this transition for the .triggered attributes ?
    transition-timing-function: linear;*/ 
}

.triggered {
    display: block;
}

.closebtn {
    margin-right: 25px;
    margin-top: 13px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    cursor: pointer;
    transition: 0.3s;
}

.closebtn:hover {
    color: black;
}

Answer 1

如果您只是想要顺利展示它，只需更改您的触发类这将在添加类时添加过渡效果以显示它。

https://jsfiddle.net/ycLn2fyb/25/

HTML和javascript

<div id="webpagevalidationerror" class="error">
        <span class="closebtn" >&times;</span>
        <p>Wrong website !</p>
</div>

<button onClick="myFunction()"> TEST BUTTON</button>

<script type="text/javascript">
var webpageerror = document.getElementById("webpagevalidationerror");


function myFunction()
{
    webpageerror.classList.toggle("show");
}
</script>

的CSS：

div {
  position: relative;
    left: 120px;
    top: 130px;
    width: 250px;
    height: 50px;
    background-color: #f44336;
    color: white;
  opacity: 0;
}

.show {
   opacity: 1;
   transition: opacity 2s ease-in;
   -moz-transition: opacity 2s ease-in;
   -webkit-transition: opacity 2s ease-in;
}


p {
    position: relative;
    left: 30px;
    top: 16px;
    width: 150px;
}

.closebtn {
    margin-right: 25px;
    margin-top: 13px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    cursor: pointer;
    transition: 0.3s;
}

.closebtn:hover {
    color: black;
}

Answer 2

您无法从display:none动画到display:block。诀窍是将比例和不透明度设置为0，然后使用缩放动画持续时间的延迟来触发不透明度动画。

此外，验证函数可能会返回一个布尔值，以便在您提交表单时检查一切是否正常（并且您不想切换triggered类，因为您希望消息仍然显示为只要输入错误。如果错误则添加类，如果输入错误则删除它。而不是在HTML元素上设置内联属性（onClick，onBlur，...），在js代码中设置eventlisteners（以避免混合使用js和html）

这是一个改编自现有代码的工作片段：

＆＃13;

var emailerror = document.getElementById("emailvalidationerror");
var webpageerror = document.getElementById("webpagevalidationerror");
var closeBtn = document.getElementsByClassName("closebtn");
// loop throught closeBtn nodelist to add listener for each buttons
for(var i = 0; i < closeBtn.length; i++)
{
  closeBtn[i].addEventListener("click",function(e){
   e.currentTarget.parentElement.classList.remove("triggered");
   });
}

document.getElementById("webpage").addEventListener("blur",validateWebpage);
document.getElementById("email").addEventListener("blur",validateEmail);
document.getElementById("submit").addEventListener("click",submitForm);

function validateEmail() {
    var valToTest = document.getElementById("email").value;

    var re = new RegExp("^[^@]+@yahoo.com$");
    var re2 = new RegExp("^[^@]+@gmail.com$");

    if (!(re.test(valToTest)) && !(re2.test(valToTest)) || valToTest == "") {
        emailerror.classList.add("triggered");
        return false;
    }
   emailerror.classList.remove("triggered");
    return true;
}

function validateWebpage() {
    var valToTest = document.getElementById("webpage").value;

    var re = new RegExp("^www\\.[a-zA-Z0-9_-]+\\.[a-z]+\\.[a-z]+$");

    if (!(re.test(valToTest)) || valToTest == "") {
        webpageerror.classList.add("triggered");
         return false;
    }
    webpageerror.classList.remove("triggered");
    return true;
}


function submitForm(e){
  e.preventDefault();  
  var emailOk = validateEmail();
  var webPageOk = validateWebpage();
  if(emailOk && webPageOk){
    document.getElementById("myform").submit();
  }
    
}

＆＃13;

fieldset { 
    display: inline;
}

form.relative {
    position: relative;
    left: 150px;
    top: 150px;
}

p {
    position: relative;
    left: 30px;
    top: 16px;
    width: 150px;
}

div {
    position: relative;
    left: 120px;
    top: 130px;
    width: 250px;
    height: 50px;
    background-color: #f44336;
    color: white;
   /* display: none;*/
    /*transition: 2s; How to apply this transition for the .triggered attributes ?
    transition-timing-function: linear;*/ 
    transform-origin:50% 50%;
    transform:scale(0);
    opacity:0;
    transition: transform .2s, opacity 2s .2s;
    
}

.triggered {
   /* display: block;*/
    transform:scale(1);
    opacity:1;  
}

.closebtn {
    margin-right: 25px;
    margin-top: 13px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    cursor: pointer;
    transition: 0.3s;
}

.closebtn:hover {
    color: black;
}

＆＃13;

<div id="webpagevalidationerror" class="error">
        <span class="closebtn">&times;</span>
        <p>Wrong website !</p>
    </div>


    <div id="emailvalidationerror" class="error">
        <span class="closebtn">&times;</span>
        <p>Wrong e-mail !</p>
    </div>

    <form id="myform" class = "relative">
        <fieldset>
            <legend>Personal information:</legend>

            E-mail :<br>
            <input id="email" type="text" name="email"><br>

            Favorite website :<br>
            <input id="webpage" type="text" name="webpage"><br><br>

            <input id="submit" type="submit" value="Submit">

        </fieldset>
    </form>

＆＃13;

如何对JS触发的事件应用CSS过渡效果？

2 个答案: