这篇文章转自--寒飞，原帖地址http://blog.csdn.net/luoyehanfei/article/details/42262249 QQ交流群235032949
纯javascript验证库详解
还是坚持一贯的原则，编写任何一个插件的时候不引用其它框架。这样做的好处与坏处、
好处：耦合度降低，提升自我编码水平，总有一天你就能成为编写框架的大神。
坏处：琐碎，耗时一点。
javascript的验证网上铺天盖地很多，jquery.validate.js也是非常强大的。为什么还要重复造轮子呢？
1、我喜欢所有的js插件都是在自己可控范围内，特别是高频率用到的插件。
2、纯js，减少库的依赖，我这里的验证库就100来行。
假设我有某个页面，就是验证是下帐号是否非法.......非得让我去引用上万行的jquery。。。。这尼玛不科学啊！ 所以我重复造了这个轮子。
我喜欢先把最终的效果预设好，然后再朝着这个目标走下去。
先看html代码与调用代码，之后我们再慢慢分析实现代码
<div id="loginbox">
<div id="errdiv"></div>
<input type="text" id="username" data-validate-option="isAccount" />
<input type="text" id="username" data-validate-option="isNull"
data-validate-message="密码不能为空" /> <button onclick="save()">提交</button>
</div>
<script type="text/javascript">
function save() {
// if ($validate({ doc: "valibox", uiback: function (domone, valione, message) {
// document.getElementById("errdiv").innerHTML = message;
// }}).begin())
// {
// //自定义显示方式
// } if ($validate({ doc: "valibox" }).begin()) {
//默认显示方式
}
}
</script>
html代码中，有2个文本框，1个按钮，按钮是用来触发验证的（当然后面及时验证肯定是少不了的）
分析文本框，它有2个自定义的属性 data-validate-option（定义了验证的类型） data-validate-message（定义了验证不通过时提示的消息）
分析js代码，被注释掉的代码是自定义验证的uiback（默认验证的提示提供了一种悬浮的提示框，效果不错），假设你要自定义验证提示消息的显示方式，那么就用第一种，而觉得默认的已经够炫的话，你也可以保持默认的，反正就是尽量的灵活。
在它的构造函数残里，有个doc的属性，它是我们验证的关键，指定了需要验证的控件或“区域”，如果此项为空，那么将验证整个html，即包含在页面上所有需要验证的元素。
好了，参数非常的简单，简单的不能再简单了。下面直接上效果图：
OK。效果图已经出来了，多的不说，说说上面的input其中帐号是没有data-validate-message属性的，这个是由默认配置提供的（用户如果不提供，则使用默认消息->用户指编码人员），多的就不说了，这个是默认的效果提示。
下面重点来讲讲代码的实现部分：$validate({ doc: "valibox" }).begin()) ，这个是我们代码的最终调用形态，首先构造validate对象，传入构造参数，然后调用begin()，即开始验证进行验证，验证成功返回true,失败返回false.
OK，贴源码。
(function () {
$validate = window.$validate = function (options) {
return new $validate.prototype.init(options);
};
$validate.prototype = {
valilist: [
{ name: "isEmail", expression: /^\w+([\.\-]\w+)*\@\w+([\.\-]\w+)*\.\w+$/, message: "邮箱格式不正确" },
{ name: "isInt", expression: /^[-+]?\d*$/, message: "必须为整数" },
{ name: "isDate", expression: /^(\d{4})\-(\d{2})\-(\d{2})$/, message: "日期格式不正确" },
{ name: "isDateShort", expression: /^(\d{4})\-(\d{2})\-(\d{2}) (\d{2}):(\d{2}):(\d{2})$/, message: "日期格式不正确" },
{ name: "isLetter", expression: /^[a-zA-Z]+$/, message: "必须为英文字母" },
{ name: "isTel", expression: /((d{3,4})|d{3,4}-)?d{7,8}(-d{3})*/, message: "电话格式不正确" },
{ name: "isAccount", expression: /^[a-zA-Z][a-zA-Z0-9_]{5,19}$/, message: "必须以字母开头，且是数字、字母、下划线的6-20位组合" },
{ name: "isUrl", expression: /a-zA-z]+:\/\/[^\s]*/, message: "网址格式不正确" },
{ name: "isIdcard", expression: /d{18}|d{15}/, message: "身份证号必须为15或18位数字" },
{ name: "isTel", expression: /d{6}/, message: "邮政编码必须为6位数字" },
{ name: "isNull", expression: /\S/, message: "此项不能为空" }
],
extend: function EvUpdate(NewObject, OldObject) {
function clonePrototype() { }
clonePrototype.prototype = NewObject;
var obj = new clonePrototype();
for (var ele in obj) {
if (typeof (obj[ele]) == "object")
EvUpdate(obj[ele], OldObject[ele]);
else
OldObject[ele] = obj[ele];
}
},
config: { doc: null, realtime: false, callback: null, uiback: null, tags: "input", valiattr: "data-validate-option", valimessageattr: "data-validate-message" },
init: function (options) {
this.extend(options, this.config);
if (typeof (this.config.doc) == "string") {
this.config.doc = document.getElementById(this.config.doc);
}
return this;
},
serch: function (name) {
for (var i = 0; i < this.valilist.length; i++) {
if (name == this.valilist[i].name) {
return this.valilist[i];
}
}
return null;
},
begin: function () {
if (!this.config.doc) {
return false;
}
if (this.config.doc.hasChildNodes()) {
var alls = new Array();
alls.push(this.config.doc.getElementsByTagName(this.config.tags));
for (var i = 0; i < alls.length; i++) {
for (var y = 0; y < alls[i].length; y++) {
var valitype = alls[i][y].getAttribute(this.config.valiattr);
var valione = this.serch(valitype);
if (valitype && valione) {
var value = alls[i][y].value;
var message = alls[i][y].getAttribute(this.config.valimessageattr);
var result = value.match(valione.expression);
if (result == null) {
this.show(alls[i][y], valione, message);
return false;
}
}
}
}
}
else {
var valitype = this.config.doc.getAttribute(this.config.valiattr);
var valione = this.serch(valitype);
if (valitype && valione) {
var value = this.config.doc.value;
var message = this.config.doc.getAttribute(this.config.valimessageattr);
var result = value.match(valione.expression);
if (result == null) {
this.show(this.config.doc, valione, message);
return false;
}
}
}
return true;
},
show: function (domone, valione, message) {
if (this.config.uiback == null) {
domone.focus();
var valimessage = message != null ? message : valione.message;
var _hg = domone.clientHeight;
var _width = domone.clientWidth;
var t = domone.offsetTop;
var l = domone.offsetLeft;
while (domone = domone.offsetParent) {
t += domone.offsetTop;
l += domone.offsetLeft;
};
t = t + _hg;
function parseNode(arg) { var objE = document.createElement("div"); objE.innerHTML = arg; return objE.childNodes[0]; };
var str = "<div id=\"_lxpfloattip_\" onclick=\"javascript:document.body.removeChild(document.getElementById('_lxpfloattip_'))\" style=\"width:" + _width + "px;z-index: 800000; position: absolute; left: " + l + "px; top: " + t + "px;\"><table cellspacing=\"0\" cellpadding=\"0\" border=\"0\" style=\"width:200px\"><tbody><tr style=\"height:auto\"><td class=\"tip_lefttop\"></td><td class=\"tip_top\"></td><td class=\"tip_righttop\"></td></tr><tr><td class=\"tip_left\"></td><td id=\"_lxpfloattip_value\" bgcolor=\"#ffffda\" style=\"color:navy;font-size:14px\">" + valimessage + "</td><td class=\"tip_right\"></td></tr><tr><td class=\"tip_leftbottom\"></td><td class=\"tip_bottom\"></td><td class=\"tip_rightbottom\"></td></tr></tbody></table></div>";
var validatedemo = parseNode(str);
document.body.appendChild(validatedemo);
setTimeout("document.body.removeChild(document.getElementById(\"_lxpfloattip_\"))", 2000);
}
else {
domone.focus();
this.config.uiback(domone, valione, message);
}
}
};
$validate.prototype.init.prototype = $validate.prototype;
})();
1、第一段代码：$validate = window.$validate = function (options) { return new $validate.prototype.init(options); };
我们调用时使用的 $validate(....);从这里可以看出来$validate=某个函数->返回了一个对象，实际上当我们使用$validate(...)时，就调用了function (options) { return new $validate.prototype.init(options); };这个函数，返回了一个新的实例。
2、构造函数：它返回了一个new $validate.prototype.init(options); ，这句话如果读过jquery源码的朋友们很容易理解。单从这里我们理解不了它具体返回了什么东西，得扒开init函数看一下。
init: function (options) {
this.extend(options, this.config);
if (typeof (this.config.doc) == "string") {
this.config.doc = document.getElementById(this.config.doc);
}
return this;
},
init的函数接受一个options的参数，这个参数实际上就是从$validate(....)构造函数中过来的。重点来了，
this.extend，this.config，return this; 这里连续用到了几个this，这是怎么回事呢？精通js的朋友知道this的作用域的问题，这里的作用域是在init函数里，this的话不应该指向$validate.prototype啊（this.extent是在$validate.prototype扩展里的），那它到底是怎么可以这样直接调用$validate.prototype域的成员的呢？这里涉及到一个prototype实现继承的方法，这里的这个方法和jquery的选择器实现是如出一辙。我们来看看整个代码的最后一行：$validate.prototype.init.prototype = $validate.prototype; 最后一行这样写 init.prototype=$validate.prototype。原来如此，init的原型引用到$validate的原型上去了，怪不得在init函数中的this可以调用 this.extend，this.config，return this; 这些玩意。
原型引用就讲解到这里，实际上init里的this 就是$validate的原型引用。
接着看
init this.extend(options, this.config);
if (typeof (this.config.doc) == "string") {
this.config.doc = document.getElementById(this.config.doc);
}
这2句代码，第一句是深层赋值（这是一个我在项目中经常会用到的方法，它的作用是可以深度赋值），
我打个简单的比方，假设我们有个函数：
function fuc(options)
{
var thisoptions ={name:"张三",age:23,range:{left:10,right:20}};
//这里我需要根据传递进来的参数options对 thisoptions进行赋值，
thisoptions=options;//这样是错误的，为什么？请看下面调用
}
假设我调用时传递：fuc({name:"李四",age:20,range:{left:20}};) //
当进行调用之后，在fuc内部，如果使用thisoptions.range.right 会报错，因为传递的参数并没有right的参数，所以在函数内部用=的方式，会把内部的成员结构破坏掉。解决它有2种办法，一个就是对象属性少量的情况下，单独赋值，这样可能会非常麻烦（老办法，不可取），第二种就是我上面用到的深层赋值了，它不会破坏函数内部成员的结构，使用方便，以后添加了属性也不用更改代码。这个解释就说道这，有兴趣的自己去试试。
接着上面的代码说 if (typeof (this.config.doc) == "string") 没啥说的了，这里就已经说明了，在传递$validate()参数即可为字符串，也可以为对象。字符串会根据id去匹配，对象就直接是对象了。
3、valilist。这是一个数组，里面定义了所有常用的验证，这里我只写了几个，用的时候自己加进去就行。非常简单，网上把正则百度出来粘贴进去就OK。
4、config: { doc: null, realtime: false, callback: null, uiback: null, tags: "input", valiattr: "data-validate-option", valimessageattr: "data-validate-message" },
定义了验证的配置，doc刚才已经说了,realtime是否及时验证，默认false，（及时验证即焦点离开文本框时就会触发验证，这个我还没去实现，实现也非常简单）。callback：原先设计用来处理验证失败的回调函数(现在暂时没用),uiback列子中已用代码说明，自定义显示UI.tags:默认验证的标签，input,可以加其它的，比如select,lable,div等，都可以进行验证，不仅仅是表单哟，呵呵。 valiattr和valimessageattr，这个就是更为强大的配置，可以和你现有的验证进行整合。属性名可以为其它，并非规定的data-validate-option和data-validate-message。
5、serch，找寻与匹配option对象数组中的验证规则，不太想说，太简单了自己看。
6、begin，这里也基本没啥复杂的东西了，上面解释的够清楚了，主要就是根据配置规则进行验证了。看一遍就懂
7、show，显示错误信息，非常简单，自己看看吧。
