当前位置:  首页  >  PHP资讯  >  业界资讯

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

这篇文章向大家推荐了一个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 " + msg + ""; if (mark) _html = "" + msg + ""; $(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示例代码:

        
  • 邮箱:
  • 密码:
  • 确认密码:
  • 手机:
  • 数字:
  • 地址:
  • 不加check验证的文本框:

示例效果图片:

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

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

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

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

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

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

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

内容推荐:免费高清PNG素材下载
吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有 京ICP备19059560号-4