jQuery同一标签多个相同事件 return语句表单提交实例

如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>

jQuery同一标签多个相同事件 return语句 表单提交实例

jQuery同一标签多个相同事件 return语句表单提交实例