Thuộc tính yêu cầu Mật khẩu nhập DOM HTML

Thuộc tính bắt buộc mật khẩu đầu vào HTML DOM được liên kết với thuộc tính bắt buộc của phần tử . Thuộc tính bắt buộc được sử dụng để thiết lập và trả lại nếu cần điền vào trường mật khẩu nào đó hoặc không trước khi biểu mẫu được gửi đến máy chủ. Điều này cho phép biểu mẫu không gửi nếu người dùng để trống trường mật khẩu có thuộc tính bắt buộc.

Cú pháp

Sau đây là cú pháp cho -

Đặt thuộc tính bắt buộc -

textObject.required = true|false

Ở đây, true đại diện cho trường văn bản phải được điền trong khi false đại diện cho tùy chọn điền vào trường trước khi gửi biểu mẫu.

Ví dụ

Hãy để chúng tôi xem xét một ví dụ cho thuộc tính yêu cầu mật khẩu đầu vào -

<!DOCTYPE html>
<html>
<body>
<h1>Input password required property</h1>
<p>Check if the above field is mandatory to be filled or not by clicking the below button</p>
<form action="/Sample_page.php">
Password: <input type="password" id="PASS1" name=”passW” required>
<input type="submit">
</form>
<br>
<button onclick="checkReq()">CHECK</button>
<p id="Sample"></p>
<script>
   function checkReq() {
      var Req=document.getElementById("PASS1").required;
      if(Req==true)
         document.getElementById("Sample").innerHTML="The password field must be filled before submitting";
      else
         document.getElementById("Sample").innerHTML="The password field is optional and can be left blank by the user";
   }
</script>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Thuộc tính yêu cầu Mật khẩu nhập DOM HTML

Khi nhấp vào nút KIỂM TRA -

Thuộc tính yêu cầu Mật khẩu nhập DOM HTML

Nếu thuộc tính bắt buộc được đặt thành true và bạn nhấp vào gửi -

Thuộc tính yêu cầu Mật khẩu nhập DOM HTML

Trong ví dụ trên -

Trước tiên, chúng tôi đã tạo một trường mật khẩu đầu vào với id “PASS1”, tên “passW” và thuộc tính bắt buộc được đặt thành true. Trường mật khẩu được chứa bên trong một biểu mẫu với action =”Sample_page.php” chỉ định nơi gửi dữ liệu biểu mẫu khi đã nhấp vào nút gửi.

<form action="/Sample_page.php">
Password: <input type="password" id="PASS1" name=”passW” required>
<input type="submit">
</form>

Sau đó, chúng tôi đã tạo một nút CHECK sẽ thực thi phương thức checkReq () khi người dùng nhấp vào -

<button onclick="checkReq()">CHECK</button>

CheckReq () sử dụng phương thức getElementById () để lấy phần tử đầu vào có kiểu mật khẩu và lấy thuộc tính bắt buộc của nó mà trong trường hợp của chúng ta trả về true. Giá trị boolean trả về được gán cho một Req biến và dựa trên việc giá trị trả về là đúng hay sai, chúng tôi hiển thị thông báo thích hợp trong đoạn có id “Sample” bằng cách sử dụng thuộc tính innerHTML của nó -

function checkReq() {
   var Req=document.getElementById("PASS1").required;
   if(Req==true)
      document.getElementById("Sample").innerHTML="The password field must be filled before submitting";
   else
      document.getElementById("Sample").innerHTML="The password field is optional and can be left blank by theuser";
}