javascript - 带有 Javascript 的 asp.net 中的验证表单
问题描述
我刚刚用 MVC 在 asp.net 中制作了我的第一个表单 | 使用 Jquery Ajax
当客户端填写字段时,我也有成功和不成功的消息
表格代码:
<div class="modal fade" id="ShowModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal">×</a>
<h4>Registration form</h4>
<div id="message1">
<div class="alert alert-success">
<span class="glyphicon glyphicon-ok"></span><strong>Success Message! Your Registration Is Complete</strong>
</div>
</div>
<div id="message2">
<div class="alert alert-danger">
<span class="glyphicon glyphicon-remove"></span><strong>Error Message! Your Registration Is Not Complete</strong>
</div>
</div>
<div class="modal-body">
<form id="Registration">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input class="form-control" type="text" name="Username" id="user" placeholder="User" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input class="form-control" type="email" name="Email" id="Email" placeholder="Email" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input class="form-control" type="password" name="Password" id="Password" placeholder="Password" />
</div>
</div>
</form>
<div class="form-group">
<button class="btn btn-info form-control" type="submit" onclick="SaveForm()"><i class="glyphicon glyphicon-registration-mark"> </i>Submit</button>
</div>
</div>
</div>
</div>
</div>
消息的 Javascript 代码
<script>
<script>
function SignUp() {
$("#ShowModal").modal();
$("#message1").hide();
$("#message2").hide();
}
function SaveForm() {
var name = $("#user").val();
var pwd = $("#Password").val();
var email = $("#Email").val();
if (name == "" || pwd == "" || email == "") {
$("#message1").hide();
$("#message2").show();
return false;
}
var data = $("#Registration").serialize();
$.ajax({
type: "post",
data: data,
url: "/Register/saveData",
success: function (result) {
$("#message1").show();
$("#message2").hide();
$("#Registration")[0].reset();
}
});
}
</script>
有一种简单的方法可以验证电子邮件和密码吗?对于电子邮件需要是@,密码需要是 6-12 个字符。如果可能的话,我可以在我的代码中编辑我的错误消息 >> id="message2。
谢谢 :)
解决方案
对于简单的验证,您可以使用纯 JavaScript 方法包括:
// email simple validation
if ( email.includes('@') && email.includes('.') ) {
// email is valid
} else {
// error message
}
// password validation
if ( password.length >= 6 && password.length <= 12 ) {
// password have the desired length
} else {
// error
}
推荐阅读
- html - 将 box-shadow 应用于 Bootstrap 4 卡片组件
- python - 仅包含 2 个输入列表之间共有元素的列表(如果没有重复,我无法做到)
- kotlin - How to sort arraylist of ZonedDateTime in Kotlin?
- javascript - 使用 JavaScript 上传文件时的文件类型和大小验证
- kotlin - Kotlin - 如何检查矩阵中是否存在字符?
- c++ - 在 Linux 中从 C++ 向 Mysql 中插入数据时遇到问题
- flutter - 保持按钮固定在屏幕底部,但仅当上述列表高度小于设备高度时
- azure-functions - 带有事件中心触发器的 Azure 函数写入重复消息
- node.js - nodejs greenlock-express不会创建证书
- python - request.get() 中的 auth 关键字有什么作用?