Làm cách nào để tạo biểu mẫu đăng ký bằng HTML với xác thực JavaScript?

Question

Biểu mẫu đăng ký được sử dụng ở nhiều nơi, chẳng hạn như khách hàng đăng ký, dịch vụ hoặc các chương trình hoặc gói khác. Bạn có thể tạo biểu mẫu Đăng ký bằng HTML và Xác thực dữ liệu đầu vào của người dùng của các trường bằng cách sử dụng JavaScript

Nội dung chính Show

Xác thực trong JavaScript cho mẫu đăng ký Ví dụ
Làm cách nào để áp dụng xác thực JavaScript trong biểu mẫu đăng ký HTML?
Làm cách nào để tạo biểu mẫu đăng nhập và đăng ký bằng JavaScript?

Phải đọc. Mẫu đăng ký của sinh viên bằng HTML có xác thực JavaScript

Ví dụ phổ biến nhất Gmail hoặc phương tiện truyền thông xã hội khác đăng ký trực tuyến

Đó là danh sách các trường mà người dùng sẽ nhập dữ liệu vào và gửi cho một công ty hoặc cá nhân

Xác thực trong JavaScript cho mẫu đăng ký Ví dụ

Trong ví dụ chúng ta có 5 trường đầu vào. -

Tên
id email
tên tài khoản
mật khẩu
Xác nhận mật khẩu

Tất cả các trường này được tạo bằng mã HTML cơ bản

Bây giờ đến phần xác thực biểu mẫu trong JavaScript bằng biểu thức chính quy, Chúng tôi sẽ tạo các hàm JavaScript (một hàm cho mỗi trường đầu vào) để kiểm tra xem giá trị do người dùng gửi có vượt qua xác thực hay không

Nó hiển thị thông báo cảnh báo cho đến khi người dùng cung cấp một giá trị hợp lệ

 <!DOCTYPE html>
  <html>
  <head>
  <title>Welcome To Registration Form</title>

  <script type="text/javascript">
       function registration()
    {

        var name= document.getElementById("t1").value;
        var email= document.getElementById("t2").value;
        var uname= document.getElementById("t3").value;
        var pwd= document.getElementById("t4").value;           
        var cpwd= document.getElementById("t5").value;
        
        //email id expression code
        var pwd_expression = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-])/;
        var letters = /^[A-Za-z]+$/;
        var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

        if(name=='')
        {
            alert('Please enter your name');
        }
        else if(!letters.test(name))
        {
            alert('Name field required only alphabet characters');
        }
        else if(email=='')
        {
            alert('Please enter your user email id');
        }
        else if (!filter.test(email))
        {
            alert('Invalid email');
        }
        else if(uname=='')
        {
            alert('Please enter the user name.');
        }
        else if(!letters.test(uname))
        {
            alert('User name field required only alphabet characters');
        }
        else if(pwd=='')
        {
            alert('Please enter Password');
        }
        else if(cpwd=='')
        {
            alert('Enter Confirm Password');
        }
        else if(!pwd_expression.test(pwd))
        {
            alert ('Upper case, Lower case, Special character and Numeric letter are required in Password filed');
        }
        else if(pwd != cpwd)
        {
            alert ('Password not Matched');
        }
        else if(document.getElementById("t5").value.length < 6)
        {
            alert ('Password minimum length is 6');
        }
        else if(document.getElementById("t5").value.length > 12)
        {
            alert ('Password max length is 12');
        }
        else
        {                                           
               alert('Thank You for Registration & You are Redirecting to Website');
               // Redirecting to other page or webste code. 
               window.location = "https://tutorial.eyehunts.com//"; 
        }
    }
  </script>
  </head>

    <body>
    <!-- Main div code -->
    <div id="main">
    <div class="h-tag">
    <h2>Register Your Account</h2>
    </div>
    <!-- create account div -->
    <div class="login">
    <table cellspacing="2" align="center" cellpadding="8" border="0">
    <tr>
    <td align="right">Enter Name :</td>
    <td><input type="text" placeholder="Enter user here" id="t1" class="tb" /></td>
    </tr>
    <tr>
    <td align="right">Enter Email ID :</td>
    <td><input type="text" placeholder="Enter Email ID here" id="t2" class="tb" /></td>
    </tr>
    <tr>
    <td align="right">Enter Username :</td>
    <td><input type="text" placeholder="Enter Username here" id="t3" class="tb" /></td>
    </tr>
    <tr>
    <td align="right">Enter Password :</td>
    <td><input type="password" placeholder="Enter Password here" id="t4" class="tb" /></td>
    </tr>
    <tr>
    <td align="right">Enter Confirm Password :</td>
    <td><input type="password" placeholder="Enter Password here" id="t5" class="tb" /></td>
    </tr>
    <tr>
    <td></td>
    <td>
    <input type="reset" value="Clear Form" id="res" class="btn" />
    <input type="submit" value="Create Account" class="btn" onclick="registration()" /></td>
    </tr>
    </table>
    </div>
    <!-- create account box ending here. -->
    </div>
    <!-- Main div ending here.. -->
    </body>
    </html>

đầu ra

Ghi chú. Chúng tôi không sử dụng CSS để thiết kế, bạn có thể tự làm điều đó

Hãy bình luận nếu bạn có bất kỳ nghi ngờ và gợi ý nào về mã hướng dẫn này

Ghi chú. Tất cả mã Ví dụ về JS đều được thử nghiệm trên trình duyệt Firefox và trình duyệt Chrome
hệ điều hành. cửa sổ 10
Mã số. Phiên bản HTML5

Rohit

Bằng cấp về Khoa học Máy tính và Kỹ sư. Nhà phát triển ứng dụng và có kinh nghiệm về nhiều ngôn ngữ lập trình. Đam mê công nghệ & thích học hỏi kỹ thuật