jQuery中的表单提交（方法1）

最新推荐文章于 2022-07-30 17:29:30 发布
最新推荐文章于 2022-07-30 17:29:30 发布
阅读量293 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuzhanbin/article/details/77925411
版权


 <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .bg_red{
                color: #FF0000;
            }
            .border_red{
                border:2px solid #FF0000;
            }
            .bg_green{
                color: #32cd32;
            }
            .border_green{
                border:2px solid #32cd32;
            }
        </style>
        <script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
        <script>
            $(function(){
                $(".name").blur(function(){
                    if($(".name").val()==""){
                        $(".name_text").html("用户名不能为空!");
                        $(".name_text").addClass("bg_red");
                        $(".name").addClass("border_red");
                        return false;
                    }else{
                        $(".name_text").html("√");
                        $(".name_text").addClass("bg_green");
                        $(".name").addClass("border_green");
                        $(".pw").focus();
                    }
                });
                var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
                $(".pw").blur(function(){
                    if($(".pw").val()==""){
                        $(".pw_text").html("密码不合法!");
                        $(".pw_text").addClass("bg_red");
                        $(".pw").addClass("border_red");
                        return false;
                    }else if($(".pw").val().length<6||$(".pw").val().length>12){
                        $(".pw_text").html("密码长度不合法!");
                        $(".pw_text").addClass("bg_red");
                        $(".pw").addClass("border_red");
                        
                        return false;
                    }else if(false == mediumRegex.test($(".pw").val())){
                        $(".pw_text").html("密码不合法--至少要包含两种字符!");
                        $(".pw_text").addClass("bg_red");
                        $(".pw").addClass("border_red");
                        return false;
                    }else{
                        $(".pw_text").html("√");
                        $(".pw_text").addClass("bg_green");
                        $(".pw").addClass("border_green");
                        $(".pw2").focus();
                    }
                });
                
                $(".pw2").blur(function(){
                    if($(".pw2").val()==""){
                        $(".pw2_text").html("密码不合法!");
                        $(".pw2_text").addClass("bg_red");
                        $(".pw2").addClass("border_red");
                        return false;
                    }else if($(".pw2").val().length<6||$(".pw2").val().length>12){
                        $(".pw2").
                        $(".pw2_text").html("密码长度不合法!");
                        $(".pw2_text").addClass("bg_red");
                        $(".pw2").addClass("border_red");
                        return false;
                    
                    }else if($(".pw").val()!=$(".pw2").val()){
                        $(".pw2_text").html("密码不一致!");
                        $(".pw2_text").addClass("bg_red");
                        $(".pw2").addClass("border_red");
                        return false;
                    }else{
                        $(".pw2_text").html("√");
                        $(".pw2_text").addClass("bg_green");
                        $(".pw2").addClass("border_green");
                        $(".email").focus();
                    }
                });
                var emailtest = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
                $(".email").blur(function(){
                    if($(".email").val()==""){
                        $(".email_text").html("email不能为空!");
                        $(".email_text").addClass("bg_red");
                        $(".email").addClass("border_red");
                        return false;
                    }else if(!$(".email").val().match("@")){
                        $(".email_text").html("@!");
                        $(".email_text").addClass("bg_red");
                        $(".email").addClass("border_red");
                        return false;
                    }else if(!emailtest.test($(".email").val())){
                        $(".email_text").html("请输入正确的邮箱");
                        $(".email_text").addClass("bg_red");
                        $(".email").addClass("border_red");
                        return false;
                    }else{
                        $(".email_text").html("√");
                        $(".email_text").addClass("bg_green");
                        $(".email").addClass("border_green");
                        $(".phone").focus();
                    }
                });
                
                $(".phone").blur(function(){
                    if($(".phone").val()==""){
                        $(".phone_text").html("phone不能为空!");
                        $(".phone_text").addClass("bg_red");
                        $(".phone").addClass("border_red");
                        return false;
                    }else if(isNaN($(".phone").val())){
                        $(".phone_text").html("电话号为数字");
                        $(".phone_text").addClass("bg_red");
                        $(".phone").addClass("border_red");
                        return false;
                    }else if($(".phone").val().length<16||$(".phone").val().length>18){
                        $(".phone_text").html("电话号为16-18位");
                        $(".phone_text").addClass("bg_red");
                        $(".phone").addClass("border_red");
                        return false;
                    }else{
                        $(".phone_text").html("√");
                        $(".phone_text").addClass("bg_green");
                        $(".phone").addClass("border_green");
                        $(".idcard").focus();
                    }
                });
                
                $(".idcard").blur(function(){
                    if($(".idcard").val()==""){
                        $(".idcard_text").html("card不能为空!");
                        $(".idcard_text").addClass("bg_red");
                        $(".idcard").addClass("border_red");
                        return false;
                    }else if($(".idcard").val().length<16||$(".idcard").val().length>18){
                        $(".idcard_text").html("16-18位");
                        $(".idcard_text").addClass("bg_red");
                        $(".idcard").addClass("border_red");
                        return false;
                    }else{
                        $(".idcard_text").html("√");
                        $(".idcard_text").addClass("bg_green");
                        $(".idcard").addClass("border_green");
                        
                    }
                });
                function mySubmit(flag){  
                    return flag;  
                };  
                $("#myForm").submit(function(){
                    var info1=$(".name_text").text();
                    var info2=$(".pw_text").text();
                    var info3=$(".pw2_text").text();
                    var info4=$(".email_text").text();
                    var info5=$(".phone_text").text();
                    var info6=$(".idcard_text").text();
                    if(info1=="√"&&info2=="√"&&info3=="√"&&info4=="√"&&info5=="√"&&info6=="√"){
                        return mySubmit(true);
                    }else{
                        return mySubmit(false);
                    }
                });

                });
        </script>
    </head>
    <body>
        <center>
        <form action="www.baidu.com"  id="myForm" method="post" οnsubmit="return mySubmit(true)">
            <table border="1" cellspacing="0">
                <tr>
                    <td>
                        用户名:
                    </td>
                    <td>
                        <input type="text" class="name" />
                        <span class="name_text"></span>
                    </td>
                </tr>
                <tr>
                    <td>
                        密码:
                    </td>
                    <td>
                        <input type="password" class="pw" />
                        <span class="pw_text"></span>
                    </td>
                </tr>
                <tr>
                    <td>
                        确认密码:
                    </td>
                    <td>
                        <input type="password" class="pw2" />
                        <span class="pw2_text"></span>
                    </td>
                </tr>
                <tr>
                    <td>
                        邮箱:
                    </td>
                    <td>
                        <input type="text" class="email" />
                        <span class="email_text"></span>
                    </td>
                </tr>
                <tr>
                    <td>
                             手机号:
                    </td>
                    <td>
                        <input type="text" class="phone" />
                        <span class="phone_text"></span>
                    </td>
                </tr>
                <tr>
                    <td>
                             身份证:
                    </td>
                    <td>
                        <input type="text" class="idcard" />
                        <span class="idcard_text"></span>
                    </td>
                </tr>
                <tr align="center">
                    <td colspan="2">
                        <input class="sb" type="submit" value="提交" />
                    </td>
                </tr>
            </table>
        </form>
        </center>
    </body>
</html>


scvas
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery 在表单提交之前修改 提交的值 原创
11-23
在本文中，我们将探讨如何使用jQuery在表单提交前修改提交的值，特别是在特定场景下增强搜索功能。在公司的项目中，我们面临一个需求：在二级栏目搜索时，需要确保用户在搜索框中包含了该栏目的关键词，例如“教程”...
jQuery实现表单提交时判断的方法
10-25
主要介绍了jQuery实现表单提交时判断的方法,涉及针对表单提交时的判断方法,是非常实用的技巧,需要的朋友可以参考下
jquery.validate+jquery.form提交的三种方式
weixin_30699741的博客
06-06 507
概述：本篇主要讨论jquery.validate结合jquery.form实现对表单的验证和提交方案。 方式一：是通过jquery.validate的submitHandler选项，即当表单通过验证时执行回调函数。在这个回调函数中通过jquery.form来提交表单； 方式二：是通过jquery.form的beforeSubmit，即在提交表单前执行的回调函数，这个函数如果返回true，则提交...
jquery中的表单提交
iteye_15462的博客
05-31 104
在5月的最后一天记一个jquery中的表单提交在ie8中的一个坑   在项目中遇到这么个要求，点击按钮执行一段js，在条件满足之后，post方式提交一个请求，但是不能用ajax   所以在js中我写了段这样的代码 var $form = $('&lt;form&gt;', {'action': 'http://www.baidu.com', 'method': 'get'}); $f...
jQuery表单的提交 .submit()
qq_34579060的博客
04-26 3万+
.submit()所属分类：事件 &gt; 表单事件 | 表单英文文档：.submit().submit( handler(eventObject) )返回: jQuery描述: 为 JavaScript 的 "submit" 事件绑定一个处理函数，或者触发元素上的该事件。添加的版本: 1.0.submit( handler(eventObject) )handler(eventObject)类型...
jquery 提交form 表单
huaishuming的专栏
01-05 1135
需求：需要在js提交参数值 且不允许改变 URL规则，那么 window.location.href= domain+"/"+id+".html?selDate="+selDate; 将不能使用 想到POST方式 代码： function goToProductPage(selDate,id){ // 取得要提交页面的URL var action = dom
Jquery中ajax提交表单几种方法(get、post两种方法)
12-04
在jQuery中，Ajax提交表单是常见的数据交互方式，它允许我们在不刷新页面的情况下与服务器交换数据并更新部分网页内容。主要使用到的两种方法是GET和POST，这两种方法各有特点，适用于不同的场景。 首先，GET方法是...
jQuery实现表单动态添加数据并提交的方法
10-18
主要介绍了jQuery实现表单动态添加数据并提交的方法,结合实例形式总结分析了jQuery针对存在form表单的添加、提交,不存在form表单的添加、提交,ajax、非ajax形式提交等数据添加与表单提交操作技巧,需要的朋友可以参考...
jQuery实现提交表单时不提交隐藏div中input的方法
10-16
jQuery的form操作技巧汇总专题中，还包括了各种其他与表单相关的功能，如序列化表单数据、阻止默认的表单提交行为、添加自定义验证规则等。对于JSON数据的处理，jQuery提供了$.parseJSON()方法解析JSON字符串，$.get...
【转】4.2使用jQuery.form插件，实现完美的表单异步提交
sinolover的专栏
12-12 326
传送门：异步编程系列目录…… 示例下载：使用jQuery.form插件，实现完美的表单异步提交.rar 抓住6月份的尾巴，今天的主题是 今天我想介绍的是一款jQuery的插件：Jquery.form.js官网。 通过该插件，我们可以非常简单的实现表单的异步提交，并实现文件上传、进度条显示等等。 现在我们从一个ASP.NET同步表单提交开始，然后再将其转化为异步的表单提交。我写了3种表单提交示例，并简单分析了各种方式的利弊。 当然主题还是使用jQ...
jQuery提交表单的几种方式
weixin_30430169的博客
05-08 237
方式一： $.post('../Ajax/GoodsAjax.ashx?cmd=getGsList', function (result) { var result = eval('(' + result + ')'); if (result.rbool) { $('#creatLi').html(""); var li = ""; //动态添加商品类别样式...
利用jquery1.7的ajax提交form表单很简单
wawa129的专栏
03-12 134
之前用ajax提醒form表单，要引入一个jquery-form.js表单，而且代码复杂。 现在jquery1.7有个serialize()方法。直接可以提交表单。 方法如下： 可以不用jquery-form.js，直接这样提交： protFrm为表单名 $.post("zlprotAction!saveZLProt.action",$('#protFrm').serialize(...
jquery表单验证
qq_39968990的博客
01-19 256
** jquery表单验证 ** function validForm() { /* * 邮箱验证 */ // 获取邮箱文本框中内容 var emailInput = $("#email").val(); // 邮箱正则 var emailReg = new RegExp("^[A-Za-z]{1}\\w{5,17}$"); // 比较 文本框内容与正则是否匹配 if...
JavaScript 学习-42.jQuery 提交表单 submit() 方法
qq_27371025的博客
06-09 7875
submit() 方法不带参数，就是触发 submit 事件，带function 参数，就是执行 submit 事件时运行的函数。通过 jquery 的submit() 方法，可以出发submit 事件form表单
在jQuery中提交表单的方式有哪些
weixin_44484756的博客
05-06 1万+
在jQuery中提交表单的方式有哪些 在jQuery中提交表单的方式有很多种，现在来讲一下经常用到的四种，分别是ajaxSubmit()、getJSON()、post()、ajax()。 一、$.ajaxSubmit方法 使用ajaxSubmit()来提交表单首先要使用第三方插件jquery.form来实现。 一般情况下，直接用form提交的话，提交后的当前页面会跳转到form中的action所指...
Jquery 提交表单
阿彬的专栏
08-01 1861
jquery 序列化表单提交： 前端js： $("#okBtn").click(function () { $("#okBtn").attr('disabled', true); $.ajax({ type: 'post', url: '/Appointment/AppointmentAdd', ...
jQuery中form表单的基本使用
qq_36507046的博客
07-30 5996
本节内容主要介绍了jQuery中form表单的基本使用，同时附上了相应的的评论列表案例。
在JQuery中阻止表单的提交动作
热门推荐
lovingshu's Forever
06-16 5万+
在JQuery中阻止表单的提交动作(本人原创,度娘一边去) <!-- Author:Lovingshu's Date:2012/06/16 Remark:Begin with JQuery,Begin with power! --> 我们都知道在表单提交时我们可以通过onsubmit属性指定方法在方法中return true或false来决定表单是否提交 但是在JQuery中,我们通过$()
jquery 表单提交
最新发布
07-27
以上是常用的四种jQuery表单提交方式。根据具体需求选择合适的方式来提交表单。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* *2* [在jQuery中提交表单的方式有哪些]...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值