Implementing user registration function with js

This article example shares the specific code of js to implement the user registration function for your reference. The specific content is as follows

1.HTML code structure

<BODY>
       <FORM action="success.html" method="post" name="myform" onSubmit="return checkForm()">
                <TABLE border="0" cellpadding="0" cellspacing="0" align="center">
                    <TR>
                        <TD height="108" colspan="2"><IMG src="D:\Microsoft VS Code\421\img\touxiang.png"></TD>
                    </TR>
                    <TR>
                        <TD width="107" height="36">Username:</TD>
                        <TD width="524"><INPUT name="txtUser" type="text" maxlength="16">Only letters or numbers, 4-16 characters</TD>
                    </TR>
                    <TR>
                        <TD width="107" height="36">Password:</TD>
                        <TD width="524"><INPUT name="txtPass" type="password">Password length 6-12 characters</TD>
                    </TR>
                    <TR>
                        <TD width="107" height="36">Confirm password:</TD>
                        <TD width="524"><INPUT name="txtRPass" type="password"></TD>
                    </TR>
                    <TR>
                        <TD width="107" height="36">Gender:</TD>
                        <TD width="524">
                            <INPUT name="gen" type="radio" value="Male" checked>Male&nbsp; 
                            <INPUT name="gen" type="radio" value="女" class="input">女</TD>
                    </TR>
                    <TR>
                        <TD width="107" height="36">Email address:</TD>
                        <TD width="524"><INPUT name="txtEmail" type="text">
                        Enter a valid email address</TD>
                    </TR>
                    <TR>
                        <TD width="107" height="36">Date of Birth:</TD>
                        <TD width="524">
                            <INPUT name="year" id="year" size=4 maxlength=4 >&nbsp;Year&nbsp;&nbsp;
                                <SELECT name="month" >
                                    <OPTION value=1>January</OPTION>
                                    <OPTION value=2>February</OPTION>
                                    <OPTION value=3>March</OPTION>
                                    <OPTION value=4>April</OPTION>
                                    <OPTION value=5>May</OPTION>
                                    <OPTION value=6>June</OPTION>
                                    <OPTION value=7>July</OPTION>
                                    <OPTION value=8>August</OPTION>
                                    <OPTION value=9>September</OPTION>
                                    <OPTION value=10>October</OPTION>
                                    <OPTION value=11>November</OPTION>
                                    <OPTION value=12>December</OPTION>
                                </SELECT>&nbsp;Month&nbsp;&nbsp;
                                 <SELECT name="day" >
                                    <OPTION value=1>1</OPTION><OPTION value=2>2</OPTION><OPTION value=3>3</OPTION><OPTION value=4>4</OPTION>
                                    <OPTION value=5>5</OPTION><OPTION value=6>6</OPTION><OPTION value=7>7</OPTION><OPTION value=8>8</OPTION>
                                    <OPTION value=9>9</OPTION><OPTION value=10>10</OPTION><OPTION value=11>11</OPTION><OPTION value=12>12 </OPTION>
                                    <OPTION value=13>13</OPTION><OPTION value=14>14</OPTION><OPTION value=15>15</OPTION><OPTION value=16>16</OPTION>
                                    <OPTION value=17>17</OPTION><OPTION value=18>18</OPTION><OPTION value=19>19</OPTION><OPTION value=20>20</OPTION>
                                    <OPTION value=21>21</OPTION><OPTION value=22>22</OPTION><OPTION value=23>23</OPTION><OPTION value=24>24</OPTION>
                                    <OPTION value=25>25</OPTION><OPTION value=26>26</OPTION><OPTION value=27>27</OPTION><OPTION value=28>28</OPTION>
                                    <OPTION value=29>29</OPTION><OPTION value=30>30</OPTION><OPTION value=7>31</OPTION>
                                </SELECT>&nbsp;Day</TD>
                    </TR>
                    <TR>
                      <TD colspan="2" align="center">
                        <INPUT type="submit" value="Agree to the following terms and submit">
                      </TD>
                   </TR>
                  <TR>
                     <TD colspan="2">
                        <TEXTAREA cols="" rows="" readOnly="true" style="width:480px;height:110px;font-size:12px;color: #666">
                            I. General Provisions 1.1 Users shall agree to the terms of this Agreement and complete all registration procedures according to the prompts on the page. When the user clicks the "Agree" button during the registration process, it means that the user has reached an agreement with Baidu and fully accepts all the terms under this agreement.
                            1.2 After the user successfully registers, Baidu will give each user a user account and corresponding password, and the user is responsible for keeping the user account and password; the user shall be legally responsible for all activities and events conducted with his or her user account.
                            1.3 Users can use the individual services of Baidu's various channels. When users use Baidu's individual services, their use behavior is deemed as their agreement to the terms of service of the individual service and various announcements issued by Baidu in the individual service.
                            1.4 The Baidu Member Service Agreement and the individual service terms and announcements of each channel may be updated by Baidu at any time without further notice. When using relevant services, you should pay attention to and abide by the applicable terms.
                              Before using the services provided by Baidu, you should read this Service Agreement carefully. If you do not agree to this Service Agreement and/or any modification thereof at any time, you may actively cancel the services provided by Baidu; once you use Baidu services, you will be deemed to have understood and fully agreed to all the contents of this Service Agreement, including any modification of the Service Agreement made by Baidu at any time, and become a Baidu user.
                         </TEXTAREA>
                     </TD>
                  </TR>
                </TABLE>
      </FORM>
</BODY>

Note that you need to add the pictures yourself

2.JS code structure

<SCRIPT type="text/javascript" language="javascript">
                function checkForm(){
                    if(checkUserName()&&checkPass()&&checkEmail()&&checkDate()){
                        return true;
                    }else{
                        return false;
                    }
                }
                //Username non-empty verification + length verification + legality verification function checkUserName(){
                    var name = document.myform.txtUser;
                    if(name.value==""){
                        alert("Please enter your username");
                        name.focus();
                        return false;
                    }else if(name.value.length<4||name.value.length>16){//Username length verification alert("The length of the user name entered is 4-16 characters");
                        name.select();
                        return false;
                    }
                    //Username input legitimacy verification for(var i=0;i<name.value.length;i++)
                    {
                        var charTest = name.value.toLowerCase().charAt(i);
                        if( (!(charTest>='0' && charTest<='9')) && (!(charTest>='a' && charTest<='z')) && (charTest!='_') )
                        {
                        alert("The member name contains illegal characters, it can only include az, 0-9 and underscore");
                        name.select();
                        return false;
                        }
                    }
                    return true;
                }
                //Password non-empty verification + confirmation verification + length verification function checkPass(){
                    var pass=document.myform.txtPass;
                    var rpass=document.myform.txtRPass;
                    if(pass.value==""){
                        alert("The password cannot be empty");
                        pass.focus();
                        return false;
                    }else if(pass.value.length<6||pass.value.length>12){
                        alert("The password must be 6-12 characters long");
                        pass.select();
                        return false;
                    }
                    //Confirm password consistency verification if (rpass.value!=pass.value) {
                        alert("The confirmation password is inconsistent with the password entered");
                        rpass.select();
                        return false;
                    }
                    return true;
                }
                
                //Email verification function checkEmail(){
                    var strEmail=document.myform.txtEmail;
                    if (strEmail.value.length==0)
                    {
                        alert("Email cannot be empty!");
                        strEmail.focus();
                        return false;
                    }else if (strEmail.value.indexOf("@",0)==-1)
                    {
                        alert("The email format is incorrect\nMust contain the @ symbol!");
                        strEmail.select();
                        return false;
                    }else if (strEmail.value.indexOf(".",0)==-1){
                        alert("The email format is incorrect. It must contain a . symbol!");
                        strEmail.select();
                        return false;
                    } //@ and . characters cannot be at the beginning of a sentence else if(strEmail.value.charAt(0)=="@"||strEmail.value.charAt(0)=="."){
                        alert("The @ and . symbols cannot be the first in the email address");
                        strEmail.select();
                        return false;+
                    } //@ and . characters cannot be at the end of a sentence else if(strEmail.value.charAt(strEmail.value.length-1)=="@"||strEmail.value.charAt(strEmail.value.length-1)=="."){
                        alert("The @ and . symbols cannot be the last digit of an email address");
                        strEmail.select();
                        return false;
                    }
                    return true;
                }
                //Verify the year of birth function checkDate(){
                    var year = document.myform.year;
                    var time = new Date();
                    if(year.value==""){//non-empty verification alert("Please enter your year of birth");
                        year.focus();
                        return false;
                    }else if(isNaN(year.value)){//Is it a number verification alert("Please enter a number");
                        year.focus();
                        return false;
                    }else if(parseInt(year.value)<1949||parseInt(year.value)>time.getYear()){//Input range validation alert("Year range from 1949-"+time.getYear()+"year");
                        year.select();
                        return false;
                    }else{
                        return true;
                    }
                }
</SCRIPT>

3. The effects are shown as follows:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

js simply implements the verification code of user registration information
Common javascript codes for user registration
JS implements the function of obtaining SMS verification code and countdown when users register
PHP user registration page uses js to perform form verification specific example
JS code used to determine the password strength when the user registers
Use beans and servlets in jsp to implement user registration and login
A simple example of javascript user registration prompt effect
How to quickly build Node.js (Express) user registration, login and authorization methods
Nodejs implements user registration function
js implements the countdown method of user registration agreement

<<: Docker Basics

>>: Analysis of the principles of Mysql dirty page flush and shrinking table space