Javascript “表单验证”按钮，而不提交表单

我有一个表单，我想在不提交表单的情况下检查验证（如果输入正确）。这怎么可能

本例中的验证如下所示： 如果用户输入和作为名字，输入jkp作为姓氏，并单击验证按钮，则document.write功能将在不提交表单的情况下打印成功

$（“#myform”）.submit（函数（事件）{
变量名称=$（“#fname”）.val（）；
var lname=$（“#lname”）.val（）；
如果（名称==”和“&&lname==”jkp”）
{document.write（“正确答案”）；}
else{document.write（“回答不正确”）；}
});
输入[type=text]，选择{
宽度：100%；
填充：12px 20px；
利润率：8px0；
显示：内联块；
边框：1px实心#ccc；
边界半径：4px；
框大小：边框框；
}
输入[类型=提交]{
宽度：100%；
背景色：#4CAF50；
颜色：白色；
填充：14px 20px；
利润率：8px0；
边界：无；
边界半径：4px；
光标：指针；
}
输入[类型=提交]：悬停{
背景色：#45a049；
}
div{
边界半径：5px；
背景色：#F2F2；
填充：20px；
}

名字
姓
如果验证失败，您只需将
event.preventDefault（）
添加到提交事件：


$（“#myform”）.submit（函数（事件）{
变量名称=$（“#fname”）.val（）；
var lname=$（“#lname”）.val（）；
如果（名称==”和“&&lname==”jkp”）{
警惕（“成功”）；
}
否则{
event.preventDefault（）；
警报（“失败”）；
}
});
输入[type=text]，选择{
宽度：100%；
填充：12px 20px；
利润率：8px0；
显示：内联块；
边框：1px实心#ccc；
边界半径：4px；
框大小：边框框；
}
输入[类型=提交]{
宽度：100%；
背景色：#4CAF50；
颜色：白色；
填充：14px 20px；
利润率：8px0；
边界：无；
边界半径：4px；
光标：指针；
}
输入[类型=提交]：悬停{
背景色：#45a049；
}
div{
边界半径：5px；
背景色：#F2F2；
填充：20px；
}

名字
姓
进行验证，但不是提交类型

我所作的改变：

在js中

在html中

<input id="vali" style="background:red" type="button" value="Validate">

输入[type=text]，选择{
宽度：100%；
填充：12px 20px；
利润率：8px0；
显示：内联块；
边框：1px实心#ccc；
边界半径：4px；
框大小：边框框；
}
输入[类型=提交]{
宽度：100%；
背景色：#4CAF50；
颜色：白色；
填充：14px 20px；
利润率：8px0；
边界：无；
边界半径：4px；
光标：指针；
}
#瓦利{
宽度：100%；
背景色：#4CAF50；
颜色：白色；
填充：14px 20px；
利润率：8px0；
边界：无；
边界半径：4px；
光标：指针；
}
输入[类型=提交]：悬停{
背景色：#45a049；
}
div{
边界半径：5px；
背景色：#F2F2；
填充：20px；
}

名字
姓
您还可以尝试AJAX请求，假设您将在服务器端进行验证，同时对客户端隐藏业务逻辑。
另一个解决方案是创建一个javascript方法进行验证，该方法在focus lost/key up后调用，该方法根据元素的id获取元素并将其传递给此函数。
未选中，但可以使用onchange（），
当元素的值发生更改时（仅适用于input、textarea和select元素），会发生更改事件。
change（）方法触发更改事件，或在发生更改事件时附加要运行的函数

$( "#myform" ).change(function( event ) {
 var name = $("#fname").val();
 var lname = $("#lname").val();

 if(name === "and" && lname ==="jkp"){
    alert("Your answers are correct!");
 }
     else{ 
   alert("Your answer is not correct");
   }
}

每次显示FailUse
事件。preventDefault（）
以防止默认行为。或者干脆
返回false取消事件默认行为（在较旧的浏览器上得到更广泛的支持）是否可以将验证更改为仅使用红色而不是警报打印一些输入？打印到html元素？是。您的示例是正确的，但将我的验证设置为服务器端始终是一个好主意。（不在此示例中）也使用document.write（）不提醒，PleasedDocument.write将使整个页面空白这是一个很好的示例，并用jQuery和PHP进行了很好的解释：@external这与发送电子邮件的方式完全相同。使用jquery从提交表单的用户那里获取值，使用ajax将这些值从javascript解析到php。然后使用PHP执行验证过程。最后，使用json_encode将php中的值返回到javascript
$( "#myform" ).change(function( event ) {
 var name = $("#fname").val();
 var lname = $("#lname").val();

 if(name === "and" && lname ==="jkp"){
    alert("Your answers are correct!");
 }
     else{ 
   alert("Your answer is not correct");
   }
}