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 相关文章推荐
JS类中定义原型方法的两种实现的区别
Mar 08 Javascript
javascript实现面向对象类的功能书写技巧
Mar 07 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
Feb 27 Javascript
php析构函数的具体用法小结
Mar 11 Javascript
Javascript动态创建表格及删除行列的方法
May 15 Javascript
关于在Servelet中如何获取当前时间的操作方法
Jun 28 Javascript
js 获取图像缩放后的实际宽高,位置等信息
Mar 07 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 Javascript
AngularJS中的路由使用及实现代码
Oct 09 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
Feb 27 Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 Javascript
JS数组索引检测中的数据类型问题详解
Jan 11 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/12/21 PHP
PHP mkdir()定义和用法
2009/01/14 PHP
PHP使用缓存即时输出内容(output buffering)的方法
2015/08/03 PHP
php异步:在php中使用fsockopen curl实现类似异步处理的功能方法
2016/12/10 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
在laravel5.2中实现点击用户头像更改头像的方法
2019/10/14 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
jquery 弹出层实现代码
2009/10/30 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
2013/05/06 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
Javascript 多物体运动的实现
2014/12/24 Javascript
让JavaScript中setTimeout支持链式操作的方法
2015/06/19 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
2015/08/07 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
jQuery弹出层插件popShow用法示例
2017/01/23 Javascript
微信小程序获取用户openid的实现
2018/12/24 Javascript
解决vue跨域axios异步通信问题
2019/04/17 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
vue el-upload上传文件的示例代码
2020/12/21 Vue.js
python用字典统计单词或汉字词个数示例
2014/04/22 Python
python多重继承新算法C3介绍
2014/09/28 Python
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
python 拼接文件路径的方法
2018/10/23 Python
Python代码打开本地.mp4格式文件的方法
2019/01/03 Python
Django 自定义分页器的实现代码
2019/11/24 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
python实现猜数游戏(保存游戏记录)
2020/06/22 Python
Python如何给你的程序做性能测试
2020/07/29 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
个人生活学习自我评价范文
2013/11/26 职场文书
公司薪酬管理制度
2014/01/31 职场文书
小学见习报告
2014/10/31 职场文书
租赁协议书
2015/01/27 职场文书