Jquery揭秘系列：Validation实现
之前讲了一部分揭秘系列的东西，由于年初的时候在改项目，也没有写下去。现在开始闲下来了，会继续写没写完的东西，各种原生js实现Jquery的功能。
转入正题，说一下今天要讲的东西。
相信很多tx在项目里面写过这样的js代码:
$("#..").click(function(){
var val=$("#..").val();
if(!val)
{
alert('.......');
return false;
}
if(!/...../.test(val))
{
alert('.......');
return false;
}
............各种验证
});
有没有觉得每次写的都是重复的东西，并且看起来不是很优雅，验证完全是可以写通用的。
有的tx会说，我用的是Mvc的验证框架 ，只需要在后台代码的类的成员属性上面标记各种attribute,就能进行验证。这样确实是方便，但是不是很好控制。
我觉得以下代码的写法看起来更直观，优雅：
var objtest = {
rules: {
col1: {
required: true,
max: 99,
min: 10,
reg: /^a/gi,
remote: 'test.ashx'
},
col2: {
required: true
}
},
msg: {
col1: {
required: 'col1必填',
max: '最大不能超过99',
min: '最小不能小于10',
reg: '必须以a开头'
},
col2: {
required: 'col2必填'
}
}
}
$("#form").Validate(objtest);
没错，这就是 validate框架里面的验证写法。
讲到这个话题，你需要做一下功课，了解一下jquery.validate.js。我现在是要讲一下里面的实现原理：
代码里面我只写了四个基本的验证：是否必填，最大值，最小值,正则匹配。
这里我写一个简单的id选择器，同样是用$符号，看过我的博客的同学应该看到过。
var $ = function () {
var arr = Array.prototype.slice.call(arguments);
return new $.prototype.Init(arr.length > ? arr[] : null);
}
下面继续扩展一些原型方法：
$.prototype = {
Init: function (id) {
this.form = document.getElementById(id);
this.childs = this.form.childNodes;
},
Validate：function(){
这段代码单独拿出来。。。
}
}
Validate方法里面有个处理错误信息的div:
var that = this;
///移除错误提醒的div
var removeDiv = function () {
var getErrdiv = document.getElementById('errmsg');
if (getErrdiv) {
that.form.removeChild(getErrdiv);
}
}
///创建一个错误提醒的div
var creatDiv = function (msg, objset) {
var div = document.createElement('div');
div.style.backgroundColor = 'red';
div.id = 'errmsg';
div.innerHTML = msg;
that.form.appendChild(div);
}
然后就是 form 的onsubmit 事件：
this.form.onsubmit = function () {
var msg = "";
var checked = true;
removeDiv();
if (obj.rules) {
for (var i in obj.rules) {
var col = obj.rules[i];
///必填验证
if (col.required) {
for (var m = 0; m < that.childs.length; m++) {
if (that.childs[m].id == i && !that.childs[m].value) {
msg = obj.msg[i].required;
that.childs[m].focus();
creatDiv(msg);
return false;
}
}
}
///最大值验证
if (col.max) {
for (var m = 0; m < that.childs.length; m++) {
if (that.childs[m].id == i && that.childs[m].value > col.max) {
msg = obj.msg[i].max;
creatDiv(msg);
that.childs[m].focus();
return false;
}
}
}
///最小值验证
if (col.min) {
for (var m = 0; m < that.childs.length; m++) {
if (that.childs[m].id == i && that.childs[m].value < col.min) {
msg = obj.msg[i].min;
creatDiv(msg);
that.childs[m].focus();
return false;
}
}
}
////正则匹配
if (col.reg) {
for (var m = 0; m < that.childs.length; m++) {
if (that.childs[m].id == i && (!col.reg.test(that.childs[m].value))) {
msg = obj.msg[i].reg;
creatDiv(msg);
that.childs[m].focus();
return false;
}
}
}
}
}
return checked;
}
这里面其实是用对象的属性对应控件的id ,然后分别做验证，只是把逻辑放在一块集中做了处理。
完整代码 ：
var $ = function () {
var arr = Array.prototype.slice.call(arguments);
return new $.prototype.Init(arr.length > 0 ? arr[0] : null);
}
$.prototype = {
Init: function (id) {
this.form = document.getElementById(id);
this.childs = this.form.childNodes;
},
Validate: function (obj) {
var that = this;
///移除错误提醒的div
var removeDiv = function () {
var getErrdiv = document.getElementById('errmsg');
if (getErrdiv) {
that.form.removeChild(getErrdiv);
}
}
///创建一个错误提醒的div
var creatDiv = function (msg, objset) {
var div = document.createElement('div');
div.style.backgroundColor = 'red';
div.id = 'errmsg';
div.innerHTML = msg;
that.form.appendChild(div);
}
this.form.onsubmit = function () {
var msg = "";
var checked = true;
removeDiv();
if (obj.rules) {
for (var i in obj.rules) {
var col = obj.rules[i];
///必填验证
if (col.required) {
for (var m = 0; m < that.childs.length; m++) {
if (that.childs[m].id == i && !that.childs[m].value) {
msg = obj.msg[i].required;
that.childs[m].focus();
creatDiv(msg);
return false;
}
}
}
///最大值验证
if (col.max) {
for (var m = 0; m < that.childs.length; m++) {
if (that.childs[m].id == i && that.childs[m].value > col.max) {
msg = obj.msg[i].max;
creatDiv(msg);
that.childs[m].focus();
return false;
}
}
}
///最小值验证
if (col.min) {
for (var m = 0; m < that.childs.length; m++) {
if (that.childs[m].id == i && that.childs[m].value < col.min) {
msg = obj.msg[i].min;
creatDiv(msg);
that.childs[m].focus();
return false;
}
}
}
////正则匹配
if (col.reg) {
for (var m = 0; m < that.childs.length; m++) {
if (that.childs[m].id == i && (!col.reg.test(that.childs[m].value))) {
msg = obj.msg[i].reg;
creatDiv(msg);
that.childs[m].focus();
return false;
}
}
}
}
}
return checked;
}
}
}
$.prototype.Init.prototype = $.prototype;
代码看着没啥难度，比较简单 。
调用方法如下 ：
<form id="test">
<input id="col1" type="text" />
<input id="col2" type="text" />
<input id="Submit1" type="submit" value="submit" />
</form>
window.onload=function(){
var objtest = {
rules: {
col1: {
required: true,
max: 99,
min: 10,
reg: /^a/gi,
remote: 'test.ashx'
},
col2: {
required: true
}
},
msg: {
col1: {
required: 'col1必填',
max: '最大不能超过99',
min: '最小不能小于10',
reg: '必须以a开头'
},
col2: {
required: 'col2必填'
}
}
}
$("test").Validate(objtest);
}
代码可以继续优化，添加各种验证方法。这里只是抛砖引玉。有啥意见或者疑问可以联系：QQ546558309,或者留言。
下一节会讲ajax的原生js实现。
Jquery揭秘系列：Validation实现的更多相关文章
- Jquery揭秘系列：实现$.fn.extend 和$.extend函数
前面我们扩展了bind方法和ready函数,这次我要讲一下$.fn.extend 和$.extend函数. 其他的不多说,直接切入主题吧! 先来看看这两个函数的区别: $.fn.extend是为查询的 ...
- Jquery揭秘系列：谈谈bind,one,live,delegate事件及实现
在Jquery里面,我们用的最多的就是事件绑定了,事件绑定有多个函数.例如:bind,one,live,delegate等等. 我们先看看他们的定义,直接进入主题: bind( )方法用于将一个处理程 ...
- Jquery揭秘系列：实现 ready和bind事件
讲这一节之前,先回顾之前的一篇<小谈Jquery>里面的代码: (function (win) { var _$ = function (selector, context) { retu ...
- Jquery揭秘系列：谈谈bind,one,live,delegate,on事件及实现
在Jquery里面,我们用的最多的就是事件绑定了,事件绑定有多个函数.例如:bind,one,live,delegate,on等等. on() jQuery事件绑定.on()简要概述及应用 看源码发现 ...
- Jquery揭秘系列：ajax原生js实现
讲到ajax这个东西,我们要知道两个对象XMLHTTPRequest和ActiveXObject ,提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求 ...
- 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器
× 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...
- 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器
× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...
- 【JQuery NoviceToNinja系列】目录
[JQuery NoviceToNinja系列]目录 [JQuery NoviceToNinja系列]01 开篇 Html页面设计和布局
- 【原创】书本翻页效果booklet jquery插件系列之简介
booklet jquery插件系列之简介 本文由五月雨恋提供,转载请注明出处. 一.安装 1.添加CSS和Javascript 添加booklet CSS文件到你的页面. <link rel= ...
随机推荐
- CocoaPods的使用及安装
本文转自:http://www.jianshu.com/p/6e5c0f78200a 一.什么是CocoaPods CocoaPods是iOS项目的依赖管理工具,该项目源码在Github上管理.开发i ...
- Linux tmp目录自动清理总结
在Linux系统中/tmp文件夹下的文件是会被清理.删除的,文件清理的规则是如何设定的呢? 以Redhat为例,这个主要是因为作业里面会调用tmpwatch命令删除那些一段时间没有访问的文件. 那么什 ...
- easyui-datagrid连接数据库实现分页查询数据
一.利用MVC思想建立底层数据库: package com.hanqi.dao; import java.util.ArrayList; import java.util.List; import o ...
- linux 安装tomcat中间件
1.首先确认是否已安装jdk.配置好所需要的环境变量,如果未安装好,则需要安装jdk和配置好正确的环境变量. 检查是否安装jdk及环境变量配置:#java -version. 2.如上述安装并配置正确 ...
- Jsoup做接口测试
最早用Jsoup是有一个小的爬虫应用要写,发现Jsoup较HttpClient轻便多了,API也方便易懂,上手很快,对于response的Document解析的选择器用的是cssSelector(Jq ...
- STM32 KEIL不能输入仿真引脚端口error 65: access violation at 0x40021000 : no 'read' permission
使用MDK自己创建一个STM32F103ZE核的项目 加入源码后编译,正常,在线仿真单步执行出现如下问题 error 65: access violation at 0x40021000 : no ' ...
- mac 安装mysql + 修改root用户密码 + 及报Access denied for user 'root'@'localhost' (using password:YES)解决办法
1.下载MySQL 到mysql的官网http://dev.mysql.com/downloads/mysql/然后在页面中会看到“MySQL Community Server”下方有一个“downl ...
- 打地鼠游戏iOS源码项目
打地鼠游戏源码,游戏是一款多关卡基于cocos2d的iPad打地鼠游戏源码,这也是一款高质量的打地鼠游戏源码,可以拥有逐步上升的关卡的设置,大家可以在关卡时设置一些商业化的模式来盈利的,非常完美的一款 ...
- Java常见问题
1. eclipse permgen space 问题: debug configrations - vm arguments最后设置:-Xms256m -Xmx512m -XX:MaxNe ...
- BZOJ1057[ZJOI2007]棋盘制作 [单调栈]
题目描述 国际象棋是世界上最古老的博弈游戏之一,和中国的围棋.象棋以及日本的将棋同享盛名.据说国际象棋起源于易经的思想,棋盘是一个8*8大小的黑白相间的方阵,对应八八六十四卦,黑白对应阴阳. 而我们的 ...