Hướng dẫn how to create registration form in javascript - cách tạo form đăng ký bằng javascript

Question

Tìm hiểu làm thế nào để tạo một biểu mẫu đăng ký với CSS.

Nội dung chính Show

Cách tạo biểu mẫu đăng ký
Hình thức xác nhận

Đăng ký

Vui lòng điền vào biểu mẫu này để tạo tài khoản.

E-mail

Mật khẩu

Bạn co săn san để tạo một tai khoản? Đăng nhập

Hãy tự mình thử »

Cách tạo biểu mẫu đăng ký

Bước 1) Thêm HTML:

Sử dụng một phần tử để xử lý đầu vào. Bạn có thể tìm hiểu thêm về điều này trong hướng dẫn PHP của chúng tôi. Sau đó thêm các đầu vào (với nhãn phù hợp) cho mỗi trường:

Thí dụ

& nbsp; & nbsp; & nbsp; & nbsp; Đăng ký & nbsp; & nbsp; & nbsp; Vui lòng điền vào biểu mẫu này để tạo tài khoản. & NBSP; & nbsp; & nbsp;

Register

Please fill in this form to create an account.

& nbsp; & nbsp; & nbsp; Email & nbsp; & nbsp; & nbsp;

& nbsp; & nbsp; & nbsp; Mật khẩu & nbsp; & nbsp; & nbsp;

& nbsp; & nbsp; & nbsp; Lặp lại mật khẩu & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;

& nbsp; & nbsp; & nbsp; Bằng cách tạo một tài khoản, bạn đồng ý với Điều khoản & Quyền riêng tư của chúng tôi.

& nbsp; & nbsp; & nbsp; & nbsp; Bạn co săn san để tạo một tai khoản? Đăng nhập. & NBSP;

Already have an account? Sign in.

Bước 2) Thêm CSS:

Thí dụ

& nbsp; & nbsp; & nbsp; & nbsp; Đăng ký & nbsp; & nbsp; & nbsp; Vui lòng điền vào biểu mẫu này để tạo tài khoản. & NBSP; & nbsp; & nbsp;

& nbsp; & nbsp; & nbsp; Email & nbsp; & nbsp; & nbsp;
.container {
padding: 16px;
}

& nbsp; & nbsp; & nbsp; Mật khẩu & nbsp; & nbsp; & nbsp;
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}

& nbsp; & nbsp; & nbsp; Lặp lại mật khẩu & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
background-color: #ddd;
outline: none;
}

& nbsp; & nbsp; & nbsp; Bằng cách tạo một tài khoản, bạn đồng ý với Điều khoản & Quyền riêng tư của chúng tôi.
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}

& nbsp; & nbsp; & nbsp; & nbsp; Bạn co săn san để tạo một tai khoản? Đăng nhập. & NBSP;
.registerbtn {
background-color: #04AA6D;
color: white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}

Bước 2) Thêm CSS:
opacity:1;
}

* {Box-Sizing: Border-Box}
a {
color: dodgerblue;
}

/ * Thêm phần đệm vào container */. Container {& nbsp; Đệm: 16px;}
.signin {
background-color: #f1f1f1;
text-align: center;
}

/ * Các trường đầu vào toàn chiều rộng */đầu vào [type = text], input [type = password] {& nbsp; chiều rộng: 100%; & nbsp; Đệm: 15px; & nbsp; Biên độ: 5px 0 22px 0; & nbsp; Hiển thị: Inline-Block; & nbsp; Biên giới: Không có; & nbsp; Bối cảnh: #f1f1f1;}

đầu vào [type = text]: Focus, input [type = password]: focus {& nbsp; màu nền: #DDD; & nbsp; Đề cương: Không;} Go to our HTML Form Tutorial to learn more about HTML Forms.

/ * Ghi đè các kiểu mặc định của HR */HR {& nbsp; biên giới: 1px rắn #f1f1f1; & nbsp; Biên độ bottom: 25px;} Go to our CSS Form Tutorial to learn more about how to style form elements.

Cập nhật lần cuối vào ngày 19 tháng 8 năm 2022 21:51:07 (UTC/GMT +8 giờ)

Hình thức xác nhận

Trong tài liệu này, chúng tôi đã thảo luận về xác thực biểu mẫu JavaScript bằng mẫu đăng ký mẫu. Hướng dẫn khám phá xác thực JavaScript khi gửi với giải thích chi tiết.

Sau các chương trình hình ảnh trong lĩnh vực nào, chúng tôi muốn áp đặt.

Làm thế nào chúng ta sẽ thiết lập các xác nhận đó

Chúng tôi sẽ tạo các hàm JavaScript (một cho mỗi trường đầu vào có giá trị là xác thực) để kiểm tra xem giá trị được gửi bởi người dùng có truyền xác thực hay không.

Tất cả các chức năng được gọi từ một chức năng khác.

Nó đặt trọng tâm cho trường đầu vào cho đến khi người dùng cung cấp giá trị hợp lệ.

Khi người dùng làm như vậy, họ có thể tiến hành và có thể cung cấp giá trị cho trường có sẵn tiếp theo.

Hàm JavaScript sau được tạo ra được gọi trên sự kiện onsubmit của biểu mẫu.

Mã HTML của mẫu đăng ký mẫu

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>JavaScript Form Validation using a sample registration form</title>
<meta name="keywords" content="example, JavaScript Form Validation, Sample registration form" />
<meta name="description" content="This document is an example of JavaScript Form Validation using a sample registration form. " />
<link rel='stylesheet' href='js-form-validation.css' type='text/css' />
<script src="sample-registration-form-validation.js"></script>
</head>
<body onload="document.registration.userid.focus();">
<h2>Registration Form</h2>
Use tab keys to move from one input field to the next.
<form name='registration' onSubmit="return formValidation();">
<ul>
<li><label for="userid">User id:</label></li>
<li><input type="text" name="userid" size="12" /></li>
<li><label for="passid">Password:</label></li>
<li><input type="password" name="passid" size="12" /></li>
<li><label for="username">Name:</label></li>
<li><input type="text" name="username" size="50" /></li>
<li><label for="address">Address:</label></li>
<li><input type="text" name="address" size="50" /></li>
<li><label for="country">Country:</label></li>
<li><select name="country">
<option selected="" value="Default">(Please select a country)</option>
<option value="AF">Australia</option>
<option value="AL">Canada</option>
<option value="DZ">India</option>
<option value="AS">Russia</option>
<option value="AD">USA</option>
</select></li>
<li><label for="zip">ZIP Code:</label></li>
<li><input type="text" name="zip" /></li>
<li><label for="email">Email:</label></li>
<li><input type="text" name="email" size="50" /></li>
<li><label id="gender">Sex:</label></li>
<li><input type="radio" name="msex" value="Male" /><span>Male</span></li>
<li><input type="radio" name="fsex" value="Female" /><span>Female</span></li>
<li><label>Language:</label></li>
<li><input type="checkbox" name="en" value="en" checked /><span>English</span></li>
<li><input type="checkbox" name="nonen" value="noen" /><span>Non English</span></li>
<li><label for="desc">About:</label></li>
<li><textarea name="desc" id="desc"></textarea></li>
<li><input type="submit" name="submit" value="Submit" /></li>
</ul>
</form>
</body>
</html>

Tái xác nhận mẫu đăng ký mẫu là tệp JavaScript bên ngoài có chứa OCDE JavaScript được sử dụng để xác thực biểu mẫu. JS-form-ralidation.css là phong cách chứa các kiểu cho biểu mẫu. Lưu ý rằng để xác thực, chức năng JavaScript chứa mã để xác thực được gọi trên sự kiện onsubmit của biểu mẫu.

Vì lợi ích của cuộc biểu tình, chúng tôi chỉ lấy năm quốc gia. Bạn có thể thêm bất kỳ số lượng quốc gia trong danh sách.

Mã CSS của mẫu đăng ký mẫu


h2 {
margin-left: 70px;
}
form li {
list-style: none;
margin-bottom: 5px;
}

form ul li label{
float: left;
clear: left;
width: 100px;
text-align: right;
margin-right: 10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
}

form ul li input, select, span {
float: left;
margin-bottom: 10px;
}

form textarea {
float: left;
width: 350px;
height: 150px;
}

[type="submit"] {
clear: left;
margin: 20px 0 0 230px;
font-size:18px
}

p {
margin-left: 70px;
font-weight: bold;
}

Mã JavaScript để xác nhận

Chức năng JavaScript được gọi trên onsubmit

Hàm này gọi tất cả các chức năng khác được sử dụng để xác thực.

function formValidation()
{
var uid = document.registration.userid;
var passid = document.registration.passid;
var uname = document.registration.username;
var uadd = document.registration.address;
var ucountry = document.registration.country;
var uzip = document.registration.zip;
var uemail = document.registration.email;
var umsex = document.registration.msex;
var ufsex = document.registration.fsex; if(userid_validation(uid,5,12))
{
if(passid_validation(passid,7,12))
{
if(allLetter(uname))
{
if(alphanumeric(uadd))
{ 
if(countryselect(ucountry))
{
if(allnumeric(uzip))
{
if(ValidateEmail(uemail))
{
if(validsex(umsex,ufsex))
{
}
} 
}
} 
}
}
}
}
return false;
}

Chức năng JavaScript để xác thực userID

function userid_validation(uid,mx,my)
{
var uid_len = uid.value.length;
if (uid_len == 0 || uid_len >= my || uid_len < mx)
{
alert("User Id should not be empty / length be between "+mx+" to "+my);
uid.focus();
return false;
}
return true;
}

Mã trên kiểm tra xem trường đầu vào userID có được cung cấp một chuỗi độ dài từ 5 đến 12 ký tự hay không. Nếu không, nó hiển thị một cảnh báo.

Sơ đồ:

Chức năng Avascript để xác thực mật khẩu

function passid_validation(passid,mx,my)
{
var passid_len = passid.value.length;
if (passid_len == 0 ||passid_len >= my || passid_len < mx)
{
alert("Password should not be empty / length be between "+mx+" to "+my);
passid.focus();
return false;
}
return true;
}

Mã trên được sử dụng để xác nhận mật khẩu (nó phải có độ dài từ 7 đến 12 ký tự). Nếu không, nó hiển thị một cảnh báo.

Sơ đồ:

Chức năng Avascript để xác thực mật khẩu

function allLetter(uname)
{ 
var letters = /^[A-Za-z]+$/;
if(uname.value.match(letters))
{
return true;
}
else
{
alert('Username must have alphabet characters only');
uname.focus();
return false;
}
}

Mã trên được sử dụng để xác nhận mật khẩu (nó phải có độ dài từ 7 đến 12 ký tự). Nếu không, nó hiển thị một cảnh báo.

Sơ đồ:

Chức năng Avascript để xác thực mật khẩu

function alphanumeric(uadd)
{ 
var letters = /^[0-9a-zA-Z]+$/;
if(uadd.value.match(letters))
{
return true;
}
else
{
alert('User address must have alphanumeric characters only');
uadd.focus();
return false;
}
}

Mã trên được sử dụng để xác nhận mật khẩu (nó phải có độ dài từ 7 đến 12 ký tự). Nếu không, nó hiển thị một cảnh báo.

Sơ đồ:

Chức năng Avascript để xác thực mật khẩu

function countryselect(ucountry)
{
if(ucountry.value == "Default")
{
alert('Select your country from the list');
ucountry.focus();
return false;
}
else
{
return true;
}
}

Mã trên được sử dụng để xác nhận mật khẩu (nó phải có độ dài từ 7 đến 12 ký tự). Nếu không, nó hiển thị một cảnh báo.

Sơ đồ:

Chức năng Avascript để xác thực mật khẩu

function allnumeric(uzip)
{ 
var numbers = /^[0-9]+$/;
if(uzip.value.match(numbers))
{
return true;
}
else
{
alert('ZIP code must have numeric characters only');
uzip.focus();
return false;
}
}

Mã trên được sử dụng để xác nhận mật khẩu (nó phải có độ dài từ 7 đến 12 ký tự). Nếu không, nó hiển thị một cảnh báo.

Sơ đồ:

Chức năng Avascript để xác thực mật khẩu

function ValidateEmail(uemail)
{
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(uemail.value.match(mailformat))
{
return true;
}
else
{
alert("You have entered an invalid email address!");
uemail.focus();
return false;
}
}

Mã trên được sử dụng để xác nhận mật khẩu (nó phải có độ dài từ 7 đến 12 ký tự). Nếu không, nó hiển thị một cảnh báo.

Sơ đồ:

Chức năng Avascript để xác thực mật khẩu


h2 {
margin-left: 70px;
}
form li {
list-style: none;
margin-bottom: 5px;
}

form ul li label{
float: left;
clear: left;
width: 100px;
text-align: right;
margin-right: 10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
}

form ul li input, select, span {
float: left;
margin-bottom: 10px;
}

form textarea {
float: left;
width: 350px;
height: 150px;
}

[type="submit"] {
clear: left;
margin: 20px 0 0 230px;
font-size:18px
}

p {
margin-left: 70px;
font-weight: bold;
}

0

Mã trên được sử dụng để xác nhận mật khẩu (nó phải có độ dài từ 7 đến 12 ký tự). Nếu không, nó hiển thị một cảnh báo.

Sơ đồ:

Chức năng Avascript để xác thực mật khẩu


h2 {
margin-left: 70px;
}
form li {
list-style: none;
margin-bottom: 5px;
}

form ul li label{
float: left;
clear: left;
width: 100px;
text-align: right;
margin-right: 10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
}

form ul li input, select, span {
float: left;
margin-bottom: 10px;
}

form textarea {
float: left;
width: 350px;
height: 150px;
}

[type="submit"] {
clear: left;
margin: 20px 0 0 230px;
font-size:18px
}

p {
margin-left: 70px;
font-weight: bold;
}

1

Sơ đồ:

Chức năng Avascript để xác thực mật khẩu

Mã trên được sử dụng để xác nhận mật khẩu (nó phải có độ dài từ 7 đến 12 ký tự). Nếu không, nó hiển thị một cảnh báo.

Mã JavaScript để xác thực tên người dùng

Bây giờ, khi bạn đã hoàn thành việc học cách xác nhận mẫu đăng ký mẫu bằng JavaScript, hãy để chúng tôi đưa bạn đến một cách khác làm điều tương tự. Nhưng lần này, thay vì gửi biểu mẫu, xác nhận ở cấp trường, tức là bất cứ khi nào bạn chuyển từ trường này sang trường khác. Chắc chắn điều đó sẽ rất thú vị để học và chia sẻ là tốt.

Xác nhận JavaScript khác:

Kiểm tra không trống
Kiểm tra tất cả các chữ cái
Kiểm tra tất cả các số
Kiểm tra số nổi
Kiểm tra các chữ cái và số
Kiểm tra độ dài chuỗi
Xác thực email
Xác thực ngày
Mẫu đăng ký mẫu
Điện thoại số xác thực
Thẻ tín dụng Số xác thực
Xác thực mật khẩu
Xác thực địa chỉ IP

Trước: JavaScript: HTML Form - Ngày xác thực JavaScript: HTML Form - Date validation
Next: JavaScript Field Level Form Validation using a registration form