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. dubbo could not get local host ip address will use 127.0.0.1 instead 异常处理

    dubbo could not get local host ip address will use 127.0.0.1 instead 查看hostname localhost:spring wls ...

  2. 2018-计算机系机试-A

    #include<stdio.h> #include<cstdio> #include<cmath> #include<cstring> #includ ...

  3. Beta冲刺第二周王者荣耀交流协会第六次会议

    1.立会照片 成员:王超,高远博,冉华,王磊,王玉玲,任思佳,袁玥全部到齐. master:任思佳 2.时间跨度: 2017年11月22日 12:00 — 12:20,总计20分钟. 3.地点: 一食 ...

  4. 3.13 练习题4:邮件发送(smtp)

    3.13 练习题4:邮件发送(smtp) 前言本篇总结了QQ邮箱和163邮箱发送邮件,邮件包含html中文和附件,可以发给多个收件人,专治各种不行,总之看完这篇麻麻再也不用担心我的邮件收不到了.以下代 ...

  5. linux怎么实时查看目录下是否有文件生成

    inotify-tools 是为linux下inotify文件监控工具提供的一套c的开发接口库函数,同时还提供了一系列的命令行工具,这些工具可以用来监控文件系统的事件. inotify-tools是用 ...

  6. react native 键盘弹起时必须点击两次才能成功

    在scrollview或者flatlist上设置一个参数,即可解决 keyboardShouldPersistTaps="handled"

  7. react抛物线小球实现

    .ballFather{ position: absolute; width: 15px; height: 15px; border-radius: 50%; transition: all 0.5s ...

  8. django ----视图和路由

    django的view(视图) 一个视图函数,简称视图,是一个简单python函数,他接受web请求并且返回一个响应 响应可以是一张网页的HTML内容,一个重定向,一个404错误,一个XML文档,或者 ...

  9. 阿里云一 第一篇:云服务器ECS

    阿里云(www.aliyun.com)创立于2009年,是全球领先的云计算及人工智能科技公司,为200多个国家和地区的企业.开发者和政府机构提供服务.截至2017年3月,阿里云付费云计算用户达87.4 ...

  10. sublime An unhandled OS error was encountered nodejspath_error

    sublime An unhandled OS error was encountered  nodejspath_error 点击ok,修改node_path typescript 插件下载 ctr ...