之前讲了一部分揭秘系列的东西,由于年初的时候在改项目,也没有写下去。现在开始闲下来了,会继续写没写完的东西,各种原生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实现的更多相关文章

  1. Jquery揭秘系列:实现$.fn.extend 和$.extend函数

    前面我们扩展了bind方法和ready函数,这次我要讲一下$.fn.extend 和$.extend函数. 其他的不多说,直接切入主题吧! 先来看看这两个函数的区别: $.fn.extend是为查询的 ...

  2. Jquery揭秘系列:谈谈bind,one,live,delegate事件及实现

    在Jquery里面,我们用的最多的就是事件绑定了,事件绑定有多个函数.例如:bind,one,live,delegate等等. 我们先看看他们的定义,直接进入主题: bind( )方法用于将一个处理程 ...

  3. Jquery揭秘系列:实现 ready和bind事件

    讲这一节之前,先回顾之前的一篇<小谈Jquery>里面的代码: (function (win) { var _$ = function (selector, context) { retu ...

  4. Jquery揭秘系列:谈谈bind,one,live,delegate,on事件及实现

    在Jquery里面,我们用的最多的就是事件绑定了,事件绑定有多个函数.例如:bind,one,live,delegate,on等等. on() jQuery事件绑定.on()简要概述及应用 看源码发现 ...

  5. Jquery揭秘系列:ajax原生js实现

    讲到ajax这个东西,我们要知道两个对象XMLHTTPRequest和ActiveXObject ,提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求 ...

  6. 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器

    × 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...

  7. 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...

  8. 【JQuery NoviceToNinja系列】目录

    [JQuery NoviceToNinja系列]目录 [JQuery NoviceToNinja系列]01 开篇 Html页面设计和布局

  9. 【原创】书本翻页效果booklet jquery插件系列之简介

    booklet jquery插件系列之简介 本文由五月雨恋提供,转载请注明出处. 一.安装 1.添加CSS和Javascript 添加booklet CSS文件到你的页面. <link rel= ...

随机推荐

  1. SharePoint 2013 图文开发系列之WebPart

    这是我们介绍SharePoint开发入门的第一篇,在这一篇里,我们会介绍SharePoint开发的几个关键物理路径,一些开发技巧和最基础的WebPart开发. 开发工具 在SharePoint 201 ...

  2. React Native常用组件Image使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  3. iOS 整理笔记 获取手机信息(UIDevice、NSBundle、NSLocale)

    /*    iOS的APP的应用开发的过程中,有时为了bug跟踪或者获取用反馈的需要自动收集用户设备.系统信息.应用信息等等,这些信息方便开发者诊断问题,当然这些信息是用户的非隐私信息,是通过开发ap ...

  4. cocos2dx骨骼动画Armature源码分析(三)

    代码目录结构 cocos2dx里骨骼动画代码在cocos -> editor-support -> cocostudio文件夹中,win下通过筛选器,文件结构如下.(mac下没有分,是整个 ...

  5. 谈谈Fragment中的onActivityResult

    大家或许有遇到这个神坑,在Fragment中使用startActivityForResult能够成功,可是在Fragment中的onActivityResult却无法被调用.一不注意就让人一夜愁白了头 ...

  6. 在访问jsp时抛java.lang.IllegalArgumentException: Page directive: invalid value for import的原因

    问题:java.lang.IllegalArgumentException: Page directive: invalid value for import 环境:tomcat 7.0.65 出错原 ...

  7. 【iOS】屏幕适配之NSLayoutConstraint

    前言 如何实现一张图片在iPhone和iPad上显示不同的尺寸,我了解到一般有三种办法:直接手写代码动态添加约束:把NSLayoutConstraint关联到ViewController里再viewD ...

  8. IT人经济思维之创业 - 创业与投资系列文章

    前面笔者曾经写过文(IT从业者的职业规划),介绍了IT从业者的职业规划,对职业路做了规划.然后,又写了文(IT从业者的职业道路(从程序员到部门经理) - 项目管理系列文章),从技术到管理的一个笔者自己 ...

  9. mysql中boolean类型

      MYSQL保存BOOLEAN值时用1代表TRUE,0代表FALSE,boolean在MySQL里的类型为tinyint(1), MySQL里有四个常量:true,false,TRUE,FALSE, ...

  10. 【转】Hive的insert操作

    insert 语法格式为: 1. 基本的插入语法: insert overwrite table tablename [partition(partcol1=val1,partclo2=val2)] ...