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 05 Javascript
在textarea中屏蔽js的某个function的javascript代码
Apr 20 Javascript
js chrome浏览器判断代码
Mar 28 Javascript
调试Node.JS的辅助工具(NodeWatcher)
Jan 04 Javascript
JS实现的驼峰式和连字符式转换功能分析
Dec 21 Javascript
如何使用vuejs实现更好的Form validation?
Apr 07 Javascript
Vue实现导出excel表格功能
Mar 30 Javascript
详解Vue取消eslint语法限制
Aug 04 Javascript
如何解决webpack-dev-server代理常切换问题
Jan 09 Javascript
详解vue中axios请求的封装
Apr 08 Javascript
JavaScript实现旋转木马轮播图
Mar 16 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
Apr 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判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
php+ajax实现图片文件上传功能实例
2014/06/17 PHP
php mysql获取表字段名称和字段信息的三种方法
2016/11/13 PHP
PHP中OpenSSL加密问题整理
2017/12/14 PHP
学习JavaScript的最佳方法分享
2011/10/21 Javascript
javascript学习笔记(七)Ajax和Http状态码
2014/10/08 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
jQuery实现向下滑出的二级菜单效果实例
2015/08/22 Javascript
JS使用单链表统计英语单词出现次数
2016/06/16 Javascript
Javascript生成带参数的二维码示例
2016/10/10 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
2018/03/23 Javascript
React Native日期时间选择组件的示例代码
2018/04/27 Javascript
在vue项目中使用md5加密的方法
2018/09/14 Javascript
Webstorm2016使用技巧(SVN插件使用)
2018/10/29 Javascript
vue.js购物车添加商品组件的方法
2019/09/17 Javascript
axios实现简单文件上传功能
2019/09/25 Javascript
浅谈vue3中effect与computed的亲密关系
2019/10/10 Javascript
这样回答继承可能面试官更满意
2019/12/10 Javascript
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
js实现电灯开关效果
2021/01/19 Javascript
python实现得到一个给定类的虚函数
2014/09/28 Python
Python中的测试模块unittest和doctest的使用教程
2015/04/14 Python
Python实现获取照片拍摄日期并重命名的方法
2017/09/30 Python
python实现随机漫步算法
2018/08/27 Python
python操作gitlab API过程解析
2019/12/27 Python
python实现发送QQ邮件(可加附件)
2020/12/23 Python
大学生个人求职信范文
2013/09/21 职场文书
文明礼仪小标兵事迹
2014/01/12 职场文书
2014预备党员党课学习心得范文
2014/07/08 职场文书
食品安全演讲稿
2014/09/01 职场文书
企业与个人合作经营协议书
2014/11/01 职场文书
煤矿安全生产工作总结
2015/08/13 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书