Untitled

<%@ Page Language="C#"  %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        .error{
            color:red;
        }
        .success{
            color:green;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">

        Username
        <asp:TextBox runat="server" ID="usernameTextBox" required/>

        Password
        <asp:TextBox runat="server" ID="passwordTextBox" TextMode="Password" required/>

        Confirm Password
        <asp:TextBox runat="server" ID="confirmPasswordTextBox" TextMode="Password" required/>
        Email
        <asp:TextBox runat="server" ID="emailTextBox" TextMode="Email" required/>

        <asp:Button runat="server" ID="submitBtn" Text="Submit" OnClick="submitBtn_click" OnClientClick="return submitClientBtn_click()" />
        <asp:Label runat="server" ID="errorMessageLabel" CssClass=""/>
    </form>

    <script>
        function submitClientBtn_click(){

            let username = document.querySelector('#usernameTextBox').value;
            const usernamePattern = /^[A-Za-z][A-Z-a-z0-9]+$/;

            let password = document.querySelector('#passwordTextBox').value;
            let confirmPassword = document.querySelector('#confirmPasswordTextBox').value;
            const hasMatch = password === confirmPassword ? true : false;

            let email = document.querySelector('#emailTextBox').value;
            const emailPattern = /^[^ ]+@[A-Za-z]+.[a-z]+$/;

            let errorMessage = document.querySelector('#errorMessageLabel');
            errorMessage.removeAttribute("class");

            if (username.length == 0 || password.length == 0 || email.length == 0) {
                return false;
            }

            if(usernamePattern.test(username) === false || hasMatch===false || emailPattern.test(email)===false)
            {
                errorMessage.innerText = "error";
                errorMessage.classList.add("error");
                return false;
            } else {
                errorMessage.innerText = "success";
                errorMessage.classList.add("success");
                return true;
            }
        }
    </script>

    <script runat="server" language="C#">
        protected void submitBtn_click(object sender, EventArgs e){


            var username = usernameTextBox.Text;
            var password = passwordTextBox.Text;
            var confirmPassword = confirmPasswordTextBox.Text;
            var email = emailTextBox.Text;

            //build connection
            var connectionString = "Data Source=tashi-pc\\sqlexpress;Initial Catalog=ExamPractice;Integrated Security=True";
            var connection = new System.Data.SqlClient.SqlConnection(connectionString);
            connection.Open();

            //qry
            var sql = String.Format("insert into users(username,password,email) values ('{0}',HashBytes('MD5','{1}'),'{2}')",username,password,email);
            var command = new System.Data.SqlClient.SqlCommand(sql,connection);

            command.ExecuteNonQuery();


        }
    </script>
</body>
</html>