本文旨在解决 .NET Core Razor Pages 中表单提交的控制问题，核心在于如何在客户端通过 JavaScript 验证表单数据，并仅在所有验证通过后才触发表单提交。我们将详细介绍如何修改现有的代码，利用 jquery 的 submit() 方法来实现这一目标，从而提高用户体验和数据质量。
解决方案
问题的核心在于，现有的 JavaScript 验证函数 validate() 无法阻止表单的提交，即使某些验证失败。要解决这个问题，我们需要修改 validate() 函数，使其在所有验证通过后显式地触发表单提交。
步骤 1：为表单添加 ID
首先，我们需要为 .cshtml 文件中的 <form> 元素添加一个唯一的 ID，以便我们可以使用 JavaScript 来选择它。
立即学习“前端免费学习笔记（深入）”；
<form id="myForm" class="mb-3" method="post"> ... </form>
步骤 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”。
<button onclick="return validate()" class="btn btn-primary rounded-pill" id="submitButton">Sign Up</button>
注意事项
- 确保你的项目中包含了 jQuery 库。
- 在实际项目中，你可能需要更复杂的验证逻辑，例如异步验证或服务器端验证。
- 为了更好的用户体验，你可以在验证失败时，显示更详细的错误信息。
- 请注意代码中的注释，它们解释了每个步骤的目的和作用。
总结
通过以上步骤，我们成功地修改了 .cshtml 表单，使其仅在所有客户端验证通过后才提交。这种方法可以提高用户体验，减少服务器端的负载，并确保数据的完整性。 记住，客户端验证只是安全措施的一部分，服务器端验证仍然是必不可少的。
以上就是确保所有条件满足时才提交 .csjavascript word java jquery html go ai 表单提交 red JavaScript jquery bool 事件 异步
评论（已关闭）
评论已关闭