英文:
Moving on after "password and re-typed password" verification
问题
I am writing an application on “password and re-typed password” verifying routine.
After the [submit] of the necessary details, the function “check_Password(form)” is activated.
If (not …) then {…}.
If (true), {show “ok” via window.alert() with a ‘true’ returned value.}
Then, I want to move on to the next stage by saying
<a href="mainmenu.html" onClick="checkPassword()">Move on to the next stage</a>
However, the last statement is always on even before the test. How can I hide it and show it only when the verification is ok.
[Added]
<script>
function myFunction()
{location.replace("http://.../index.html")}
</script>
<button onClick="myFunction()">Re-direction</button>```
<details>
<summary>英文:</summary>
I am writing an application on “password and re-typed password” verifying routine.
After the [submit] of the necessary details, the function “check_Password(form)” is activated.
If (not …) then {…}.
If (true), {show “ok” via window.alert() with a ‘true’ returned value.}
Then, I want to move on to the next stage by saying
```<a href="mainmenu.html" onClick="checkPassword()">Move on the next stage</a>```
However, the last statement is always on even before the test. How can I hide it and show it only when the verification is ok.
----------
[Added]
<script>
function myFunction()
{location.replace("http://.../index.html")}
</script>
<button onClick="myFunction()">Re-direction</button>```
答案1
得分: 1
我认为要解决这个问题，你可以初始隐藏锚点标签，然后根据验证过程的成功或失败来动态触发它，就像这样：
Html:
<!-- 为语句添加占位符元素 -->
<div id="next-stage" style="display: none;">
<a href="mainmenu.html">继续下一阶段</a>
</div>
<!-- 添加一个按钮来触发密码验证 -->
<button onclick="checkPassword()">提交</button>
JavaScript:
就函数方面而言，考虑到你已经有了验证密码完整性的逻辑，你可以像这样做：
注意： 请记住，我为了测试下面的代码片段，硬编码了密码验证，你可能需要根据用例编写自己的逻辑。
function checkPassword() {
// 执行密码验证
var isPasswordValid = true; // 这里是你的密码验证逻辑
if (isPasswordValid) {
// 显示下一阶段的语句
document.getElementById("next-stage").style.display = "block";
window.alert("密码验证成功！");
} else {
window.alert("密码验证失败！");
}
}
希望这对你有所帮助。
英文:
I think to resolve this issue what you can do is initially hide the anchor tag and dynamically trigger it based on your verification process success or failure like this:
Html:
<!-- Add a placeholder element for the statement -->
<div id="next-stage" style="display: none;">
<a href="mainmenu.html">Move on to the next stage</a>
</div>
<!-- Add a button to trigger the password verification -->
<button onclick="checkPassword()">Submit</button>
JavaScript:
On the function side of things given that you already have the logic to verify the integrity of the password, you can do something like this:
Note: Just keep in mind that the password verification is hardcoded by me to test the logic in the below snippet, u might need to write your own logic based on the use case.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function checkPassword() {
// Perform the password verification
var isPasswordValid =true // Your password verification logic here
if (isPasswordValid) {
// Show the next stage statement
document.getElementById("next-stage").style.display = "block";
window.alert("Password verification successful!");
} else {
window.alert("Password verification failed!");
}
}
<!-- language: lang-html -->
<!-- Add a placeholder element for the statement -->
<div id="next-stage" style="display: none;">
<a href="mainmenu.html">Move on to the next stage</a>
</div>
<!-- Add a button to trigger the password verification -->
<button onclick="checkPassword()">Submit</button>
<!-- end snippet -->
答案2
得分: 0
我很抱歉，但我不太明白这个问题。
也许你正在寻找类似这样的东西。
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
$(document).ready(function(){
$('#btn').attr('disabled',true);
$('#rpw').keyup(function(){
if($(this).val().length !=0)
$('#btn').attr('disabled', false);
else
$('#btn').attr('disabled',true);
})
$("#btn").click(function(){
$("#pw").val() == $("#rpw").val() ?
(window.alert('Successful!'),
$("#moveToNext").css("display", "block"))
: (window.alert('Password not match!'),
$("#moveToNext").css("display", "none"))
});
});
<!-- language: lang-html -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<label>Password: </label><input id="pw" type="password">
<br>
<label>Re-type Password: </label><input id="rpw" type="password">
<br>
<button id="btn">Check</button>
<div style="display:none;" id="moveToNext">
<a href="mainmenu.html" onClick="checkPassword()">Move on the next stage</a>
</div>
<!-- end snippet -->
英文:
I'm sorry, but I don't quite understand the question.
Maybe you are looking for something like this.
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
$(document).ready(function(){
$('#btn').attr('disabled',true);
$('#rpw').keyup(function(){
if($(this).val().length !=0)
$('#btn').attr('disabled', false);
else
$('#btn').attr('disabled',true);
})
$("#btn").click(function(){
$("#pw").val() == $("#rpw").val() ?
(window.alert('Successful!'),
$("#moveToNext").css("display", "block"))
: (window.alert('Password not match!'),
$("#moveToNext").css("display", "none"))
});
});
<!-- language: lang-html -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<label>Password: </label><input id="pw" type="password">
<br>
<label>Re-type Password: </label><input id="rpw" type="password">
<br>
<button id="btn">Check</button>
<div style="display:none;" id="moveToNext">
<a href="mainmenu.html" onClick="checkPassword()">Move on the next stage</a>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论