我有一个带有大量用户输入字段的 HTML5 Web 应用程序，我想在将这些字段发送到服务器之前在 javascript 中对这些字段进行一些客户端验证。容易吧？只需使用 JQuery 验证插件 --- http://jqueryvalidation.org/
但有一个问题。我的网络应用程序没有表单。 HTML 中的任何地方都没有提交。相反，每个用户可更改的元素都有一个 JQuery 更改处理程序，当用户更改其中一个元素的值时，就会进行 AJAX 调用。 （这种非标准的用户交互架构对这个应用很有意义。）
我想在 AJAX 调用之前验证该字段，并使用 JQuery 验证插件来执行此操作。但我不知道怎么做。
是否可以使用 JQuery 验证插件而无需在任何地方提交？我该怎么做？还是另一种方法更好？
【问题讨论】：
首先，最重要的是，您必须将输入元素包装在<form></form> 标签中，以便jQuery Validate 插件运行。但是，不需要提交按钮。
其次，您可以使用the .valid() method 以编程方式触发任何或所有元素的有效性测试，而无需提交按钮。
$(document).ready(function() {
$('#myform').validate({ // initialize the plugin on your form.
// rules, options, and/or callback functions
});
// trigger validity test of any element using the .valid() method.
$('#myelement').valid();
// trigger validity test of the entire form using the .valid() method.
$('#myform').valid();
// the .valid() method also returns a boolean...
if ($('#myform').valid()) {
// something to do if form is valid
}
});
【讨论】：
您必须将字段包装在表单中才能使用验证插件，并且无论如何它都是good practice。此外，您可以通过编程调用插件的验证并检查表单是否有效：
var $form = $('#your_form'),
validator = $form.validate({...});
//validate the form
validator.form();
//check if the form is valid
if ($form.valid()) {
//form is valid
}
更多选项，请查看docs。
【讨论】：
$('#your_form').validate() 和$('#your_form').valid() 时，保存几个字符的附加行似乎很冗长。 （另外，你根本不需要打电话给validator.form()。）
validate 函数返回的验证器上调用，所以如果需要，最好保留对它的引用。此外，总是重新查询 DOM 以获取多次引用的元素是一种不好的做法。
.valid() 的可用方法无需跟踪.validate()。此外，我只是不确定 jQuery 不第二次查看 DOM 的好处是否值得 40 多个额外字符。无论如何，我想我们正在分裂头发，因为这里在技术上没有任何问题。
我创建了一个小帮手。只需添加这行代码，然后您就可以在任何地方使用任何按钮。
$("body [data-submit-form]").on("click", function (event) {
$("#" + $(event.target).data('submit-form')).valid();
});
<form id="component-form">
</form>
<button data-submit-form="component-form">Button</button>
说明：jquery 代码侦听具有属性“data-submit-form”的元素的所有点击，在侦听器中提取数据属性，然后我触发匹配表单上的有效方法。
注意：如果您想在表单有效的情况下提交表单，请使用此代码：
$("body [data-submit-form]").on("click", function (event) {
var form = $("#" + $(event.target).data('submit-form'));
if (form.valid()) {
form.submit();
}
});
【讨论】：
将此代码用于两个示例字段电子邮件和密码：-
<head>
<script src="jquery-3.4.0.min.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#txt1{
margin-left:23px;
border-radius: 12px;
}
#txt2{
border-radius: 12px;
}
#btn1{
border-radius: 12px;
width: 8em; height: 2em;
cursor:pointer;
background-color: #008CBA;
}
#lbl1,#lbl2{
font-family: "Comic Sans MS", cursive, sans-serif;
color:red;
}
</style>
</head>
<body>
<div class="container">
<form>
<center> <label id="lbl1">Email: </label><input type="text" id="txt1"></center></input><br>
<center><label id="lbl2">Password: </label><input type="password" id="txt2"></center></input>
<br><br>
<center><input type="button" id="btn1" name="btn1" value="Login" style="color:darkblue;font-size:15px;"></center></input>
</form>
</div>
<script>
$(document).ready(function () {
$('#btn1').click(function () {
var email = $('#txt1').val();
var pass = $('#txt2').val();
if (email == '') {
$('input[type="text"]').css("border", "2px solid red");
$("#txt1").parent().after("<div class='validation' style='color:red;margin-left:93px;'><center>Please enter email address</center></div>");
alert("hi");
}
else {
}
if (pass == '') {
$('input[type="password"]').css("border", "2px solid red");
$("#txt2").parent().after("<div class='validationp' style='color:red;margin-left:70px;'><center>Please enter password</center></div>");
}
$('input[type="text"]').keydown(function () {
$('input[type="text"]').css("border", "");
$(".validation").remove();
});
$('input[type="password"]').keydown(function () {
$('input[type="password"]').css("border", "");
$(".validationp").remove();
});
});
});
</script>
</body>
</html>
【讨论】：
只需使用jquery 调用表单提交方法
$("#formId").submit()
这将验证整个表单，就像我们单击提交按钮时一样
【讨论】：