zoukankan      html  css  js  c++  java
  • 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>
    

      

  • 相关阅读:
    MySQL存储过程参数【4】
    MySQL存储过程的变量【3】
    MySQL存储过程入门【2】
    MySQL存储过程简介【1】
    MySQL删除重复行的方式
    在MySQL单个表中找到重复的值
    MySQL比较两个表不同的数据
    【思维】P5743 【深基7.习8】猴子吃桃——有趣的解法,归纳推导
    对判断质数的算法的优化
    【思维】P1321 单词覆盖还原
  • 原文地址:https://www.cnblogs.com/alex-hrg/p/9589137.html
Copyright © 2011-2022 走看看