大学三年里所有在专注后台编码。学会不知多少种，servlet。ssh，springMVC，web.py......

最后每次碰到前端自己要写点东西就满目愁抑，

干脆自己好好理解一段前端代码，

特地拿出參考别人的一个可用的jQuery验证表单输入。

总体来说还是很easy。了解focus、blur的使用方法就足够，以后自己要填加一些更麻烦的前端jQuery组件运用。

JQuery中的html(),text(),val()差别

下面代码參考搜索：

<html>

    <head>

        <meta http-equiv="content-type" content="text/html; charset=utf-8">

        <title>Reg</title>

         <script src="jquery-2.1.0.min.js"></script>

        <style>

            .state1{

                color:#aaa;

            }

            .state2{

                color:#000;

            }

            .state3{

                color:red;

            }

            .state4{

                color:green;

            }

        </style>

        <script>

            $(function(){

                var ok1=false;

                var ok2=false;

                var ok3=false;

                var ok4=false;

                // 验证username

                $('input[name="username"]').focus(function(){   //focus()是获得焦点时对应的处理函数

                    $(this).next().text('username应该为3-20位之间').removeClass('state1').addClass('state2'); //$(this).next()当前元素同级的下个元素

                }).blur(function(){                             //元素失去焦点前触发blur函数

                    if($(this).val().length >= 3 && $(this).val().length <=12 && $(this).val()!=''){

                        $(this).next().text('输入成功').removeClass('state1').addClass('state4');

                        ok1=true;

                    }else{

                        $(this).next().text('username应该为3-20位之间').removeClass('state1').addClass('state3');

                    }

                });

                //验证password

                $('input[name="password"]').focus(function(){

                    $(this).next().text('password应该为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('password应该为6-20位之间').removeClass('state1').addClass('state3');

                    }

                });

                //验证确认password

                    $('input[name="repass"]').focus(function(){

                    $(this).next().text('输入的确认password要和上面的password一致,规则也要同样').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('输入的确认password要和上面的password一致,规则也要同样').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;

                    }

                });

                //提交button,全部验证通过方可提交

                $('.submit').click(function(){

                    if(ok1 && ok2 && ok3 && ok4){

                        $('form').submit();

                    }else{

                        return false;

                    }

                });

            });

        </script>

    </head>

<body>

<form action='do.php' method='post' >

    用 户 名:<input type="text" name="username">

                <span class='state1'>请输入username</span><br/><br/>

    密　　码:<input type="password" name="password">

                <span class='state1'>请输入password</span><br/><br/>

    确认password:<input type="password" name="repass">

                <span class='state1'>请输入确认password</span><br/><br/>

    邮　　箱:<input type="text" name="email">

                <span class='state1'>请输入邮箱</span><br/><br/>

    <a href="javascript:;"><img class='submit' />提交</a>

</form>

</body>

jQuery验证所有输入合法后才干提交的更多相关文章

  1. JQuery验证成功之后，使用ajax提交数据

    function checkForm(){ validator = $("#commentForm").validate({// #formId为需要进行验证的表单ID error ...

  2. jquery验证后ajax提交，返回消息怎样统一显示的问题

    /* jquery验证后ajax提交.返回消息怎样跟jquery验证体系统一显示的问题,网上查了非常多资料.都没有找到明白的答案,通过数小时的尝试,最终攻克了,现举一个简单的样例,给须要的人參考參考吧 ...

  3. Thinkphp+AJAX动态验证用户输入是否合法

    遇到用户注冊等情况时.假设等用户输入全部信息,点击注冊button提交后.再验证输入是否正确,体验非常不好,并且非常浪费用户的时间,添加注冊成本,这里提供一个样例,演示了怎么使用ajax进行单步验证, ...

  4. AngularJS 表单提交后显示验证信息与失焦后显示验证信息

    虽然说AngularJS的实时表单验证非常有用,非常高效方便,但是当用户还没有完成输入时便弹出一个错误提示,这种体验是非常糟糕的. 正常的表单验证逻辑应该是在用户提交表单后或完成当前字段中的输入后,再 ...

  5. JS实现的一个验证码，可以在前端验证后在提交action

    js实现的一个验证码功能,可以在前端判断验证码输入是否正确 输入的邮箱格式是否正确 验证成功后才提交action到后台 <!DOCTYPE html PUBLIC "-//W3C//D ...

  6. 使用 jQuery Ajax 异步登录，并验证用户输入信息（maven）

    使用 jQuery Ajax 异步登录,并验证用户输入信息(maven) 本篇内容: (1)上一篇是使用同步的请求实现登录,并由 Servlet 决定登陆后下一步做哪些事情,本篇使用 jQuery A ...

  7. jQuery validation学习（1）验证只输入空格通过验证

    当input输入了空格是不会提示信息的 一般会去除空格然后进行验证 这个时候就要添加onkeyup事件去除左侧的空格 验证只输入空格通过验证 //添加验证手机方法 jQuery.validator.a ...

  8. jQuery验证控件jquery.validate.js使用说明

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...

  9. 你应该了解的jquery 验证框架

    Jquery validate 验证 具体查看附件中demo 主要是几种使用形式: 1.写在js中: $("#signupForm").validate({ rules: { fi ...

随机推荐

  1. C++_class_powerpoint_1.1

    Types and Declarations Boolean Type bool type – boolean , logic type bool literal – true, falseint a ...

  2. Node.js：教程

    ylbtech-Node.js:教程 1.返回顶部 1. Node.js 教程 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基于Chrome JavaS ...

  3. [Oracle] Oracle终极解锁

    一些ORACLE中的进程被杀掉后,状态被置为"killed",但是锁定的资源很长时间不释放,有时实在没办法,只好重启数据库.现在提供一种方法解决这种问题,那就是在ORACLE中杀不 ...

  4. HUST　1585 排队

    2019-05-21 10:15:00 加油,加油 !!! #include <bits/stdc++.h> using namespace std; int main() { int n ...

  5. 10) 十分钟学会android--app数据保存三种方式

    虽然可以在onPause()时保存一些信息以免用户的使用进度被丢失,但大多数Android app仍然是需执行保存数据的动作.大多数较好的apps都需要保存用户的设置信息,而且有一些apps必须维护大 ...

  6. CSS3 动画 思维导图

    思维导图在新窗口打开浏览

  7. GEF入门笔记

    最近项目中需要用到Eclipse GEF框架进行画图,故将平时学习笔记更新到博客中,便于查阅 自己画的一个GEF基本结构     最基本流程 1.创建model(包括数据域.在界面中的布局.图片索引等 ...

  8. MySQL定时任务与存储过程实例

    shell 定时任务:​/usr/bin/mysql -uroot -pxxxxx databasename -e "update table set ......."​​mysq ...

  9. 「图解HTTP 笔记」Web 基础

    Web 基础 三项构建技术: HTML:页面的文本标记语言 HTTP:文档传输协议 URL:指定文档所在地址 一些概念 HTTP(HyperText Transfer Protocol):通常被译为& ...

  10. deeplearning4j – 分布式DL开源项目

    原文链接:http://www.52ml.net/16157.html Deeplearning4j is the first commercial-grade deep learning libra ...