احراز هویت input بدون js

سلام من قصد دارم برای اینکه css حرفه ای تر یاد بگیرم توی این پروژه از js برای احراز هویت استفاده نکنم منطقی که میخوام برم جلو این شکلی هست
لیست تسک ها
تلفن با یکی از عبارات زیر شروع شود و در ادامه حاوی ۹ رقم باشد
+989
00989
09
رمز عبور باید حداقل حاوی یک حرف کوچک انگلیسی، یک حرف بزرگ انگلیسی، یک رقم و یکی از کاراکترهای !@#$%^&* باشد
جابه‌جایی smooth بین بخش‌های register و
login

 <main>
            <form id="register">
                <label>
                    <span>Username</span>
                    <img src="./icons/user.svg" alt="" />
                    <input type= "text" minlength = "3" maxlength = "32"  required/>
                </label>
                <label>
                    <span>Email</span>
                    <img src="./icons/email.svg" alt="" />
                    <input type= "email"   value = "default@example.com" required/><!--pattern="[a-z]{4,8}" size="45"-->
                    <span class="validity"></span>
                </label>
                <label>
                    <span>Phone</span>
                    <img src="./icons/phone.svg" alt="" />
                    <input type = "tel"  maxlength="13" />
                    <span class="validity-tel"></span>
                </label>
                <label>
                    <span>Password</span>
                    <img src="./icons/password.svg" alt="" />
                    <input type = "password" minlength = "8" maxlength = "32" />
                    <span class="validity-pass"></span>
                </label>
                <button type = "submit">Register</button>
                <p>
                    Already have an account?
                    <a href = "#" id = "register" style="color: white;">Log in</a><!-- if user click this link jump page load register menu -->
                </p>
            </form>
            <section>
                <img src="./illustrations/gangster.svg" alt="" />
            </section>
            <form id="login"> <!-- hidden default and show login when user enter Register button <!-->
                <label>
                    <span>Username</span>
                    <img src="./icons/user.svg" alt="" />
                    <input />
                </label>
                <label>
                    <span>Password</span>
                    <img src="./icons/password.svg" alt="" />
                    <input />
                </label>
                <button>Login</button>
                <p>
                    Don't have an account?
                    <a href = "#" id = "register" style="color: white;">Register</a> <!-- if user click this link jump page load login menu -->
                </p>
            </form>
        </main>
    </body>
</html>
html{
  scroll-behavior: smooth;!important;
}
/*
validity input tag 
*/

.validity::after{
  position: absolute;
  content: '✖';
  padding-left: 7px;
  top: 0.5rem;
  left: -6rem;
  font-size: 2em;
}
.validity-tel::after{
  position: absolute;
  content: '✖';
  padding-left: 7px;
  top: 0.5rem;
  left: -6rem;
  font-size: 2em;
}
.validity-pass::after{
  position: absolute;
  content: '✖';
  padding-left: 7px;
  top: 0.40rem;
  left: -6rem;
  font-size: 2em;
}
در آخر راجب pattren میشه گفت کار re در زبان های برنامه نویسی میکنه ؟