Html 表单验证 --->onsubmit
当我们需要在表单提交前进行验证时我们想到的第一个办法是在表单<form>标签中
添加onsubmit事件添加方法test()方法进行验证
但当我们实际操作时,无论返回true/false 都会进行提交
原因:
当onsubmit事件会调用自己内部的方法进行表单提交,默认返回true
()
然后才调用绑定的方法进行验证
解决方案;
01;重写onsubmit()方法
02;通过button 按钮进行提交
<body>
<form action="https://www.hao123.com/" method="post" id='form01' onsubmit="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="提交" onclick="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>
当我们需要在表单提交前进行验证时我们想到的第一个办法是在表单<form>标签中
添加onsubmit事件添加方法test()方法进行验证
但当我们实际操作时,无论返回true/false 都会进行提交
原因:
当onsubmit事件会调用自己内部的方法进行表单提交,默认返回true
()
然后才调用绑定的方法进行验证
解决方案;
01;重写onsubmit()方法
02;通过button 按钮进行提交
<body>
<form action="https://www.hao123.com/" method="post" id='form01' onsubmit="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="提交" onclick="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>