Html 表單驗證 --->onsubmit
當我們需要在表單提交前進行驗證時我們想到的第一個辦法是在表單<form>標籤中
添加onsubmit事件添加方法test()方法進行驗證
但當我們實際操作時,無論返回true/false 都會進行提交
原因:
當onsubmit事件會調用自己內部的方法進行表單提交,默認返回true
()
然後才調用綁定的方法進行驗證
解決方案;
01;重寫onsubmit()方法
02;通過button 按鈕進行提交
<body>
<form action="https://www.hao123.com/" method="post" id='form01' οnsubmit="return test()">
保險名稱:<input type="text" name="bxmc" id="bxmc"/></br></br>
保險類型:<input type="text" name="bxtype" id="bxtype"/></br></br>
保險價格:<input type="text" name="bxPrice" id="bxPrice"/></br></br>
保險名稱:<input type="text" name="index" id="index"/></br></br>
<input type="button" value="提交" οnclick="checkInfo()"/>
</form>
<script>
function test(){
var a=$('#bxmc').val();
console.log(0<a.length&&a.length<4);
if(0<a.length&&a.length<4){
console.log('滿足條件');
return 0;
}else{
console.log('不滿足條件');
return 1;
}s
console.log(a.length);
return 1;
}
function checkInfo(){
$('#form01').submit();
}
</script>
</body>
onsubmit--->表單驗證
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章