如何使用javascript进行HTML登录页面验证？ [英] How to make HTML login page validation using javascript ?
问题描述
HI我是新手编码。
我用html设计了登录页面。我试图使用JavaScript验证电子邮件和密码。实际上，我的问题是当我们输入电子邮件和密码时，如果这些凭据不匹配，它应显示电子邮件或密码下面的错误消息，如您输入的无效电子邮件或密码。注意：我不想弹出消息。
我想要客户端代码。
我尝试了什么：
我尝试过使用JavaScript代码，但我只收到电子邮件密码模式验证。
您可以使用span标记作为占位符以编程方式显示消息。请参阅示例：
< ！DOCTYPE html >
< html >
< head >
< 脚本 >
function validateForm（）{
var x = document .forms [ form1] [ fname]。value;
if （x == null || x == ）{
// 使用消息填写占位符
document .getElementById（ errorMsg）。innerHTML = *名称必须填写;
return false ;
}
}
< / script >
< / head >
< 正文 >
< < span class =code-leadattribute> form name = form1 onsubmit = return validateForm（） > ;
名称：< 输入 type = text 名称 = < span class =code-keyword> fname >
< br >
<！ - - 占位符 - >
< span id = errorMsg style = color：red > < / span >
< br >
< 输入 type = 提交 value = 提交 >
< / form >
< / body > < /跨度>
< / html >
HI All I am newbie to coding.
I have designed login page using html. I was trying to validate the email and password using JavaScript. Actually, my problem is when we enter email and password if these credentials didn't match it should show error message below email or password like "invalid email or password you entered". Note: I don't want pop up message.
I want client side code for that.
What I have tried:
I have tried using JavaScript code but i am getting only email password pattern validations.
You can use a span tag as placeholder to display a message programmatically. See example:
<!DOCTYPE html> <html> <head> <script> function validateForm() { var x = document.forms["form1"]["fname"].value; if (x == null || x == "") { // fill out the placeholder with a message document.getElementById("errorMsg").innerHTML = "*Name must be filled out"; return false; } } </script> </head> <body> <form name="form1" onsubmit="return validateForm()"> Name: <input type="text" name="fname"> <br> <!-- placeholder --> <span id="errorMsg" style="color:red"></span> <br> <input type="submit" value="Submit"> </form> </body> </html>
这篇关于如何使用javascript进行HTML登录页面验证？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
