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


Posted in Javascript onNovember 23, 2015

本文实例讲述了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 处理

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

插件使用说明:

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>

示例效果图片:

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

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

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

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

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

jquery实现表单验证简单实例演示 jquery实现表单验证简单实例演示  上传在这了,自己右键另存为吧。

本文已被整理到了《jquery表单验证大全》 ,欢迎大家学习阅读。

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

Javascript 相关文章推荐
Javascript学习笔记1 数据类型
Jan 11 Javascript
jquery isEmptyObject判断是否为空对象的函数
Feb 14 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
Jun 05 Javascript
js Math 对象的方法
Sep 01 Javascript
使用js显示当前时间示例
Mar 02 Javascript
上传图片js判断图片尺寸和格式兼容IE
Sep 01 Javascript
基于javascript实现仿百度输入框自动匹配功能
Jan 03 Javascript
Javascript中的对象和原型(二)
Aug 12 Javascript
Map.vue基于百度地图组件重构笔记分享
Apr 17 Javascript
妙用缓存调用链实现JS方法的重载
Apr 30 Javascript
jQuery创建及操作xml格式数据示例
May 26 jQuery
vue-router 中 meta的用法详解
Nov 01 Javascript
JavaScript与HTML的结合方法详解
Nov 23 #Javascript
js实现接收表单的值并将值拼在表单action后面的方法
Nov 23 #Javascript
跟我学习javascript的垃圾回收机制与内存管理
Nov 23 #Javascript
跟我学习javascript解决异步编程异常方案
Nov 23 #Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
Nov 23 #Javascript
Bootstrap每天必学之表单
Nov 23 #Javascript
jquery制作属于自己的select自定义样式
Nov 23 #Javascript
You might like
PHP面向对象编程快速入门
2006/10/09 PHP
PHP中用正则表达式清除字符串的空白
2011/01/17 PHP
php实现smarty模板无限极分类的方法
2015/12/07 PHP
laravel框架的安装与路由实例分析
2019/10/11 PHP
fromCharCode和charCodeAt 方法
2006/12/27 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
2010/12/28 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
JQuery中节点遍历方法实例
2015/05/18 Javascript
AngularJS 单元测试(一)详解
2016/09/21 Javascript
JS中offset和匀速动画详解
2018/02/06 Javascript
echarts整合多个类似option的方法实例
2018/07/10 Javascript
解决webpack dev-server不能匹配post请求的问题
2018/08/24 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
[05:28]刀塔密之一:团结则存
2014/07/03 DOTA
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
Python实现打印螺旋矩阵功能的方法
2017/11/21 Python
利用Python如何生成hash值示例详解
2017/12/20 Python
Python实现的随机森林算法与简单总结
2018/01/30 Python
使用pygame模块编写贪吃蛇的实例讲解
2018/02/05 Python
django 通过ajax完成邮箱用户注册、激活账号的方法
2018/04/17 Python
python中map的基本用法示例
2018/09/10 Python
详解python中的hashlib模块的使用
2019/04/22 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
Python自动化完成tb喵币任务的操作方法
2019/10/30 Python
pandas实现将日期转换成timestamp
2019/12/07 Python
windows下Pycharm安装opencv的多种方法
2020/03/05 Python
Windows 下python3.8环境安装教程图文详解
2020/03/11 Python
python如何调用java类
2020/07/05 Python
python获得命令行输入的参数的两种方式
2020/11/02 Python
KELLER SPORTS荷兰:在线订购最好的运动产品
2020/10/13 全球购物
金融专业个人求职信
2013/09/22 职场文书
机电专业大学生职业规划书范文
2014/02/25 职场文书
国际贸易毕业生求职信
2014/07/20 职场文书
大足石刻导游词
2015/02/02 职场文书
大学生实习介绍信
2015/05/05 职场文书
2019七夕节祝福语36句,快来收藏吧
2019/08/06 职场文书