[英]How can I associate my form with document.querySelector?
我不知道如何將以下條件反應鏈接到passid表單輸入id：
我不知道將document.querySelector放在何處，以便索引的contion-reactions將與之關聯。
這是代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Password - form</title>
</head>
<body>
<form>
<label>Password</label>
<input type="password" id="passid" />
<br>
<input type="submit" value="Sign In" />
</form>
<script>
function passType() {
var password = ["p1", "p2", "p3", "p4", "p5"];
if (password.indexOf > -1) {
alert("That's great! Thank you!");
} else {
alert("Wrong, try again");
}
if (password.indexOf > -1) {
alert("It's wrong, you have one more try...");
} else {
alert("Get out now!");
window.close();
}
}
passType();
</script>
</body>
</html>
這些是我想要關注的一些要點 ：
- 如果您碰巧知道元素的id ，請使用
document.getElementById(id)。 這是最突出的選擇方式，因為通常id對於所有元素都是唯一的。- 如果您碰巧知道元素的類 ，請使用
document.getElementsByClassName(class)。 此方法具有一定的風險，因為可能有多個具有相同類的元素。- 如果您碰巧知道元素的tagName ，請使用
document.getElementsByTagName(tag)。- 實現元素選擇的最簡單方法是使用
document.querySelector('tag'/ '.class'/ '#id').document.querySelector('tag'/ '.class'/ '#id')。 您可以在這里參考更多有關相同的內容。
passType() ，此處驗證基於您定義的密碼數組的輸入密碼， 只有在用戶輸入密碼並單擊登錄按鈕后才需要調用。
為了實現這一點，您必須將 submit事件綁定到
EventListener。 這可以通過使用document.querySelector('form').addEventListener('submit', passType);來實現document.querySelector('form').addEventListener('submit', passType);
EventListener保持冒泡，為了防止它，您需要使用event.preventDefault() 牢記這一切，我相信這將解決您的問題。 這是經過糾正的代碼段：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Password - form</title> </head> <body> <form> <label>Password</label> <input type="password" id="passid"/> <br> <input type="submit" value="Sign In"/> </form> <script> var attemptCount = 0; function passType(event) { event.preventDefault(); var enteredValue = document.querySelector('form').querySelector('#passid').value; var password = ['p1', 'p2', 'p3', 'p4', 'p5']; if (password.indexOf(enteredValue) > -1) { alert("That's great! Thank you!"); } else { attemptCount++; alert('Wrong, try again'); if (attemptCount <= 1) { alert("It's wrong, you have one more try..."); document.querySelector('form').querySelector('#passid').value = ''; } else { alert('Get out now!'); window.close(); } } } document.querySelector('form').addEventListener('submit', passType); </script> </body> </html>
隨意詢問您對此有任何疑問。
我想你問的是如何獲得用戶輸入密碼字段的值。 那是document.getElementById("passid").value 。 所以你會寫：
if (password.indexOf(document.getElementById("passid").value) > -1) {
alert("That's great! Thank you!");
}
請注意，在腳本的頂級調用passType()將不起作用。 這將在首次加載頁面時運行，而不是等待用戶填寫密碼。 您應該在用戶提交表單時調用它。 你應該做：
document.querySelector("form").addEventListener("submit", passAll);
您還應該更改passAll()函數，以便在用戶輸入錯誤密碼時調用Event.preventDefault() ，以防止提交表單。 看到
在addEventListener提交仍然提交表單時返回false？
此外，在客戶端Javascript中檢查密碼不是很安全。 沒有什么能阻止用戶修改腳本或繞過腳本。 應在服務器上檢查密碼，以便用戶無法覆蓋密碼。
如何使用查詢選擇器訪問表單？
let frm = document.querySelector('form');
然后聽取它的submit事件。
frm.addEventListener('submit', passType);
如何訪問輸入密碼？
您需要更改您的功能。 首先將以下內容添加到“passType”函數的頂部。 以下代碼段將用戶輸入保存到變量pass 。
let p = frm.querySelector('#passid');//Get the DOM node
let pass = p.value;//Get the input value
現在將if (password.indexOf > -1)修改為if (password.indexOf(pass) > -1)以檢查實際輸入。
DEMO
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Password - form</title> </head> <body> <form> <label>Password</label> <input type="password" id="passid" /> <br> <input type="submit" value="Sign In" /> <!-- We also have input type = "button" and events for both >>> onsubmit & onclick. --> </form> <script> function passType() { let p = frm.querySelector('#passid'); let pass = p.value; var password = ["p1", "p2", "p3", "p4", "p5"]; if (password.indexOf(pass) > -1) { alert("That's great! Thank you!"); } else { alert("Wrong, try again"); if (password.indexOf(pass) > -1) { alert("It's wrong, you have one more try..."); } else { alert("Get out now!"); window.close(); } } } let frm = document.querySelector('form'); frm.addEventListener('submit', passType); </script> </body> </html>
如果您正在尋找在表單提交時使用密碼字段執行某些操作的方法，您可能需要以下內容：
// listen for submit events on the form document.querySelector('form').addEventListener('submit', doSubmit); // our form submit handler function doSubmit(event) { // prevent submission event.preventDefault(); event.stopPropagation(); // get the password field // event.target is the form // could alternatively query by id using document.getElementById('passid') var passwordField = event.target.querySelector('#passid'); // do something with the field or its value console.log(passwordField.value); return false; }
<form> <label>Password</label> <input type="password" id="passid" /> <input type="submit" value="Sign In" /> </form>
如何使用`document.querySelector（）`訪問ExtJS元素？
[英]How can I access ExtJS elements using `document.querySelector()`?
我不能添加超過 2 個 document.querySelector().addEventListener()
[英]I can't add document.querySelector().addEventListener() more than 2
如何根據“color”屬性獲取帶有“document.querySelector”的特定元素？
[英]How can i get specific element with 'document.querySelector' according to 'color' property?
如何將 document.querySelector 用於 select 這個 class 名稱，其中有空格？
[英]How can I use document.querySelector to select this class name with a space in it?
如何對具有 document.querySelector 的 function 進行單元測試？
[英]How do i unit test a function that has document.querySelector?
如何使用document.querySelector使用document.querySelector從節點中選擇文本的特定輸出？
[英]How do I use document.querySelector to select a particular output of text from a node using document.querySelector?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.