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>
转自a5源码 http://down.admin5.com/info/2015/1124/129900.html
jquery实现表单验证简单实例的更多相关文章
- jQuery formValidator表单验证插件
什么是jQuery formValidator? jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人 ...
- 【干货】Laravel --Validate (表单验证) 使用实例
前言 : Laravel 提供了多种方法来验证应用输入数据.默认情况下,Laravel 的控制器基类使用ValidatesRequests trait,该trait提供了便利的方法通过各种功能强大的验 ...
- 【锋利的jQuery】表单验证插件踩坑
和前几篇博文提到的一样,由于版本原因,[锋利的jQuery]表单验证插件部分又出现照着敲不出效果的情况. 书中的使用方法: 1. 引入jquery源文件, 2. 引入表单验证插件js文件, 3. 在f ...
- ASP.NET MVC Jquery Validate 表单验证的多种方式
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
- [转]ASP.NET MVC Jquery Validate 表单验证的多种方式介绍
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
- Jquery Validate 表单验证的多种方式
ASP.NET MVC Jquery Validate 表单验证的多种方式 在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体 ...
- jQuery的表单验证
jQuery的表单验证 直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- Jquery 实现表单验证,所有验证通过方可提交
1. [代码]Jquery 实现表单验证,所有验证通过方可提交 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 ...
- jQuery Validate 表单验证 — 用户注册简单应用
相信很多coder在表单验证这块都是自己写验证规则的,今天我们用jQuery Validate这款前端验证利器来写一个简单的应用. 可以先把我写的这个小demo运行试下,先睹为快.猛戳链接--> ...
随机推荐
- Android 保存和恢复activity的状态数据
一般来说, 调用onPause()和onStop()方法后的activity实例仍然存在于内存中, activity的所有信息和状态数据不会消失, 当activity重新回到前台之后, 所有的改变都会 ...
- angular中的scope
angular.element($0).scope() 什么是scope? scope是一个refer to the application model的object.它是一个expression的执 ...
- mongodb数据库备份恢复-windows系统
备份语法: mongodump命令脚本语法如下: >mongodump -h dbhost -d dbname -o dbdirectory -h: MongDB所在服务器地址,例如:127.0 ...
- 打包python到exe
#!/usr/bin/python # -*- coding:utf-8 -*- import distutils import py2exe from distutils.core import s ...
- 设计模式:装饰器(Decorator)模式
设计模式:装饰器(Decorator)模式 一.前言 装饰器模式也是一种非常重要的模式,在Java以及程序设计中占据着重要的地位.比如Java的数据流处理,我们可能看到数据流经过不同的类的包装和 ...
- Oracle日常性能查看
判断回滚段竞争的SQL语句:(当Ratio大于2时存在回滚段竞争,需要增加更多的回滚段)select rn.name, rs.GETS, rs.WAITS, (rs.WAITS / rs.GETS) ...
- Swift3.0 调用C函数-_silen_name
一般情况下Swit要想调用obj-c,c或c++代码必须通过obj-c以及桥接文件才可以办到,但是使用@_silgen_name,可以对于某些简单的代码,直接跳过桥接文件和.h头文件与C代码交互. 创 ...
- webpack究竟是什么
在很久很久以前,当我们写一个web网页的时候,js实现的逻辑相对是比较弱的.但随着前端技术的发展,前端能实现的内容越来越多.在js里面加了非常非常多的逻辑,于是呢,我们就发现我们通过这种面向过程的方式 ...
- [USACO5.2]Snail Trails
嘟嘟嘟 一道很水的爆搜题,然后我调了近40分钟…… 错误:输入数据最好用cin,因为数字可能不止一位,所以用scanf后,单纯的c[0]为字母,c[1]数字………………………… #include< ...
- win7 xampp php7 yii2 配置sqlserver
第一步: https://www.microsoft.com/en-us/download/details.aspx?id=20098 下载 如下图 php7 版本 放到 xampp\php ...