body部分

<form action='https://www.baidu.com' method='post' >
                  用 户 名:<input type="text" name="username">
                                <span class='state1'>请输入用户名</span><br/><br/>
                  密  码:<input type="password" name="password">
                                  <span class='state2'>请输入密码</span><br/><br/>
                  确认密码:<input type="password" name="repass">
                                <span class='state3'>请输入确认密码</span><br/><br/>
                  邮  箱:<input type="text" name="email">
                                <span class='state4'>请输入邮箱</span><br/><br/>
                  <input type="submit" class="submit" value="登录">
      </form>

style部分

.state1{
                          color:#aaa;
                  }
                  .state2{
                          color:#000;
                  }
                  .state3{
                          color:red;
                  }
                  .state4{
                          color:green;
                  }

script部分

<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
     <script type="text/javascript">
              $(function(){
                       var ok1=false;
                      var ok2=false;
                      var ok3=false;
                      var ok4=false;
                      // 验证用户名
                      $('input[name="username"]').focus(function(){
                                 $(this).next().text('用户名应该为3-20位之间').removeClass('state1').addClass('state2');
                      }).blur(function(){
                                 if($(this).val().length >= 3 && $(this).val().length <=12 && $(this).val()!=''){
                                           $(this).next().text('输入成功').removeClass('state1').addClass('state4');
                                           ok1=true;
                                }else{
                                           $(this).next().text('用户名应该为3-20位之间').removeClass('state1').addClass('state3');
                                }
                     });

//验证密码
                     $('input[name="password"]').focus(function(){
                               $(this).next().text('密码应该为6-20位之间').removeClass('state1').addClass('state2');
                     }).blur(function(){
                               if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!=''){
                                           $(this).next().text('输入成功').removeClass('state1').addClass('state4');
                                           ok2=true;
                               }else{
                                           $(this).next().text('密码应该为6-20位之间').removeClass('state1').addClass('state3');
                               }

});

//验证确认密码
                    $('input[name="repass"]').focus(function(){
                               $(this).next().text('输入的确认密码要和上面的密码一致,规则也要相同').removeClass('state1').addClass('state2');
                    }).blur(function(){
                               if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!='' && $(this).val() == $('input[name="password"]').val()){
                                          $(this).next().text('输入成功').removeClass('state1').addClass('state4');
                                          ok3=true;
                               }else{
                                          $(this).next().text('输入的确认密码要和上面的密码一致,规则也要相同').removeClass('state1').addClass('state3');
                               }

});

//验证邮箱
                    $('input[name="email"]').focus(function(){
                                          $(this).next().text('请输入正确的EMAIL格式').removeClass('state1').addClass('state2');
                    }).blur(function(){
                               if($(this).val().search(/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/)==-1){
                                          $(this).next().text('请输入正确的EMAIL格式').removeClass('state1').addClass('state3');
                               }else{
                                          $(this).next().text('输入成功').removeClass('state1').addClass('state4');
                                          ok4=true;
                               }

});

//提交按钮,所有验证通过方可提交

$('.submit').click(function(){
                               if(ok1 && ok2 && ok3 && ok4){
                                          $('form').submit();
                               }else{
                                          alert("请正确注册后登录")
                                          return false;
                               }
                    });

});
    </script>

submit提交判断的更多相关文章

  1. 【jquery采坑】Ajax配合form的submit提交(微擎表单提交,ajax验证,submit提交)

    1.采坑:实现form的submit提交,在提交之前,进行ajax的不同校验,然后onsubmit=return check(),进行提交 1/1 目的:可以实现以 from的submit提交,然后还 ...

  2. submit(提交)按钮

    为form添加一个submit(提交)按钮,点击这个按钮,表单中的数据将会被发送到通过action属性指定的地址上. 下面是submit按钮的例子: <button type="sub ...

  3. submit()提交表单时,显示警示框

    我同事在实现submit()提交表单时,想要页面弹出警示框. 但是折腾了几小时后发现,submit()始终不执行. 她的代码如下: $(document).ready(function(){ $(&q ...

  4. jquery validate不用submit提交,用js提交的

    jquery validate控件 默认是使用submit提交的, 要想改成使用button的click事件处理函数中手工提交, 可以按照如下方式操作: 1 绑定form的validate, 2 然后 ...

  5. <input type = "submit"> 提交方式和用js的form.submit()有什么区别?

    假设: A表单内有<input type="submit">,通过点击这个input来提交表单 B表单内没有<input type="submit&qu ...

  6. 如何通过submit提交form表单获取后台传来的返回值

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/qq_34651764/article/details/76373846 小伙伴是不是遇到过这样的问题 ...

  7. from表单如果未指定action,submit提交时候会执行当前url

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  8. jquery submit() 提交失败

    今天写一个表单提交 居然走到$('#wechat_form').submit() 这,但怎么都没有提交这个表单 google 了一下 Additional Notes:Forms and their ...

  9. ASP FORM表单提交判断

    ASP提交表单是先进行Form填写检测,检测完成没问题之后再执行写入数据库表操作. 相关源码: <script language="javascript"> funct ...

随机推荐

  1. C# array与arraylist区别及获取sql字段名

    array与arraylist的区别: 1.  Array 的容量是固定的,而 ArrayList 的容量是根据需要自动扩展的.如果更改了 ArrayList.Capacity 属性的值,则自动进行内 ...

  2. 使用flask+SQL语句实现通过前台收到的信息向数据库中插入事件+初级CSS+HTML拯救一下我的主页·····

    1.使用flask+SQL语句实现**#@&&(懒得再扣一遍题目) 上代码: @app.route('/register', methods=['POST', 'GET']) def ...

  3. 在Java中用 . 深层访问JSON数据

    本文介绍Java中解析JSON的一种方法,可以让我们在Java程序中也用x.x.x的形式访问JSON数据中的值. 代码大部分来源非本人,本人在源代码基础上加以修改以使正常运行. 代码: // 将提取方 ...

  4. JavaScript中常用的BOM对象(属性、方法)

    window对象 定义: 一个浏览器窗口实例 与窗口有关的信息(应用程序编程接口) ECMAScript规定的Global对象 方法 open(url),返回标识符 引用 即将打开窗口的.(调用该引用 ...

  5. 【oracle】dmp导数据库

    假定数据库A为源数据库,数据库B为目标数据库 step1在数据库A中,导出生成.dmp文件,操作流程如下(以下操作均在系统用户ora11g下执行) 1.该操作只需要在第一次使用时执行,A_dump_d ...

  6. [转]JAVA 根据经纬度算出附近的正方形的四个角的经纬度

    csv文件转化为geojson文件中,涉及到路测图的打点生成,打点是由一个个正方形组成,而正方形是由四个点组成的,这四个点根据经纬度和范围生成,具体的实现代码是从网上找来的: /** * * @par ...

  7. 转 Postman访问Webapi的Get/Post/Put/Delte请求

    Postman访问Webapi的Get/Post/Put/Delte请求 2018年07月26日 15:04:46 DoNotWorkOvertime 阅读数:348 标签: WebApiPostma ...

  8. 开发Canvas 绘画应用(四):实现拖拽绘画

    在开发Canvas绘画应用(三):实现对照绘画中,我们实现了视图引导的第一部分,这一篇我们来完成第二部分,即将图片直接拖到画布上进行绘画. ✁ 拖放如何实现? [拖放的基本概念]:创建一个绝对定位的元 ...

  9. Git入门(安装及基础命令行操作)

    一.安装 1.Mac 在Mac中安装Git的方法不止一种.最简单的要数通过Xcode命令行工具.对于Mavericks(10.9)或更高版本的操作系统,当你第一次尝试在终端执行git命令时,系统会自动 ...

  10. tomcat启动时报:IOException while loading persisted sessions: java.io.EOFException的解决方案 ZT

    错误代码如下: 严重: IOException while loading persisted sessions: java.io.EOFException java.io.EOFException ...