この記事では、JS での 2 種類のフォーム送信メソッドを例を通して分析します。参考までに皆さんと共有してください。詳細は次のとおりです:
1. ここの元の
<form method="post" action="/student/stureg/add" id="form1" onsubmit="return subForm();"> <button type="submit" class="button red" style="font-size:18px; font-family:'微软雅黑';">提 交</button>
ボタンが送信された後、subForm() メソッドを実行します。サブフォームはフォームを検証し、false を返します。提出されました。それ以外の場合は提出してください。
function subForm() { var flag = true; $(".required").each(function(){ if(!$(this).val()) { flag = false; $(this).css({ border: "1px solid #F56939",borderRadius:"5px",color:"#F56939",height:"26px"}); $(this).attr("status","1").val("此处为必填项,请您填写!"); } }); /*$(".idCardNo").each(function(){ if(!idCardNo($(this).val())) { flag = false; $(this).css({ border: "1px solid #F56939",borderRadius:"5px",color:"#F56939",height:"26px"}); if($(this).attr("status")!=1){ $(this).attr("status","1").val("请填写正确的身份证号码!"); } } });*/ var reg = new RegExp("^[0-9]*$"); $(".number").each(function(){ if(!reg.test($(this).val())) { flag = false; $(this).css({ border: "1px solid #F56939",borderRadius:"5px",color:"#F56939",height:"26px"}); if($(this).attr("status")!=1){ $(this).attr("status","1").val("请填写正确的联系电话!"); } } }); $(".exCardNo").each(function(){ if(exCardNo($(this).val())==1) { flag = false; $(this).css({ border: "1px solid #F56939",borderRadius:"5px",color:"#F56939",height:"26px"}); if($(this).attr("status")!=1){ $(this).attr("status","1").val("此身份证已报名!"); } } }); return flag; }
色々検証!
2.jsで設定したSubmit
<form method="post" action="/student/stureg/reglogin" id="form_login"> <a id="submit"><img src="/images/login/login_bt.png" style="cursor:pointer"/></a>
これは送信ボタンではなく、擬似的な送信ボタンです。
$("#submit").click(function(){ if(loginForm()) { $("#form_login").submit(); } });
は送信イベントをトリガーします。ここで
onsubmit="return loginForm();" を使用しても、 false が返されるかどうかに関係なく送信されます。したがって、実際に送信する前にいくつかの検証を行う必要があります。
function loginForm(){ var flag = true; $(".notnull").each(function(){ if(!$(this).val()) { flag = false; $(this).css({ border: "1px solid #F56939",borderRadius:"5px",color:"#F56939",height:"26px"}); $(this).attr("status","1").val("不能为空"); } }); return flag; }
false を返すと、submit メソッドは呼び出されません。
これらは、フォーム送信の前段階を処理する 2 つの方法です。