自己封装的表单验证插件
本插件支
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单验证</title> <!-- <script type="text/javascript" src="verity.js"></script> --> </head> <body> <form id="aaa" name="myform" action="www.baidu.com" method=""> <div> <div></div> <label>11</label> <input type="text" ajaxurl="baidu.com" dataType="(^1[3|5|8][0-9]{9}$)" name='aa' errorMsg="error" sucMsg="success" /> </div> <div> <div></div> <label>22</label> <input type="password" dataType="(^1[3|5|8][0-9]{9}$)" name='bb' /> </div> <div> <div></div> <label>33</label> <input type="password" dataType="(^1[3|5|8][0-9]{9}$)" name='cc' nullMsg="请输入" errorMsg="两次密码输入不一致" recheck="password" /> </div> <button type="submit">提交</button> </form> <script type="text/javascript"> (function() { var c = 0, re = '', xmlhttp; function a(a, b) { return a.getAttribute(b) } function b(a, e, s, c) { a.classList.add(e); a.classList.remove(s); a.innerHTML = c } function V(a) { this.a = a || 0 this.cache = [] this.f = function() { return document.forms[a] } } function vy(d, v, e, s, n) { var t = this, z = t.parentNode.children[0]; if (v == "") { b(z, 'V_error', 'V_success', n); c++; } else if (!new RegExp(d).test(v)) { b(z, 'V_error', 'V_success', e); c++; } else if ((t.getAttribute('recheck') === "password") && (t.value != re)) { b(z, 'V_error', 'V_success', e); c++; } else { b(z, 'V_success', 'V_error', s); } } function e(fun, obj) { var i = 0, l = obj.length; for (; i < l; i++) { fun.call(obj, obj[i], i) } } function urlParam(url, name, value) { url += (url.indexOf('?') == -1 ) ? '?' : '&' ; url += encodeURIComponent(name) + "=" + encodeURIComponent(value); return url; } function loadXMLDoc(url, name, value) { url = urlParam(url, name, value); xmlhttp = null; if (window.XMLHttpRequest) { // code for IE7, Firefox, Opera, etc. xmlhttp = new XMLHttpRequest(); } else if (window.ActiveXObject) { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } if (xmlhttp != null) { xmlhttp.onreadystatechange = state_Change; xmlhttp.open("GET", url, true); xmlrequest.setRequestHeader("Content-Type" , "application/x-www-form-urlencoded"); xmlhttp.send(null); } else { alert("Your browser does not support XMLHTTP."); } } function state_Change() { if (xmlhttp.readyState == 4) { if (xmlhttp.status == 200) { console.log(xmlhttp.responseText) } else { alert("Problem retrieving XML data:" + xmlhttp.statusText); } } } V.prototype = { in: function() { c = 0; this.cache = []; var t = this.f(); for (var i = 0; i < t.elements.length; i++) { var g = t.elements[i] if (g.type === "password" && (!(!!a(g, 'recheck')))) { re = g.value; } switch (g.type) { case undefined: case 'button': case 'file': case 'reset': case 'submit': case 'checkbox': case 'radio': break; default: this.cache.push({ i: g, v: g.value.replace(/(^\s*)|(\s*$)/g, ""), d: a(g, 'dataType') || '', e: a(g, 'errorMsg') || '请填写正确信息！', s: a(g, 'sucMsg') || '填写正确', n: a(g, 'nullMsg') || '不能为空', r: a(g, 'recheck') || '', a: a(g, 'ajaxurl') || '' }); } } }, s: function() { this.in(); e(function(a, b) { vy.call(a.i, a.d, a.v, a.e, a.s, a.n) }, this.cache) if (c !== 0) { return false } else { return true } }, b: function() { var t = this; t.in(); e(function(a, b) { a.i.onblur = function() { var f = this.parentNode.children[0]; if (a.i.type === "password" && a.r == '') { re = this.value; } if (a.a) { loadXMLDoc(a.a, a.i.name,a.i.value) } var v = this.value; vy.call(a.i, t.cache[b].d, v, a.e, a.s, a.n) } }, t.cache) this.f().onsubmit = function() { c = 0; if (!t.s()) { return false; }; } } } form = function(a) { return new V(a); } })() form('myform').b(); </script> </body> </html>
持ajax用户名验证，错误提示，正确提示等，
V_error，V_success为输入错误和输入正确时tips上面对应的类
dataType="(^1[3|5|8][0-9]{9}$)" //dataType为正则验证
errorMsg="error" sucMsg="success" nullMsg="请输入" //errorMsg sucMsg nullMsg 为语句提示
recheck="password" //验证两次密码输入是否相同
