基于Jquery实现表单验证

有时在我们注册账户、登陆系统时,当所有验证通过方可提交 这就需要Jquery来实现表单验证,今天分享给小伙伴们一段基于Jquery实现表单验证的代码。

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Reg</title>
    <style>
      .state1{
        color:#aaa;
      }
      .state2{
        color:#000;
      }
      .state3{
        color:red;
      }
      .state4{
        color:green;
      }
    </style>
    <script src="jquery.js"></script>
    <script>
      $(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{
            return false;
          }
        });

      });
    </script>
  </head>
<body>

<form action='do.php' method='post' >
  用 户 名:<input type="text" name="username">
        <span class='state1'>请输入用户名</span><br/><br/>
  密  码:<input type="password" name="password">
        <span class='state1'>请输入密码</span><br/><br/>
  确认密码:<input type="password" name="repass">
        <span class='state1'>请输入确认密码</span><br/><br/>
  邮  箱:<input type="text" name="email">
        <span class='state1'>请输入邮箱</span><br/><br/>
  <a href="javascript:;"><img class='submit' type='image' src='./images/reg.gif' /></a>
</form>
</body>
</html>

以上就是本文的全部内容,希望大家可以喜欢。

(0)

相关推荐

  • jquery内置验证(validate)使用方法示例(表单验证)

    (1)required:true 必输字段(2)remote:"check.php" 使用ajax方法调用check.php验证输入值(3)email:true 必须输入正确格式的电子邮件(4)url:true 必须输入正确格式的网址(5)date:true 必须输入正确格式的日期(6)dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性(7)number:true 必须输入合法的数字(负数,小数)(8)

  • Jquery 表单验证类介绍与实例

    [html] 复制代码 代码如下: <form action="" method="post" id="formValidate"> 数值:<input name="" type="text" validate="number" /><span></span><br/> 浮点型:<input name="&quo

  • Jquery插件easyUi实现表单验证示例

    要实现的功能:在做添加学生信息的时候,利用easyui的验证功能判断 学号是否重复和学号只能为数字 最终效果如下图: 但在做这个的过程中,遇到了一系列的问题: 扩展validatebox的验证方法,最开始的验证代码如下: //学号格式只能为数字 ****//这里没有问题**** number: {//value值为文本框中的值 validator: function (value) { var reg = /^[0-9]*$/; return reg.test(value); }, messag

  • JQuery.validationEngine表单验证插件(推荐)

     一.说明 jQuery.validationEngine表单验证控件功能强大,自带了样式显示模式: 1.字符类型:非空验证.最大长度.最小长度.相等判断.数字和空格.数字和英文字母 2.数字类型:数字.整数.最大值.最小值 3.日期类型:日期(yyyy-MM-dd/ yyyy/MM/dd等).日期+时间.最小日期.最大日期.日期时间段 4.业务字段:url.email.phone.ipv4:ciaoca版扩展支持:qq.邮政编码.身份证.汉字. 5.Ajax后台验证:支持全局扩展定义,后台可定

  • jquery实现一个简单的表单验证实例

    表单验证在网站开发过程中经常遇到,我们可以使用服务器端语言验证,也可以使用客户端语言来验证.本文章向大家介绍jquery客户端验证表单的一个简单实例.实例仅作参考. <body> <form method="post" action=""> <div class="int"> <label for="username">用户名:</label> <!-- 为每个

  • jQuery实现动态表单验证时文本框抖动效果完整实例

    本文实例讲述了jQuery实现动态表单验证时文本框抖动效果.分享给大家供大家参考.具体如下: 这里使用jQuery实现的动态表单验证特效,当用户输入错误或没有输入的时候点击提交按钮,有问题的输入框会抖动几下,以提示用户此项有问题,文本框抖动功能都有意思,这个表单比较典型,想实现jquery Ajax表单功能的可以参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-table-txt-check-shake-style-codes

  • jQuery Validate表单验证插件 添加class属性形式的校验

    本文实例介绍了jQuery Validate 表单验证插件,添加class属性形式的校验,分享给大家供大家参考,具体内容如下 效果如下: 一.jQuery表单验证插件,添加class属性形式的校验 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery表单验证插件----添加cla

  • jquery实现简单的表单验证

    jquery如何实现简单的表单验证,我们先跟大家分享一下实现思路. 大概思路: 先为每一个required添加必填的标记,用each()方法来实现. 在each()方法中先是创建一个元素,然后通过append()方法将创建的元素加入到父元素后面. 这里面的this用的很精髓,每一次的this都对应着相应的input元素,然后获取相应的父元素. 然后为input元素添加失去焦点事件.然后进行用户名.邮件的验证. 这里用了一个判断is(),如果是用户名,做相应的处理,如果是邮件做相应的验证. 在jQ

  • Jquery插件easyUi表单验证提交(示例代码)

    复制代码 代码如下: <form id="myForm" method="post">  <table align="center" style="width:400px;height:auto;margin-top: 20px">           <tr>                                           <td align="righ

  • jquery实现表单验证简单实例演示

    本文实例讲述了jquery实现表单验证代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 直接上插件实现代码了,围绕代码进行讲解比较容易点: /* 描述:基于jquery的表单验证插件. */ (function ($) { $.fn.checkForm = function (options) { var root = this; //将当前应用对象存入root var isok = false; //控制表单提交的开关 var pwd1; //密码存储 var def

  • jquery表单验证使用插件formValidator

    1.首先在项目中添加必备js与css  2.代码中添加引用(必备引用) 复制代码 代码如下: <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <!--jquery必须库--> <script src="formValidator1/formValidator-4.0.1.min.js" type=&quo

  • jQuery EasyUI提交表单验证

    EasyUI的form表单里面的验证框,先讲解下validatebox类和相关的属性. 验证规则 验证规则是通过使用 required 和 validType 特性来定义的, 这里是已经实施的规则: email:匹配 email 正则表达式规则,系统提供的属性. url:匹配 URL 正则表达式规则 length[0,100]:允许从 x 到 y 个字符 remote['http://.../action.do','paramName']:发送 ajax 请求来验证值,成功时返回 'true'

随机推荐