คุณสมบัติที่จำเป็นในการป้อนรหัสผ่าน HTML DOM เชื่อมโยงกับแอตทริบิวต์ที่จำเป็นขององค์ประกอบ คุณสมบัติที่จำเป็นใช้สำหรับการตั้งค่าและส่งคืนหากจำเป็นต้องกรอกฟิลด์รหัสผ่านหรือไม่ก่อนที่จะส่งแบบฟอร์มไปยังเซิร์ฟเวอร์ ซึ่งจะทำให้ไม่สามารถส่งแบบฟอร์มได้หากช่องรหัสผ่านที่มีแอตทริบิวต์ที่จำเป็นว่างเปล่าโดยผู้ใช้
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การตั้งค่าคุณสมบัติที่ต้องการ -
textObject.required = true|false
ในที่นี้ true หมายถึงช่องข้อความที่ต้องกรอก ในขณะที่ false หมายถึงตัวเลือกในการกรอกข้อมูลในช่องก่อนที่จะส่งแบบฟอร์ม
ตัวอย่าง
เรามาดูตัวอย่างคุณสมบัติการป้อนรหัสผ่านที่จำเป็นสำหรับ -
<!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> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อคลิกปุ่มตรวจสอบ -
หากคุณสมบัติที่ต้องการถูกตั้งค่าเป็น true และคุณคลิกส่ง −
ในตัวอย่างข้างต้น −
ขั้นแรกเราได้สร้างช่องป้อนรหัสผ่านด้วย id “PASS1” ชื่อ “passW” และตั้งค่าแอตทริบิวต์ที่จำเป็นเป็น true ฟิลด์รหัสผ่านอยู่ภายในแบบฟอร์มที่มี action=”Sample_page.php” ซึ่งระบุตำแหน่งที่จะส่งข้อมูลแบบฟอร์มเมื่อ คลิกที่ปุ่มส่ง
<form action="/Sample_page.php"> Password: <input type="password" id="PASS1" name=”passW” required> <input type="submit"> </form>
จากนั้นเราได้สร้างปุ่ม CHECK ที่จะรันเมธอด checkReq() เมื่อผู้ใช้คลิก -
<button onclick="checkReq()">CHECK</button>
checkReq() ใช้เมธอด getElementById() เพื่อรับองค์ประกอบอินพุตที่มีรหัสผ่านประเภทและรับคุณสมบัติที่จำเป็น ซึ่งในกรณีของเราคืนค่าเป็น true ค่าบูลีนที่ส่งคืนถูกกำหนดให้กับตัวแปร Req และขึ้นอยู่กับว่าค่าที่ส่งคืนเป็นจริงหรือเท็จ เราแสดงข้อความที่เหมาะสมในย่อหน้าที่มี id “Sample” โดยใช้คุณสมบัติ innerHTML -
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";
} 