完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function validateForm(){
var username = document.getElementById("username");
var username_value=username.value
var password = document.getElementById("password");
var password_value=password.value
var temp=/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$/
if(username_value==null || username_value=="" || !temp.test(username_value)){
alert('用户名未输入或用户名不符合要求')
}else if(password_value==null || password_value=="" ||!temp.test(password_value)){
alert('密码未输入或密码不符合要求')
}else if(temp.test(username_value)&& temp.test(password_value)){
alert('登录成功')
}
}
</script>
</head>
<body>
<form id="loginForm">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required /><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required /><br>
<input type="button" value="提交" onclick="validateForm();" />
</form>
</body>
</html>
代码解释:
- 在
<script>
标签中定义了一个名为validateForm()
的JavaScript函数。该函数用于验证用户输入的用户名和密码是否符合要求,并弹出相应的提示框。 - 表单部分使用
<form>
标签定义,id
属性为"loginForm",该属性可以用于其他操作中。 - 在表单内部,使用
<label>
标签标注了用户名和密码的输入框,并且使用<input>
标签创建了对应的输入框。其中,用户名输入框使用类型为"text",密码输入框使用类型为"password",并且都设置为必填字段,通过required
属性来实现。 - 最后的
<input>
标签是一个提交按钮,在点击按钮时会调用validateForm()
函数进行表单验证。
效果: