【发布时间】：2019-05-25 14:51:07
【问题描述】：
我在 Express 应用中有一个注册表单。我在前端使用引导程序。我正在使用 jQuery 验证插件来验证姓名、电子邮件、电话号码等格式，但它不起作用。这是页面的 HTML 布局。
$("#modalForm").validate({
rules: {
nameModal: {
required: true,
minlength: 8
},
emailModal: {
required: true,
minlength: 5
},
numberModal: {
required: true,
minlength: 12
},
},
messages: {
nameModal: {
required: "Please enter name",
minlength: "Your data must be at least 8 characters"
},
emailModal: {
required: "Please enter email",
minlength: "Your data must be at least 5 characters"
},
numberModal: {
required: "Please enter number",
minlength: "Number should be atleast 9 character"
},
}
});body {
background-color: whitesmoke;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding: 1%;
}
.form-links {
text-align: center;
margin-bottom: 50px;
padding-bottom: 4px;
}
.form-links a {
color: #fff;
}
.formbtn{
background-color: #5d5d5d;
border-color: #d6d6c2;
font-size: 20px;
}
div.login{
color: #5d5d5d;
background-color: #d6d6c2;
border: 1px solid #333;
margin-right: auto;
margin-left: auto;
margin-top: 200px;
margin-bottom: 8%;
padding: 4%;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.float-right a{
color: #5d5d5d;
}
.float-right a:hover {
color: white;
}
/* The signup modal code */
.signup{
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.modalcolor{
color: #5d5d5d;
background-color: #d6d6c2;
border: 1px solid #333;
padding: 2%;
border-radius: 10px;
}<head>
<link rel="stylesheet" href="css/login.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
<script
src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.0/dist/jquery.validate.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="js/myJs/login.js"></script>
</head>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 login">
<form method="POST">
<h3>Gramleys</h3>
<div class="form-group">
<label for="InputEmail">Email address</label>
<input type="email" class="form-control" name="email" placeholder="Email" required id="emailLogin" />
</div>
<div class="form-group">
<label for="InputPassword">Password</label>
<input type="password" class="form-control" name="password" placeholder="Password" id="loginPass" />
</div>
<br>
<button type="submit" name="login" class="btn btn-lg btn-primary formbtn">Login</button>
<button type="button" name="create" class="btn btn-lg btn-primary formbtn" data-toggle="modal" data-target="#exampleModal">Create</button>
<br>
<div class="float-right">
<a href="#" class="float-right">Forgot password</a>
</div>
</form>
</div>
</div>
</div>
<!-- Button trigger modal -->
<!-- Modal -->
<div class="modal fade signup" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content modalcolor">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Signup</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<form method="POST" role="form" id="modalForm">
<div class="form-group">
<label for="InputEmail">Email address</label>
<input type="email" class="form-control" name="emailModal" placeholder="Email" id="emailModal" required/>
</div>
<div class="form-group">
<label for="InputName">Full Name</label>
<input type="text" class="form-control" name="nameModal" placeholder="Name" required id="nameModal" required/>
</div>
<div class="form-group">
<label for="InputPassword">Select Password</label>
<input type="password" class="form-control" name="passModal" placeholder="Password" id="passModal" />
</div>
<div class="form-group">
<label for="InputNumber">Mobile Number</label>
<input type="text" class="form-control" name="numberModal" min="1" max="10" placeholder="Mobile Number" required id="numberModal">
</div>
<div class="row">
<div class="form-group d-inline col-md-4 col-lg-4">
<label for="InputAge">Age</label>
<input style="display: block;"type="number" class="form-control " name="ageModal" min="10" max="100" placeholder="Age" required id="ageModal">
</div>
<div class="form-group d-inline col-md-4 col-lg-4">
<label for="InputAge">Weight(kg)</label>
<input style="display: block;" type="number" class="form-control " name="weightModal" min="30" max="150" placeholder="Weight" required id="weightModal">
</div>
<div class="form-group d-inline col-md-4 col-lg-4">
<label for="InputAge">Height(cms)</label>
<input style="display: block;" type="number" class="form-control " name="heightModal" min="100" max="200" placeholder="Height" required id="heightModal">
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-secondary">Create</button>
</div>
</div>
</div>
</div>为什么 jQuery 验证器不起作用？我一直在努力解决它，但它不起作用，请帮助我解决这个问题。我已经查看了有关 stackoverflow 的其他答案，但似乎没有一个可以解决此问题。这是我从上面的 js 代码How to correctly validate a modal form 得到的答案是因为 express 还是 node 环境，任何帮助都将受到高度赞赏。
它在这里工作，但在我的本地节点服务器上不起作用 boostrap 是在应用程序中使用 npm 安装的。enter image description here 如图所示，没有显示错误消息。
【问题讨论】：
-
预期的行为是什么？
-
如果用户输入的名称或电子邮件小于所需长度且格式错误，则模式会更新并显示错误消息。就像在这个例子中一样stackoverflow.com/a/35001667/7419457
标签： javascript jquery node.js twitter-bootstrap express