简体   繁体   English

我的 js 验证无法正常工作(正则表达式)

[英]my js validation doesn't work as I would like (regex)

Hi everyone i have question about my code the plan was that the script was supposed to display message if someone did not enter anything in input or enter somethink thats did not match to my pattern (but if someone lift message will disappear [this doesnt work]) and i dont know where is problem and how to fix it大家好,我对我的代码有疑问,计划是如果有人没有在输入中输入任何内容或输入与我的模式不匹配的内容,脚本应该显示消息(但如果有人解除消息将消失 [这不起作用] ) 而且我不知道问题出在哪里以及如何解决

here is my code:这是我的代码:

html html

<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="odp.php" method="post" id="form">
        <div>
            <label for="imie">Imie</label>
            <input type="text" name="imie" id="imie" placeholder="Imie" required>
            <span></span>
        </div>
        <div>
            <label for="nazwisko">Nazwisko</label>
            <input type="text" name="nazwisko" id="nazwisko" placeholder="Nazwisko" required>
            <span></span>
        </div>
        <div>
            <label for="pesel">Pesel</label>
            <input type="number" placeholder="pesel" name="pesel" id="pesel" required>
            <span></span>
        </div><br>
        adres zamieszkania:
        <div>
            <label for="kod">kod</label>
            <input type="text" name="kod" id="kod" placeholder="kod" required>
            <span></span>
        </div>
        <div>
            <label for="miejscowosc">miejscowość</label>
            <input type="text" name="miejscowosc" id="miejscowosc" placeholder="Miejscowość" required>
            <span></span>
        </div>
        <div>
            <label for="ulica">ulica</label>
            <input type="text" name="ulica" id="ulica" placeholder="Ulica" required>
            <span></span>
        </div>
        <div>
            <label for="nrdomu">nr domu</label>
            <input type="text" name="nrdomu" id="nrdomu" placeholder="nr domu" required>
            <span></span>
        </div>
        <div>
            <label for="nrmieszkania">nr mieszkania</label>
            <input type="text" name="nrmieszkania" id="nrmieszkania" placeholder="nr mieszkania">
            <span></span>
        </div><br>

        <div>
            <label for="emial">Emial</label>
            <input type="email" name="email" placeholder="email" id="email" required>
            <span></span>
        </div>
        <div>
            <label for="number">Numer Telefonu</label>
            <input type="number" name="nrtel" placeholder="Numer-telefonu" id="number" required>
            <span></span>
        </div>
        <input type="submit" id="submit">
    </form>
    <script src="main.js"></script>
</body>
</html>

and my js和我的 js

let nazwisko = document.getElementById('nazwisko');
let pesel = document.getElementById('pesel');
let kod = document.getElementById('kod');
let miejscowosc = document.getElementById('miejscowosc');
let ulica = document.getElementById('ulica');
let nrdomu = document.getElementById('nrdomu');
let nrmieszkania = document.getElementById('nrmieszkania');
let email = document.getElementById('email');
let number = document.getElementById('number');
let span = document.getElementsByTagName('span');
let form = document.getElementById('form');

var arr = [imie,nazwisko,pesel,kod,miejscowosc,ulica,nrdomu,nrmieszkania,email,number];


    for(let i = 0; i < arr.length; ++i){
        
        var regex;
        console.log(arr[i]);
        if(i == 0 || i == 1 || i == 4 || i == 5){
            regex = /^[A-Za-zĄĘĆŁŃÓŚŻŹąęćłńóśżź]{3,100}$|^[A-Za-zĄĘĆŁŃÓŚŻŹąęćłńóśżź]+[A-Za-zĄĘĆŁŃÓŚŻŹąęćłńóśżź0-9\s\-]+[A-Za-zĄĘĆŁŃÓŚŻŹąęćłńóśżź0-9]{1,100}$/;
            console.log(arr[i].value.match(regex));
        }

        if(i == 2){
            regex = /^[0-9]{11}$/;
            console.log(regex);
        }

        if(i == 3){
            regex = /^[0-9]{2}-[0-9]{3}$/i;
            console.log(regex);
        }

        if(i == 6){
            regex = /[1-9]|[1-9][0-9]|[1-9][0-9][0-9]|1000/i;
            console.log(regex);
        }

        if(i == 7){
            regex = /[0-9]/gm;
            console.log(regex);
        }

        if(i == 8){
            regex  = /\b[\w\.-]+@[\w\.-]+\.\w{2,4}\b/gi;
            console.log(regex);
        }

        if(i == 9){
            regex = /^(?:\+\d\d)?\d{3}(-?)\d{3}\1\d(\d\d)?$/gm;
            console.log(regex);
        }

        arr[i].onblur = function(){
            if(arr[i].value.match(regex)){
                span[i].innerHTML = "";
            }else{
                span[i].innerHTML = "Uzupełnij " + arr[i].name;
                span[i].style.color = 'red';
            }

        }

        if(i == 7){
            arr[i].onblur = span[i].innerHTML = "";
        }
    }```

the <span></span> tags you are using in the Html do not have an id to which your logic can set the value that you define in the JS您在 Html 中使用的<span></span>标签没有您的逻辑可以设置您在 JS 中定义的值的 id

else{
  span[i].innerHTML = "Uzupełnij " + arr[i].name;
  span[i].style.color = 'red';
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM