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 相关文章推荐
让alert不出现弹窗的两种方法
May 18 Javascript
jQuery实现新消息闪烁标题提示的方法
Mar 11 Javascript
JavaScript父子窗体间的调用方法
Mar 31 Javascript
jQuery封装的tab选项卡插件分享
Jun 16 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
Aug 11 Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
Oct 27 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
Dec 06 Javascript
JS抛物线动画实例制作
Feb 24 Javascript
angular json对象push到数组中的方法
Feb 27 Javascript
小程序实现订单倒计时功能
Apr 23 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
Aug 28 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笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
php实现的中秋博饼游戏之绘制骰子图案功能示例
2017/11/06 PHP
解决PHP curl或file_get_contents下载图片损坏或无法打开的问题
2019/10/11 PHP
jquery 设置元素相对于另一个元素的top值(实例代码)
2013/11/06 Javascript
JQuery教学之性能优化
2014/05/14 Javascript
Javascript 数组排序详解
2014/10/22 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
谈一谈bootstrap响应式布局
2016/05/23 Javascript
使用jquery如何获取时间
2016/10/13 Javascript
AngularJS递归指令实现Tree View效果示例
2016/11/07 Javascript
详解使用路由延迟加载 Angular 模块
2017/10/12 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
2018/05/15 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
基于JS判断对象是否是数组
2020/01/10 Javascript
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
对vue生命周期的深入理解
2020/12/03 Vue.js
详解Django框架中用context来解析模板的方法
2015/07/20 Python
python spyder中读取txt为图片的方法
2018/04/27 Python
浅谈django的render函数的参数问题
2018/10/16 Python
两个元祖T1=('a', 'b'),T2=('c', 'd')使用匿名函数将其转变成[{'a': 'c'},{'b': 'd'}]的几种方法
2019/03/05 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
Django中ajax发送post请求 报403错误CSRF验证失败解决方案
2019/08/13 Python
Django 实现对已存在的model进行更改
2020/03/28 Python
python实现飞船大战
2020/04/24 Python
怎么快速自学python
2020/06/22 Python
浅析Python中字符串的intern机制
2020/10/03 Python
在校大学生个人的自我评价
2014/02/13 职场文书
借款协议书
2014/04/12 职场文书
学校2014重阳节活动策划方案
2014/09/16 职场文书
维稳工作承诺书
2015/01/20 职场文书
专职安全员岗位职责
2015/04/11 职场文书
安全温馨提示语大全
2015/07/14 职场文书
优秀党员先进事迹材料2016
2016/02/29 职场文书
python中的class_static的@classmethod的巧妙用法
2021/06/22 Python
Python 中面向接口编程
2022/05/20 Python