如form表单的submit,a标签都自带一个鼠标单击事件,其实我们还可以额外填加单击事件
如:$(':submit').click(); 则自定义的单击事件先执行,然后才是标签自带的单击事件(checkbox相反,是默认事件先执行),
如果在自定义事件函数中有return false则标签自带的事件不生效,有return true则生效
这常用来做表单验证,因为填写项不完整或错误是不允许提交的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form id="f1" action="s8.html" method="get"> <label>用户名:</label><input name="n1" type="text"/><br> <label>昵 称:</label><input name="n2" type="text"/><br> <label>密 码:</label><input name="n3" type="password"/><br> <label>生 日:</label><input name="n4" type="text"/><br> <label>星 座:</label><input name="n5" type="text"/><br> <input type="submit"/> </form> <script src="jquery-3.3.1.js"></script> <script> $(':submit').click(function () { var flag = true; $('#f1').find('span').remove(); $('#f1').find('input[type="text"],input[type="password"]').each(function () { var v = $(this).val(); if(v.length<=0){ flag = false; var tag = document.createElement('span'); $(tag).text("必填"); $(tag).css('color','red'); $(this).after(tag); return false; //此处的return,是返回整个each的所有函数,直接跳到return flag;这样就是遇到n1为空时后面就不检查了,非空继续 } }); return flag; }); </script> </body> </html>