首页 > 代码库 > 纯javascript验证，100行超精简代码。
纯javascript验证，100行超精简代码。
这篇文章转自--寒飞，原帖地址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，显示错误信息，非常简单，自己看看吧。
纯javascript验证，100行超精简代码。