SignUp Button HTML CSS JavaScript-Java 学习之路

我目前正在使用正则表达式创建一个用户验证表单的网站 . 我正在尝试添加一个按钮，只有在所有字段都正确输入（因此没有错误）时才会显示，以便用户在完成后单击 .

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="test.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="/js/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type = "text/javascript" language = "javascript">
      $(document).ready(function() {

        // validation script here
        const inputs = document.querySelectorAll('input');

        const patterns = {
          telephone:/^\d{10}$/, //10 digits
          username:/^[a-z\d]{5,12}$/i, //5-12 words
          password:/^[\w@-]{8,20}$/, //8-20 words
          name:/^[A-Za-z-,]{1,20}$/, //1-20 words
          email:/^([a-z\d\.-]+)@([a-z\d-]+)\.([a-z]{2,8})(\.[a-z]{2,8})?$/
        };

        //validation function
        function validate(field,regex){
          if(regex.test(field.value)){
            field.className = 'valid';
          }else{
            field.className = 'invalid';
          }
        }

        inputs.forEach((input) => {
          input.addEventListener('keyup',(e) => {
            validate(e.target,patterns[e.target.attributes.name.value])
          });
        });


      });
      </script>

  </head>
  <body>
<div class="container-fluid colorOverlay">
  <div class="row">
    <article>
      <h1 class="headerText">Join Us!</h1>
    </article>
    <video id="video-background" autoplay loop muted>
                <source src="goods.mp4" data-src="goods.mp4" type="video/mp4">
            </video>
  </div>
</div>


<form>

    <input type="text" name="name" placeholder="name">
    <p>Name must contain only letters and be 1-20 characters</p>

    <input type="text" name="username" placeholder="username">
    <p>Username must be  and contain 5 - 12 characters</p>

    <input type="text" name="email" placeholder="email">
    <p>Email must be a valid address, e.g. me@mydomain.com</p>

    <input type="password" name="password" placeholder="password">
    <p>Password must alphanumeric (@, _ and - are also allowed) and be 8 - 20 characters</p>

    <input type="text" name="telephone" placeholder="telephone">
    <p>Telephone must be a valid telephone number (10 digits)</p>

    <!-- Button -->
    <input type="submit" name="register" value="Register" class="btn">




</form>
  </body>
</html>

我还是javascript的新手，这只是我正在做的个人项目之一 . 如果您想知道，视频标签仅适用于背景 .

2 回答

每次验证检查后检查表单的验证 . 基于您输入的工作示例如下：

$(document).ready(function() {

        // validation script here
        const inputs = document.querySelectorAll('input');
        const form = document.querySelector('form');

        const patterns = {
          telephone:/^\d{10}$/, //10 digits
          username:/^[a-z\d]{5,12}$/i, //5-12 words
          password:/^[\w@-]{8,20}$/, //8-20 words
          name:/^[A-Za-z-,]{1,20}$/, //1-20 words
          email:/^([a-z\d\.-]+)@([a-z\d-]+)\.([a-z]{2,8})(\.[a-z]{2,8})?$/
        };

        function checkFormValid() {
          var isValid = true;
          inputs.forEach((input) => {if(input.classList.contains('invalid')) {
            isValid = false;
          }});
          if(!isValid) {
            form.classList.add('invalid');
          } else {
            form.classList.remove('invalid');
          }
        }

        //validation function
        function validate(field,regex){
          if(regex.test(field.value)){
            field.className = 'valid';
          } else{
            field.className = 'invalid';
          }
          checkFormValid();
        }

        inputs.forEach((input) => {
          input.addEventListener('keyup',(e) => {
            validate(e.target,patterns[e.target.attributes.name.value])
          });
        });


      });

input.valid {
  background-color: green;
}

input.invalid {
  background-color: red;
}

form [type=submit] {
  display: block;
}

form.invalid [type=submit] {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>

    <input type="text" name="name" placeholder="name">
    <p>Name must contain only letters and be 1-20 characters</p>

    <input type="text" name="username" placeholder="username">
    <p>Username must be  and contain 5 - 12 characters</p>

    <input type="text" name="email" placeholder="email">
    <p>Email must be a valid address, e.g. me@mydomain.com</p>

    <input type="password" name="password" placeholder="password">
    <p>Password must alphanumeric (@, _ and - are also allowed) and be 8 - 20 characters</p>

    <input type="text" name="telephone" placeholder="telephone">
    <p>Telephone must be a valid telephone number (10 digits)</p>

    <!-- Button -->
    <input type="submit" name="register" value="Register" class="btn">




</form>

回复于 2024-04-25T19:08:45+08:00

这是一个完整的代码：

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
        <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="test.css">

    </head>
    <body>
        <div class="container-fluid colorOverlay">
            <div class="row">
                <article>
                    <h1 class="headerText">Join Us!</h1>
                </article>
                <video id="video-background" autoplay loop muted>
                    <source src="goods.mp4" data-src="goods.mp4" type="video/mp4">
                </video>
            </div>
        </div>


        <form>

            <input class="validate" type="text" name="name" placeholder="name">
            <p>Name must contain only letters and be 1-20 characters</p>

            <input class="validate"  type="text" name="username" placeholder="username">
            <p>Username must be  and contain 5 - 12 characters</p>

            <input class="validate"  type="text" name="email" placeholder="email">
            <p>Email must be a valid address, e.g. me@mydomain.com</p>

            <input class="validate"  type="password" name="password" placeholder="password">
            <p>Password must alphanumeric (@, _ and - are also allowed) and be 8 - 20 characters</p>

            <input class="validate"  type="text" name="telephone" placeholder="telephone">
            <p>Telephone must be a valid telephone number (10 digits)</p>

            <!-- Button -->
            <input type="submit" name="register" value="Register" id="submit" class="btn">


        </form>

        <script type = "text/javascript" language = "javascript">
            var fields = document.getElementsByClassName("validate");
            var submit_button = document.getElementById("submit");
            const rules = {
                telephone:/^\d{10}$/, //10 digits
                username:/^[a-z\d]{5,12}$/i, //5-12 words
                password:/^[\w@-]{8,20}$/, //8-20 words
                name:/^[A-Za-z-,]{1,20}$/, //1-20 words
                email:/^([a-z\d\.-]+)@([a-z\d-]+)\.([a-z]{2,8})(\.[a-z]{2,8})?$/
            };
            var field_status = Array(fields.length);
            function validate(field, field_id){
                field_status[field_id] = field.value.match(rules[field.name]);
                field.className = field.className.replace(/ (in|)valid/, "");
                if (!field_status[field_id]){
                    field.className += " invalid";
                } else {
                    field.className += " valid";
                }
                toggleSubmitButton();
            }
            function toggleSubmitButton(){
                var status = 0;
                for (var x = 0; x < field_status.length; x++){
                    if (!field_status[x]){
                        status = 0;
                        break;
                    } else {
                        status = field_status[x];
                    }
                }
                var display = "none";
                if (status){
                    display = "block";
                }
                submit_button.style.display = display;
            }
            function addKeyUpEvent(field, field_id){
                field.addEventListener("keyup", function(event){
                    validate(this, field_id);
                });
            }
            for (var x = 0; x < fields.length; x++){
                addKeyUpEvent(fields[x], x);
            }
            toggleSubmitButton();
        </script>

    </body>
</html>

回复于 2024-04-25T19:08:45+08:00

SignUp Button HTML CSS JavaScript

2 回答

相关问题