Javascript 试图为用户名和密码创建登录表单时，表单中出现了一些问题_Javascript_Html_Forms_Validation_Login

Javascript 试图为用户名和密码创建登录表单时，表单中出现了一些问题

javascript html forms validation login

Javascript 试图为用户名和密码创建登录表单时，表单中出现了一些问题,javascript,html,forms,validation,login,Javascript,Html,Forms,Validation,Login,我正在尝试开发带有用户名和密码的登录表单，必须进行验证并符合某些要求。我正在努力处理表单，不确定我缺少了什么，，，而且登录按钮没有显示为按钮。谢谢你的帮助 <body> <form onlogin="return checkForm(this);"> <p><input type="text" name="username" placeholder="Enter Username"></p> <p><

我正在尝试开发带有用户名和密码的登录表单，必须进行验证并符合某些要求。我正在努力处理表单，不确定我缺少了什么，，，而且登录按钮没有显示为按钮。谢谢你的帮助

<body>

<form onlogin="return checkForm(this);">
    <p><input type="text" name="username" placeholder="Enter Username"></p>
    <p><input type="password" name="pwd1" placeholder="Enter Password"></p>
    <p><button type="login"placeholder="Login"></p>
    <p> <a href="#">Forgot your password?</a></p>
</form>

<script type="text/javascript">

function checkForm(form)
{
    if(form.username.value == "") {
        alert("Error: Username cannot be blank!");
        form.username.focus();
        return false;
    }
    re = /^\w+$/;
    if(!re.test(form.username.value)) {
        alert("Error: Username must contain only letters, numbers and underscores!");
        form.username.focus();
        return false;
    }

    if(form.pwd1.value != "") {
        if(form.pwd1.value.length < 6) {
            alert("Error: Password must contain at least six characters!");
            form.pwd1.focus();
            return false;
        }
        if(form.pwd1.value == form.username.value) {
            alert("Error: Password must be different from Username!");
            form.pwd1.focus();
            return false;
        }
        re = /[0-9]/;
        if(!re.test(form.pwd1.value)) {
            alert("Error: password must contain at least one number (0-9)!");
            form.pwd1.focus();
            return false;
        }
        re = /[a-z]/;
        if(!re.test(form.pwd1.value)) {
            alert("Error: password must contain at least one lowercase letter (a-z)!");
            form.pwd1.focus();
            return false;
        }
        re = /[A-Z]/;
        if(!re.test(form.pwd1.value)) {
            alert("Error: password must contain at least one uppercase letter (A-Z)!");
            form.pwd1.focus();
            return false;
        }
    } else {
        alert("Error: Please check that you've entered and confirmed your password!");
        form.pwd1.focus();
        return false;
    }

    alert("You entered a valid password: " + form.pwd1.value);
    return true;
}






功能检查表（表格）
{
如果（form.username.value==“”）{
警报（“错误：用户名不能为空！”）；
form.username.focus（）；
返回false；
}
re=/^\w+$/；
if（！re.test（form.username.value））{
警告（“错误：用户名必须只包含字母、数字和下划线！”）；
form.username.focus（）；
返回false；
}
如果（form.pwd1.value！=“”）{
如果（表pwd1.value.length<6）{
警报（“错误：密码必须至少包含六个字符！”）；
form.pwd1.focus（）；
返回false；
}
if（form.pwd1.value==form.username.value）{
警报（“错误：密码必须与用户名不同！”）；
form.pwd1.focus（）；
返回false；
}
re=/[0-9]/；
如果（！重新测试（表pwd1.值））{
警报（“错误：密码必须至少包含一个数字（0-9）！”；
form.pwd1.focus（）；
返回false；
}
re=/[a-z]/；
如果（！重新测试（表pwd1.值））{
警告（“错误：密码必须至少包含一个小写字母（a-z）！”；
form.pwd1.focus（）；
返回false；
}
re=/[A-Z]/；
如果（！重新测试（表pwd1.值））{
警告（“错误：密码必须至少包含一个大写字母（A-Z）！”；
form.pwd1.focus（）；
返回false；
}
}否则{
警报（“错误：请检查您是否输入并确认了密码！”）；
form.pwd1.focus（）；
返回false；
}
警报（“您输入了有效密码：+form.pwd1.value”）；
返回true；
}

`按钮未显示的原因是没有关闭标签。另外，不要忘记在开始和结束标记之间添加文本

<body>
   <form id="form">
     <p><input type="text" name="username" placeholder="Enter Username"></p>
     <p><input type="password" name="pwd1" placeholder="Enter Password"></p>
     <p><button type="login"placeholder="Login" onclick="myform()">Login</button></p>
     <p><a href="#">Forgot your password?</a></p>
   </form>




登录

更改了html并添加了onclick事件来调用函数

function myform(){
var form = document.getElementById("form");
checkForm(form);
}

function checkForm(form)
 {
if(form.username.value == "") {
    alert("Error: Username cannot be blank!");
    form.username.focus();
    return false;
}
re = /^\w+$/;
if(!re.test(form.username.value)) {
    alert("Error: Username must contain only letters, numbers and underscores!");
    form.username.focus();
    return false;
}

if(form.pwd1.value != "") {
    if(form.pwd1.value.length < 6) {
        alert("Error: Password must contain at least six characters!");
        form.pwd1.focus();
        return false;
    }
    if(form.pwd1.value == form.username.value) {
        alert("Error: Password must be different from Username!");
        form.pwd1.focus();
        return false;
    }
    re = /[0-9]/;
    if(!re.test(form.pwd1.value)) {
        alert("Error: password must contain at least one number (0-9)!");
        form.pwd1.focus();
        return false;
    }
    re = /[a-z]/;
    if(!re.test(form.pwd1.value)) {
        alert("Error: password must contain at least one lowercase letter (a-z)!");
        form.pwd1.focus();
        return false;
    }
    re = /[A-Z]/;
    if(!re.test(form.pwd1.value)) {
        alert("Error: password must contain at least one uppercase letter (A-Z)!");
        form.pwd1.focus();
        return false;
    }
} else {
    alert("Error: Please check that you've entered and confirmed your password!");
    form.pwd1.focus();
    return false;
}

alert("You entered a valid password: " + form.pwd1.value);
return true;
}
</body>

函数myform（）{
var form=document.getElementById（“表单”）；
支票（表格）；
}
功能检查表（表格）
{
如果（form.username.value==“”）{
警报（“错误：用户名不能为空！”）；
form.username.focus（）；
返回false；
}
re=/^\w+$/；
if（！re.test（form.username.value））{
警告（“错误：用户名必须只包含字母、数字和下划线！”）；
form.username.focus（）；
返回false；
}
如果（form.pwd1.value！=“”）{
如果（表pwd1.value.length<6）{
警报（“错误：密码必须至少包含六个字符！”）；
form.pwd1.focus（）；
返回false；
}
if（form.pwd1.value==form.username.value）{
警报（“错误：密码必须与用户名不同！”）；
form.pwd1.focus（）；
返回false；
}
re=/[0-9]/；
如果（！重新测试（表pwd1.值））{
警报（“错误：密码必须至少包含一个数字（0-9）！”；
form.pwd1.focus（）；
返回false；
}
re=/[a-z]/；
如果（！重新测试（表pwd1.值））{
警告（“错误：密码必须至少包含一个小写字母（a-z）！”；
form.pwd1.focus（）；
返回false；
}
re=/[A-Z]/；
如果（！重新测试（表pwd1.值））{
警告（“错误：密码必须至少包含一个大写字母（A-Z）！”；
form.pwd1.focus（）；
返回false；
}
}否则{
警报（“错误：请检查您是否输入并确认了密码！”）；
form.pwd1.focus（）；
返回false；
}
警报（“您输入了有效密码：+form.pwd1.value”）；
返回true；
}

请参阅工作版本

您的按钮无法工作，因为它没有正确写入。您需要添加正文和结束标记。onlogin事件不是DOM事件，因此不能期望它触发。改为向按钮添加onclick事件。