大学三年里所有在专注后台编码。学会不知多少种，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. 手机对支持128G扩展内存的介绍

    具体说明: 1,JB2之前的版本只支持SD2.0 SPEC,SD2.0 SPEC定义了最大支持SD卡容量到32G. 2,JB2及以后的版本支持SD3.0 SPEC,SD3.0的SPEC定义了最大支持S ...

  2. 【HDU 1846】 Brave Game

    [题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=1846 [算法] 巴什博弈 若有(m+1)个石子,显然先手不能直接取完,后手必胜 因此,我们可以把石 ...

  3. 【POJ 3071】 Football

    [题目链接] http://poj.org/problem?id=3071 [算法] 概率DP f[i][j]表示第j支队伍进入第i轮的概率,转移比较显然 [代码] #include <algo ...

  4. Elasticsearch之curl创建索引库和索引时注意事项

    前提, Elasticsearch之curl创建索引库 Elasticsearch之curl创建索引 注意事项 1.索引库名称必须要全部小写,不能以下划线开头,也不能包含逗号 2.如果没有明确指定索引 ...

  5. wppay免登录付费查看隐藏内容/付费资源下载

    WPPAY是一款模板兔开发的免登录的付费查看内容/付费下载资源WordPress插件,WPPAY不需要用户注册登录即可支付查看隐藏内容,把整个流程做到极简.发布文章时要隐藏的内容可以利用短代码: [w ...

  6. redis的基本命令

    一.String类型的键值对 给一个变量赋值 set varName varVal eg 得到一个变量的值 get varName eg 删除一个变量 del varName eg del nume ...

  7. Oracle PL/SQL开发基础（第三十四弹：RAISE_APPLICATION_ERROR）

    RAISE_APPLICATION_ERROR在子程序内部使用时,能从存储子程序中抛出自定义的错误消息.这样就能将错误报告给应用程序而避免范围未捕获异常. 语法如下: RAISE_APPLICATIO ...

  8. UBuntu安裝使用PIP

    Windows下安裝python包還是比較方便的,直接在FLD網站下載對應的EXE文件就可以安裝,在linux系統下,使用pip,easy egg 管理工具可以減輕安裝負擔. 原文鏈接:http:// ...

  9. matplotlib简介-高质量图形输出

    Matplotlib 是一个用来绘制二维图形的 Python 模块,它克隆了许多 Matlab 中的函数, 用以帮助 Python 用户轻松获得高质量(达到出版水平)的二维图形. 文章来源:http: ...

  10. mongodb报错一例

    开发程序报错信息: Caused by: com.mongodb.MongoException: Executor error: OperationFailed: Sort operation use ...