本文旨在解决 .NET Core Razor Pages 中表单提交的控制问题，核心在于如何在客户端通过 JavaScript 验证表单数据，并仅在所有验证通过后才触发表单提交。我们将详细介绍如何修改现有的代码，利用 jQuery 的 submit() 方法来实现这一目标，从而提高用户体验和数据质量。
解决方案
问题的核心在于，现有的 JavaScript 验证函数 validate() 无法阻止表单的提交，即使某些验证失败。要解决这个问题，我们需要修改 validate() 函数，使其在所有验证通过后显式地触发表单提交。
步骤 1：为表单添加 ID
首先，我们需要为 .cshtml 文件中的
步骤 2：修改 validate() 函数
接下来，我们需要修改 validate() 函数，使其在所有验证函数都返回 true 时，使用 jQuery 的 submit() 方法来提交表单。 由于原代码中的验证函数返回true/false的意义和正常理解的意义是相反的，这里统一修改为验证通过返回true，验证失败返回false。同时，validate函数也需要返回一个bool值，表示是否验证通过。
const fname=()=>{
const a=document.getElementById("signUpFirstName").value;
const new1= document.getElementById("l1");
const new2=new1.getElementsByTagName("span");
const b=document.getElementById("signUpFirstName").name;
console.log(b);
if(a.length===0)
{
new2[0].innerHTML="Please Enter Your First Name";
new2[0].style.color="red";
return false; // 修改为验证失败返回 false
}
else
{
new2[0].innerHTML="";
return true; // 修改为验证成功返回 true
}
}
const lname=()=>{
const a=document.getElementById("signUpLastName").value;
const new1= document.getElementById("l2");
const new2=new1.getElementsByTagName("span");
if(a.length==0)
{
new2[0].innerHTML="Please Enter Your Last Name";
new2[0].style.color="red";
return false; // 修改为验证失败返回 false
}
else
{
new2[0].innerHTML="";
return true; // 修改为验证成功返回 true
}
}
const checkcountry=()=>{
const a=document.getElementById("signUpCountryCode").value;
const new1= document.getElementById("l3");
const new2=new1.getElementsByTagName("span");
if(a.length==0)
{
new2[0].innerHTML="Please Enter Your Country";
new2[0].style.color="red";
return false; // 修改为验证失败返回 false
}
else
{
new2[0].innerHTML="";
return true; // 修改为验证成功返回 true
}
}
const checkMobile=()=>{
const a=document.getElementById("signUpMobileNumber").value;
const new1= document.getElementById("i4")
const new2=new1.getElementsByTagName("span");
const phoneno = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
console.log(a.length);
if(!(a.match(phoneno)))
{
new2[0].innerHTML="Please Enter a valid Mobile No.";
new2[0].style.color="red";
count=1;
return false; // 修改为验证失败返回 false
}
else
{
new2[0].innerHTML="";
count=0;
return true; // 修改为验证成功返回 true
}
}
const checkEmail=()=>{
const a=document.getElementById("signUpEmail").value;
var mailformat = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
const new1= document.getElementById("i5")
const new2=new1.getElementsByTagName("span");
if(!a.match(mailformat))
{
console.log("ui")
new2[0].innerHTML="Please Enter a valid Email id.";
new2[0].style.color="red";
count=1;
return false; // 修改为验证失败返回 false
}
else
{
new2[0].innerHTML="";
count=0;
return true; // 修改为验证成功返回 true
}
}
const checkpass1=()=>{
const a=document.getElementById("signUpPassword").value;
const new1= document.getElementById("i6")
const new2=new1.getElementsByTagName("span");
const specialChars = /[`!@@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/;
if(a.length<8)
{
new2[0].innerHTML="Password length must be atleast 8 characters";
new2[0].style.color="red";
count=1;
console.log("count",count);
return false; // 修改为验证失败返回 false
}
else if(a.length>12)
{
new2[0].innerHTML="Password length must not exceed 12 characters";
new2[0].style.color="red";
count=1;
return false; // 修改为验证失败返回 false
}
else if(!specialChars.test(a))
{
new2[0].innerHTML="Password must contain atleast 1 special character";
new2[0].style.color="red";
count=1;
return false; // 修改为验证失败返回 false
}
else{
new2[0].innerHTML="";
count=0;
console.log("count",count);
return true; // 修改为验证成功返回 true
}
}
const checkpass2=()=>{
const a=document.getElementById("signUpConfirmPassword").value;
const b=document.getElementById("signUpPassword").value;
const new1= document.getElementById("i7")
const new2=new1.getElementsByTagName("span");
if(a!=b)
{
new2[0].innerHTML="Password does not match";
new2[0].style.color="red";
count=1;
return false; // 修改为验证失败返回 false
}
else
{
new2[0].innerHTML="";
count=0;
return true; // 修改为验证成功返回 true
}
}
const validate=()=>{
const isFirstNameValid = fname();
const isLastNameValid = lname();
const isMobileValid = checkMobile();
const isCountryValid = checkcountry();
const isEmailValid = checkEmail();
const isPassword1Valid = checkpass1();
const isPassword2Valid = checkpass2();
if(isFirstNameValid && isLastNameValid && isMobileValid && isCountryValid && isEmailValid && isPassword1Valid && isPassword2Valid)
{
console.log("alight go ahead.");
$("#myForm").submit();
return true; // 返回 true 表示验证通过
}
else
{
console.log("error, don't submit form!!");
//document.getElementById("submitButton").setAttribute('disabled','disabled');
return false; // 返回 false 表示验证失败
}
}步骤 3：修改按钮的 onclick 事件
由于我们现在需要在 validate() 函数中处理表单提交，因此我们需要修改按钮的 onclick 事件，使其在验证通过后才提交表单。 同时，由于submit按钮默认行为是提交表单，所以不需要指定type="submit"。
注意事项
- 确保你的项目中包含了 jQuery 库。
- 在实际项目中，你可能需要更复杂的验证逻辑，例如异步验证或服务器端验证。
- 为了更好的用户体验，你可以在验证失败时，显示更详细的错误信息。
- 请注意代码中的注释，它们解释了每个步骤的目的和作用。
总结
通过以上步骤，我们成功地修改了 .cshtml 表单，使其仅在所有客户端验证通过后才提交。这种方法可以提高用户体验，减少服务器端的负载，并确保数据的完整性。 记住，客户端验证只是安全措施的一部分，服务器端验证仍然是必不可少的。
