大学三年里所有在专注后台编码。学会不知多少种，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. JavaScript之BOM和DOM

    前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...

  2. 【读书笔记】UEFI原理与编程（1）概述及开发环境的搭建

    一.概述: 0.为什么会有这篇文章 说实在的,在2016初的时候,我就萌生了写一个操作系统的念头,但是这对于我一个菜鸟来说,犹如登天. 既然想了就去写,即使最后做不完,也不后悔. 抱着这样的念头,我开 ...

  3. arttemplate.js简洁写法案例

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. hdu2680 Choose the best route 最短路（多源转单源）

    此题中起点有1000个,边有20000条.用链式前向星建图,再枚举起点用SPFA的话,超时了.(按理说,两千万的复杂度应该没超吧.不过一般说计算机计算速度 1~10 千万次/秒.也许拿最烂的计算机来卡 ...

  5. 关于H5移动端开发 iPhone X适配

    一. 媒体查询. @media screen and (device-width:375px) and (device-height:812px){ #header { height: 88px; p ...

  6. boost的单例模式

    template <typename T> struct singleton_default {   private:     struct object_creator     {    ...

  7. Nagios Windows客户端NSClient++ 0.4.x安装配置

    NSClient++ 0.3.x和NSClient++ 0.4.x的配置完全不一样,官方的文档也没有全部更新.我记录下自己的一些操作.   一.下载安装NSClient++ 1.到http://nsc ...

  8. 可以忽略的：BASH：/:这是一个目录

    linux Ubuntu 14.04 在使用VIM编辑 /etc/profile 保存之后,出现了这个问题 其实,这个是可以忽略不计的问题,字符编码问题

  9. 杭电1003 Max Sum 【连续子序列求最大和】

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1003 题目意思: 即给出一串数据,求连续的子序列的最大和 解题思路: 因为我们很容易想到用一个max ...

  10. Java泛型的一段代码

    package com.chase.test; import java.util.ArrayList; import java.util.Hashtable; import java.util.Lis ...