按回车键提交表单!

≡放荡痞女 提交于 2020-01-30 09:37:44

今天在项目中遇到了,按回车键Ajax去后台提交!

刚开始没注意,没有<input type="submit">怎么实现回车提交了!只有一个<a class="userBut" id="userBut" href="javascript:void(0);">&nbsp;&nbsp;</a>。

查了查百度,找到了答案

              1、如果表单里有一个type=”submit”的按钮,回车键生效。 
              2、如果表单里只有一个type=”text”input,不管按钮是什么type,回车键生效

<form>
   <div class="p_box lxUser">
            <div class="userBorder">
                <h2>输入邮箱</h2>
                <div class="userTable">
                    <lable for="Email"><span> 邮箱:</span></lable>
                    <input type="text" name="Email" id="Email" />
                    <a class="userBut" id="userBut" href="javascript:void(0);">提&nbsp;&nbsp;交</a>
                </div>
            </div>
   </div>
</form>

js代码如下:

<script type="text/javascript">
    $(function () {
        $(":input[type=text]").bind("blur", function () {
            var _this = $(this);
            if (_this.val().length == 0) {
                return false;
            }
            else {
                if (_this.val().match(/^\w+((-\w+)|(\.\w+))*\@@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) == null) {
                    $(".userRed").show().find("#textfont").html("请输入正确的邮箱");
                    return false;
                }
                else {
                    $(".userRed").hide();
                    return true;
                }
            }
            return true;
        })

        //提交表当操作
        var submitForm = function () {
            var data = $("form").serialize();
            $.ajax2({
                url: '@Url.Action("EnsureYourEmail", "FindPass")',
                data: data,
                type: "POST",
                dataType: "json",
                success: function (data) {
                    if (data.code) {
                        location.href = data.href;
                    }
                    else {
                        $(".userRed").show().find("#textfont").html(data.msg);
                    }
                }, error: function () {
                    alert("出错了!");
                }
            })
        }

        //回车键提交表单
        $("form").submit(function () {
            submitForm();
            return false;
        })


        //点击按钮提交表单
        $("#userBut").click(function () {
            $(":input[type=text]").trigger("blur");
            if ($(".userRed:visible").length > 0 || $("#Email").val() == "" || $("#Email").val() == null) {
                return false;
            }
            submitForm();
        })
    })
</script>

 

 

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!