我一直在尝试做一个副业来学习网站编码和什么不。
我现在想做的是对表单进行简单的验证，并在不满足所需规则时显示错误消息。
this is my login.html
<html>
<title>Login</title>
<head>
<link rel="stylesheet" href="csslogin.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src= "js/jquery.validate.js"></script>
<script src= "js/loginform.js"></script>
<head>
<body>
<h1 id="title"> Login Form </h1>
<div id="firstblock">
<form id= loginform>
<label id="formfield">Username:</label><br>
<input type="text" name="username" placeholder="Enter your Username"><br>
<label id="formfield">Password:</label><br>
<input type="password" name="password" placeholder="Enter your Password"><br>
<input type="submit" id="submitbtn" value="Login"><br>
<input type="checkbox" id="rembme" name="rememberme" value="true">
<label type="text" id="remblabel" style="">Remember me</label>
</form>
</div>
</body>
</html>
这是我的loginfo .js
$(document).ready(function() {
$('#loginform').validate({
rule:{
username:{
required: true,
minlength: 5
},
password:{
required: true,
}
},
messages:{
username: {
required: "Please Enter a Username",
minlength: "Your Username Must Be At Least 5 Characters"
},
password: {
required: "Please Enter a Password:",
}
}
})
})
当把所需的字段在html文件输入它工作正常，但我想学习如何链接它像这样。我不知道如何检查js是否被正确导入，但截至目前，我的loginfo .js甚至不使用我设置的规则或消息，这让我相信我要么链接错误的js，我尝试了多个不同的，或者我在html文件中缺少某种类型的行链接我的js文件。
很抱歉，我在很长一段时间没有在这里发布混乱的帖子，我不确定如何正确地格式化它，所以我只是把所有东西都扔进去，我认为有人需要回答。
一些您想要的验证可以使用html快速实现。
属性:"required"one_answers"minlength">
<form id= loginform>
<label for="username">Username:</label><br>
<input id="username" type="text" name="username" placeholder="Enter your Username" required minlength="5"><br>
<label for="password">Password:</label><br>
<input id="password" type="password" name="password" placeholder="Enter your Password" required><br>
<input type="submit" id="submitbtn" value="Login"><br>
<input type="checkbox" id="rembme" name="rememberme" value="true">
<label for="rembme" type="text" style="">Remember me</label>
还要注意的是，我把id放到了所有的输入标签中，然后用属性"for"链接了每个标签。这样，如果您单击标签，与之相关的输入将获得焦点。这是一个很好的实践
现在，通过上面的代码，您可以获得浏览器为用户提供的验证消息。如果你还想自己定制按摩，可以看看这篇文章最后，如果你还想用jquery，看看这段代码
最佳实践是在HTML文件末尾的标记之前插入脚本。你的jquery版本是旧的，但你的主要问题是jquery验证配置中的一个错别字。您必须使用"规则"，而不是"规则"。https://jqueryvalidation.org/validate/
<HTML>
<head>
<title>Login</title>
<link rel="stylesheet" href="csslogin.css" />
</head>
<body>
<h1 id="title">Login Form</h1>
<div id="firstblock">
<form id="loginform" method="get" action="">
<label id="formfield">Username:</label><br />
<input type="text" name="username" placeholder="Enter your Username" /><br />
<label id="formfield">Password:</label><br />
<input type="password" name="password" placeholder="Enter your Password" /><br />
<input type="submit" id="submitbtn" value="Login" /><br />
<input type="checkbox" id="rembme" name="rememberme" value="true" />
<label type="text" id="remblabel" style="">Remember me</label>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
<script>
$(document).ready(function() {
$("#loginform").validate({
rules: {
username: {
required: true,
minlength: 5,
},
password: {
required: true,
},
},
messages: {
username: {
required: "Please Enter a Username",
minlength: "Your Username Must Be At Least 5 Characters",
},
password: {
required: "Please Enter a Password:",
},
},
});
});
</script>
</body>
</html>