当前位置：网站首页>Web -- user registration interface

Web -- user registration interface

2022-04-21 13:47:00 【Learn to pass from the bottom to the middle】

List of articles

Preface

This article mainly introduces Web The preparation of a user information interface on the client , And a function of local information verification , Contains a small amount of js and CSS, Record this beautiful moment .

Final results

Please add a picture description

I'm a beginner Web, The interface is still a little simple , If only you could understand the meaning .

Interface code and logic code

<html>
    <head>
        <title>
             This is a registration form 
        </title>
        <script src="E:\ Sophomore course notes \Wab technology \4.18 operate a computer \denglu.js"></script>
        <style> .success{
       color: green; } .error{
       color: red; } </style>
    </head>
    <body>
        <h2 align="center">
             User registration information 
        </h2>
        <br>
        <hr style color="red">
        <br>
        <br>
        <!-- Here's a form , Use a function to finally confirm whether the information is correct -->
        <form id="myform" align="left" action="#" onsubmit="fun1()"></br></br>
             user name *：&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="username" onblur="n1()" />&nbsp;&nbsp;<span></span></br></br>
             Age *：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="number" id="agename" onblur="n2()"/>&nbsp;&nbsp;<span></span></br></br>
             password *：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="mima" onblur="n3()"/>&nbsp;&nbsp;<span></span></br></br>
             Confirm the password *：&nbsp;<input type="text" id="confirm" onblur="n4()"/>&nbsp;&nbsp;<span></span></br></br>
             E-mail *：&nbsp;<input type="text" id="email" onblur="n5()"/>&nbsp;&nbsp;<span></span></br></br>
             Telephone ：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="number" id="phone" onblur="n6()">&nbsp;&nbsp;<span></span></br></br>
            QQ number ：&nbsp;<input type="text" id="QQ" onblur="n7()">&nbsp;&nbsp;<span></span></br></br>
            <input type="submit" value=" Submit " /> 
            <input type="reset" value=" Reset ">
        </form>
    </body>
        
</html>

function n1()
{
    
    var pattern=/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,10}$/
    // The following is to return a collection 
    var spans=document.querySelectorAll("span");
    var user=document.getElementById("username");
    if(pattern.test(user.value))
    {
    
        spans[0].className="success"
        spans[0].innerHTML=" correct , Go to the next step "
    }
    else
    {
    
        spans[0].className="error"
        spans[0].innerHTML=" The user name cannot be empty or malformed ！"
    }
}

function n2()
{
    
    var spans=document.querySelectorAll("span")
    var age=document.getElementById("agename")
    if(age.value>17)
    {
    
        spans[1].className="success"
        spans[1].innerHTML=" correct "
    }
    else
    {
    
        spans[1].className="error"
        spans[1].innerHTML=" Age cannot be less than 17 year ！"
    }
}
function n3()
{
    
    var pattern=/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,10}$/
    var spans=document.querySelectorAll("span")
    var mima=document.getElementById("mima")
    if(pattern.test(mima.value))
    {
    
        spans[2].className="success"
        spans[2].innerHTML=" correct , Please proceed to the next step "
    }
    else
    {
    
        spans[2].className="error"
        spans[2].innerHTML=" Password cannot be empty or malformed ！"
    }
}

function n4()
{
    
    var spans=document.querySelectorAll("span");
    var mima=document.getElementById("mima")
    var confirm=document.getElementById("confirm")
    if(mima.value==confirm.value)
    {
    
        spans[3].className="success"
        spans[3].innerHTML=" correct , Please proceed to the next step "
    }
    else
    {
    
        spans[3].className="error"
        spans[3].innerHTML=" The two passwords don't match "
    }
}

function n5()
{
    
    var email=document.getElementById("email")
    var spans=document.querySelectorAll("span")
    var r=/@/
    if(r.test(email.value))
    {
    
        spans[4].className="success"
        spans[4].innerHTML=" correct , Please proceed to the next step "
    }
    else
    {
    
        spans[4].className="error"
        spans[4].innerHTML=" Email address format error "
    }
}
function n6()

{
    
    var pattern=/^\d+$/
    var spans=document.querySelectorAll("span")
    var phone=document.getElementById("phone")
    if(pattern.test(phone.value))

    {
     
        spans[5].className="success"
    spans[5].innerHTML=" correct , Please proceed to the next step "

    }
    else{
    
       
        spans[5].className="error"
        spans[5].innerHTML=" It's just numbers "
    }
}
function n7()
{
    
    var pattern = /^\d+$/
    var spans=document.querySelectorAll("span")
    var QQ=document.getElementById("QQ")
    if(pattern.test(QQ.value))
    {
    
        spans[6].className="success"
        spans[6].innerHTML=" correct , You can submit "
    }
    else
    {
    
        spans[6].className="error"
        spans[6].innerHTML=" The input format may be wrong , Please re-enter ！"
    }
}

Code explanation

onblur： This method can be implemented , When mouse comes from text Call this method when you move away from the box .

span label ： This tag is used to display the verification information , But you can't see it without entering any information , Good use of , But one thing to note , The newline tag in my code is similar to span Pay attention to the position of the label. If it is written backwards , Then the displayed verification information will go below .

var spans=document.querySelectorAll(“span”);
This line of code means ： Return to a collection , Press... In this file span Order of occurrence , for example spans[0] It represents the authentication information behind the user name .

spans[0].className=“success”
spans[0].innerHTML=“ correct , Go to the next step ”

There is also the understanding of these two lines of code ： It says spans[0] This is the authentication information behind the user name , We set up two classes in the interface code ,.success and .error These two classes ,spans[0].className Is to give the attributes written in the class in the style to the verification information , This should be easier to understand .

spans[0].innerHTML=“ correct , Go to the next step ”
This line of code means ： Fill in the information in the position of the verification information .

Be careful

1. Note the difference between the submit button and the reset button type type ,
Submit button type It has to be for ：submit
Reset button type It has to be for reset, Otherwise it won't work .

2.var pattern=/^(?=.[A-Za-z])(?=.\d)[A-Za-z\d]{6,10}$/ This line is a regular expression , You don't have to remember this , When you need it, you can query it online .

3. stay js When comparing values in code, most of them are comparison value value , Like that one. age.

Summary

On the whole, it won't be difficult , The main thing is to try more , The trial and error cost of this is very low , Understanding code ideas , Then you can check more data for functions you don't understand , This is the last time I wrote a blog , I still want to summarize it by writing a blog . Hopefully that helped , Anyway, it's a great help to myself （ Ha ha ha ha ）.

版权声明
本文为[Learn to pass from the bottom to the middle]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/04/202204211216321374.html