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

本文实例讲述了jquery实现表单验证代码。分享给大家供大家参考。具体如下:
运行效果截图如下:

具体代码如下:

直接上插件实现代码了,围绕代码进行讲解比较容易点:

/*
描述:基于jquery的表单验证插件。
*/

(function ($) {
  $.fn.checkForm = function (options) {
    var root = this; //将当前应用对象存入root

    var isok = false; //控制表单提交的开关

    var pwd1; //密码存储

    var defaults = {
      //图片路径
      img_error: "img/error.gif",
      img_success: "img/success.gif",

      //提示信息
      tips_success: '', //验证成功时的提示信息,默认为空
      tips_required: '不能为空',
      tips_email: '邮箱地址格式有误',
      tips_num: '请填写数字',
      tips_chinese: '请填写中文',
      tips_mobile: '手机号码格式有误',
      tips_idcard: '身份证号码格式有误',
      tips_pwdequal: '两次密码不一致',

      //正则
      reg_email: /^\w+\@[a-zA-Z0-9]+\.[a-zA-Z]{2,4}$/i, //验证邮箱
      reg_num: /^\d+$/,                 //验证数字
      reg_chinese: /^[\u4E00-\u9FA5]+$/,         //验证中文
      reg_mobile: /^1[3458]{1}[0-9]{9}$/,        //验证手机
      reg_idcard: /^\d{14}\d{3}?\w$/           //验证身份证
    };

    //不为空则合并参数
    if(options)
      $.extend(defaults, options);

    //获取(文本框,密码框,多行文本框),当失去焦点时,对其进行数据验证
    $(":text,:password,textarea", root).each(function () {
      $(this).blur(function () {
        var _validate = $(this).attr("check"); //获取check属性的值
        if (_validate) {
          var arr = _validate.split(' '); //用空格将其拆分成数组
          for (var i = 0; i < arr.length; i++) {
            //逐个进行验证,不通过跳出返回false,通过则继续
            if (!check($(this), arr[i], $(this).val()))
              return false;
            else
              continue;
          }
        }
      })
    })

    //表单提交时执行验证,与上面的方法基本相同,只不过是在表单提交时触发
    function _onSubmit() {
      isok = true;
      $(":text,:password,textarea", root).each(function () {
        var _validate = $(this).attr("check");
        if (_validate) {
          var arr = _validate.split(' ');
          for (var i = 0; i < arr.length; i++) {
            if (!check($(this), arr[i], $(this).val())) {
              isok = false; //验证不通过阻止表单提交,开关false
              return; //跳出
            }
          }
        }
      });
    }

    //判断当前对象是否为表单,如果是表单,则提交时要进行验证
    if (root.is("form")) {
      root.submit(function () {
        _onSubmit();
        return isok;
      })
    }


    //验证方法
    var check = function (obj, _match, _val) {
       //根据验证情况,显示相应提示信息,返回相应的值
      switch (_match) {
        case 'required':
          return _val ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_required, false);
        case 'email':
          return chk(_val, defaults.reg_email) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_email, false);
        case 'num':
          return chk(_val, defaults.reg_num) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_num, false);
        case 'chinese':
          return chk(_val, defaults.reg_chinese) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_chinese, false);
        case 'mobile':
          return chk(_val, defaults.reg_mobile) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_mobile, false);
        case 'idcard':
          return chk(_val, defaults.reg_idcard) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_idcard, false);
        case 'pwd1':
          pwd1 = _val; //实时获取存储pwd1值
          return true;
        case 'pwd2':
          return pwdEqual(_val, pwd1) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_pwdequal, false);
        default:
          return true;
      }
    }


    //判断两次密码是否一致(返回bool值)
    var pwdEqual = function(val1, val2) {
      return val1 == val2 ? true : false;
    }


    //正则匹配(返回bool值)
    var chk = function (str, reg) {
      return reg.test(str);
    }

    //显示信息
    var showMsg = function (obj, msg, mark) {
      $(obj).next("#errormsg").remove();//先清除
      var _html = "<span id='errormsg' style='font-size:13px;color:gray;background:url(" + defaults.img_error + ") no-repeat 0 -1px;padding-left:20px;margin-left:5px;'>" + msg + "</span>";
      if (mark)
        _html = "<span id='errormsg' style='font-size:13px;color:gray;background:url(" + defaults.img_success + ") no-repeat 0 -1px;padding-left:20px;margin-left:5px;'>" + msg + "</span>";
      $(obj).after(_html);//再添加
      return mark;
    }
  }
})(jQuery);



  

先来说一说实现原理:

       首先定义好正则,和相应的提示信息,

  加上自定义check属性,

  然后获取check属性的值,多个值用空格分开。利用split()将其拆分为数组,在逐个调用check()方法进行验证。

  之后通过验证的返回值来确定显示的信息。

这里有两个验证是比较特别的,就是:

1.验证是否为空 (required)

2.两次密码是否一致 (pwd2)

这两个都没有用到正则,因为根本就用不上。 两次密码是否一致 ,单独写了个方法 pwdEqual();

插件里的验证正则我只写了几个 ,如果不够用可以自行扩展添加。

扩展只需3步:

1.添加正则,

2.添加相应提示信息,

3.check()方法中添加相应 case 处理

 

插件使用说明:

  1.给表单下要进行验证的文本框,密码框 ,多行文本框加上自定义check属性

  2.多个格式验证用空格间隔,如(同时验证必填和邮箱): check="required email"

  3.如果要验证两次密码是否一致,则pwd1和pwd2一起使用,如下图:

pwd1存储第一次输入的值,pwd2存储第二次输入的值,如果你只用pwd1还好,但如果只用了pwd2,则验证是始终无法通过的。

下面给出DEMO示例代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>表单验证插件</title>
</head>
<body>
  <form id="myform" method="post" action="success.html">
    <ul>
      <li>
      邮箱:<input type="text" name="email" check="required email" />
      </li>
      <li>
      密码:<input type="password" check="required pwd1" />
      </li>
      <li>
      确认密码:<input type="password" check="required pwd2" />
      </li>
      <li>
      手机:<input type="text" name="num" check="required mobile" />
      </li>
      <li>
      数字:<input type="text" name="num" check="required num" />
      </li>
      <li>
      地址:<textarea cols="5" rows="5" check="required"></textarea>
      </li>
      <li>
      不加check验证的文本框:<input type="text" name="num" />
      </li>
    </ul>
    <input type="submit" value="提交" />
  </form>
  <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
  <script src="js/jquery.similar.checkForm.js" type="text/javascript"></script>
  <script type="text/javascript">
    $("#myform").checkForm();
  </script>
</body>
</html>

示例效果图片:

示例代码,成功提交是会跳转到success.html页面的,因此你要自己创建个success.html,里面可以什么都不写。

但是,只要有一个验证不通过,就不会成功跳转。

另外,你或许还需要2张图片:

//图片路径
 img_error: "img/error.gif",
 img_success: "img/success.gif",

   上传在这了,自己右键另存为吧。

以上就是本文的全部内容,希望能够帮助大家找更好的掌握jquery验证码的实现方法。

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。
Express: ?web application framework for?Node.js?Express 是一个简洁、灵活的 node.js Web 应用开发框架, 它提供一系列强大的特性,帮助你创建各种 Web 和移动设备应用。 目录 此文重点介绍Express4.x(具体是4.10.4)的开发框架,其中还会涉及到Mongoose,Ejs,Bootstrap等相关内容。 建立工程 目录结构 Express4.x配置文件 Ejs模板使用 Bootstrap界面框架 路由功能 Session使用 页面
Nodejs是一个年轻的编程框架,充满了活力和无限激情,一直都在保持着快速更新。基于Nodejs的官方Web开发库Express也在同步发展着,每年升级一个大版本,甚至对框架底层都做了大手术。在Express4时,替换掉中件间库connect,而改用多个更细粒度的库来取代。带来的好处是明显地,这些中间件能更自由的更新和发布,不会受到Express发布周期的影响;但问题也是很的棘手,不兼容于之前的版本,升级就意味着要修改代码。 通过一段时间的查阅资料、摸索,我发现实现上传的方式有:1.express中间件m
本文实例讲述了jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法。分享给大家供大家参考,具体如下: 一、先描述下可以实现什么: 下拉框一改变,弹出框出现,选择弹出框中的值会赋值给下拉菜单 二、代码: html head meta http-equiv="Content-Type" content="text/html; charset=utf-8" titleSubscribe策略/title style type="text/css" * { margin: 0; padding: 0;} #b
本文实例讲述了js实现接收表单的值并将值拼在表单action后面的方法。分享给大家供大家参考,具体如下: 今天遇到一个问题,在form表单中有若干个input,其中有一个上传文件的input,现在需要在点击提交按钮时,将不是文件类型的input的值得到并拼成name=value的格式加在action后面,这样就能一同传出去了 form id="myform" name="myform" method="post" action="http://www.yoursiteweb.com:8080/justsy

Nodejs的express使用教程 - 2015-11-24 15:11:15

Express 是一个简洁、灵活的 node.js Web 应用开发框架, 它提供一系列强大的特性,帮助你创建各种 Web 和移动设备应用。 1.express组织结构 app demo |---node_modules------用于安装本地模块。 |---public------------用于存放用户可以下载到的文件,比如图片、脚本、样式表等。 |---routes------------用于存放路由文件。 |---views-------------用于存放网页的模板。 |---app.js---

Bootstrap每天必学之表单 - 2015-11-24 15:11:59

本文主要讲解的是表单,这个其实对于做过网站的人来说,并不陌生,而且可以说是最为常用的提交数据的Form表单。本文主要来讲解一下内容: 1.基本案例 2.内联表单 3.水平排列的表单 4.被支持的控件 5.静态控件 6.控件状态 7.控件尺寸 8.帮助文本 基本案例 单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control的input、textarea和select元素都将被默认设置为width: 100%;。将label和前面提到的这些控件包裹在.form-group中可以获得最好的排

简单谈谈AJAX核心对象 - 2015-11-24 15:11:54

Ajax是2005年2月才诞生但是现在已经炙手可热的一项全新技术.这项新技术能够极大地改善网站的用户体验. 什么是Ajax Ajax是异步Javascript和XML(Asynchronous JavaScript and XML)的英文缩写. Ajax的核心理念在于使用XMLHttpRequest对象发送异步请求.Ajax并不是一门新的语言或技术,它实际上是几项技术按一定的方式组合在一起,共同的协作中发挥各自的作用. Ajax的优点 1.减轻服务器的负担.Ajax的原则是"按需取数据". 2.无需刷新页
本文为大家分享了javascript实现uploadify上传格式以及个数限制的关键代码,希望大家好好研究学习。 关键代码一: function deleteUrl(){ $("body").on("click",".img-wrap .mask span",function(event){ event.stopPropagation(); var qs=$('#file_upload-queuediv');//所有的队列 var id=qs.eq(2).attr('id');//得到第三个队列的id $
本文实例讲述了JQuery实现简单的折叠菜单效果代码。分享给大家供大家参考。具体如下: 运行效果截图如下: Html代码如下: div class="box" p菜单一/p ul lia1111/a/li lia1111/a/li lia1111/a/li /ul p菜单二/p ul lia2222/a/li lia2222/a/li lia2222/a/li /ul p菜单三/p ul lia3333/a/li lia3333/a/li lia3333/a/li /ul/div 插件实现代码如下: (f
由于原生select在各个浏览器的样式不统一,特别是在IE67下直接不可以使用样式控制,当PM让你做一个样式的时候,那是相当的痛苦。最好的办法就是使用自定义样式仿select效果。这里写了一个jquery插件,实现自定义的select(阉割了不少原生select的事件,但是最主要的都还在) 需要引用的样式: .self-select-wrapper{ position: relative; display: inline-block; border: 1px solid #d0d0d0; width: 2