会python真的可以为所欲为0(回)
350天前
这里还有人吗1(回)
535天前这里还有人吗0(回)
535天前
每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。0(回)
760天前到处都是羊，不想上班0(回)
840天前
鸽子
0(回)
844天前verjs是一款原生js代码编写的表单验证插件，提供了常用的10种表单验证方式，包括身份证号码验证、手机电话号码、电子邮箱验证、必填字段验证、正则自定义验证、多次对比验证、最大值/最小值验证…… |
html代码： |
<!DOCTYPE html> |
<html lang="en"> |
<head> |
<meta charset="UTF-8"> |
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/> |
<meta content="yes" name="apple-mobile-web-app-capable"/> |
<meta content="black" name="apple-mobile-web-app-status-bar-style"/> |
<meta content="telephone=no" name="format-detection"/> |
<meta content="email=no" name="format-detection"/> |
<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" name="viewport"/> |
<title>verJs</title> |
<style> |
dl dt,dl dd{ |
display: inline-block; |
} |
input{ |
height: 30px; |
line-height: 30px; |
padding: 0 10px; |
} |
textarea{ |
resize: none; |
width: 120px; |
line-height: 30px; |
padding: 0 10px; |
height: 120px; |
} |
</style> |
</head> |
<body> |
<form action="http://www.yuncode.net/js/3969.html" method="post" autocomplete="off" data-form="ajax"> |
<dl> |
<dt>必填验证</dt> |
<dd> |
<input type="text" name="req"> |
</dd> |
</dl> |
<dl> |
<dt>最小数字</dt> |
<dd> |
<input type="text" name="min_number"> |
</dd> |
</dl> |
<dl> |
<dt>最大数字</dt> |
<dd> |
<input type="text" name="max_number" id="eq"> |
</dd> |
</dl> |
<dl> |
<dt>相等比较</dt> |
<dd> |
<input type="text" name="eq"> |
</dd> |
</dl> |
<dl> |
<dt>最小长度</dt> |
<dd> |
<input type="text" name="min_length"> |
</dd> |
</dl> |
<dl> |
<dt>最大长度</dt> |
<dd> |
<input type="text" name="max_length"> |
</dd> |
</dl> |
<dl> |
<dt>正则验证</dt> |
<dd> |
<input type="password" name="rule"> |
</dd> |
</dl> |
<dl> |
<dt>手机/电话验证</dt> |
<dd> |
<input type="text" name="mobile"> |
</dd> |
</dl> |
<dl> |
<dt>邮箱验证</dt> |
<dd> |
<input type="text" name="email" data-email="true"> |
</dd> |
</dl> |
<dl> |
<dt>身份证验证</dt> |
<dd> |
<input type="text" name="email" data-idcard="true"> |
</dd> |
</dl> |
<button>提交代码</button> |
</form> |
</body> |
<script src="asset/verJs.js"></script> |
<script> |
var form = new VerJs(); |
form.init({ |
form:"form",//验证的表单 |
//验证数据集，也可以在标记中以data-XXX的形式加入验证 |
data:{ |
req:{ |
required:true |
}, |
min_number:{ |
min:2 |
}, |
max_number:{ |
max:12 |
}, |
eq:{ |
equal:"#eq" |
}, |
min_length:{ |
minlength:6 |
}, |
max_length:{ |
maxlength:6 |
}, |
rule:{ |
rule:"^\\d{6}$", |
required:true |
}, |
mobile:{ |
mobile:true |
} |
}, |
//验证提示消息 |
message:{ |
req:{ |
required:"这是一条必填数据" |
}, |
rule:{ |
rule:"请输入六位数字" |
} |
}, |
success:function (data) { |
//ajax提交成功后的回调函数 |
alert("hahahha"); |
}, |
fail:function (data) { |
//ajax提交失败后的回调函数 |
alert("ieieiiruwei"); |
} |
}); |
</script> |
</html> |
VerJs.js里面的代码： |
window.VerJs = (function () { |
var ver = function () { |
this.form; |
this.messages = { |
required: "当前选项不能为空！", |
min: 0, |
max: 0, |
minlength: 0, |
maxlength: 0, |
rule: "", |
equal: "", |
mobile: "请输入有效的手机号码", |
email: "请输入规则的电子邮箱", |
idcard: "请输入有效的身份证号码" |
}; |
this.func = { |
required: this.data_required, |
min: this.data_min_value, |
max: this.data_max_value, |
minlength: this.data_min_length, |
maxlength: this.data_max_length, |
rule: this.data_rule, |
equal: this.data_equal, |
mobile: this.data_mobile, |
email: this.data_email, |
idcard: this.data_id_card |
}; |
this.change; |
this.error = function (errorMessage, target) { |
this.clear_error(target); |
target.classList.add("ver-error-input"); |
var errorTag = document.createElement("span"); |
errorTag.className = "ver-errors"; |
var iconCarets = document.createElement("i"); |
iconCarets.className = "verJsFont ver-icon-carets ver-error-caret"; |
errorTag.appendChild(iconCarets); |
var iconInfo = document.createElement("i"); |
iconInfo.className = "verJsFont icon-info-o"; |
errorTag.appendChild(iconInfo); |
var span = document.createElement("span"); |
span.innerText = errorMessage; |
errorTag.appendChild(span); |
this.insertAfter(errorTag, target); |
}; |
this.insertAfter = function (newElement, targentElement) { |
var parent = targentElement.parentNode; |
if (parent.lastChild == targentElement) { |
parent.appendChild(newElement); |
} else { |
parent.insertBefore(newElement, targentElement.nextSibling); |
} |
}; |
this.styles = function () { |
var css = document.createElement("link"), |
icon = document.createElement("link"); |
css.href = "asset/need/common.css?v=1.0.2&$_=" + Math.random(); |
icon.href = "asset/need/vericon.css?v=1.0.2&$_=" + Math.random(); |
css.rel = icon.rel = "stylesheet"; |
css.type = icon.type = "text/css"; |
var link = document.getElementsByTagName("head")[0]; |
link.appendChild(css); |
link.appendChild(icon); |
}; |
this.success = function (data) { |
alert("提交成功！") |
} |
this.fail = function (data) { |
alert("提交失败！"); |
} |
}; |
ver.prototype = { |
init: function (params) { |
var _self = this; |
this.styles(); |
this.form = document.querySelector(params.form); |
if (!this.form) this.form = document.querySelector("form"); |
this.change = params.change ? params.change : "default"; |
this._sef_data(params.data, params.message); |
this.form.onsubmit = function () { |
return _self.submit(); |
}; |
if (params.success) { |
this.success = params.success; |
} |
if (params.fail) { |
this.fail = params.fail; |
} |
}, |
submit: function () { |
this.verification(); |
var error = this.form.querySelectorAll(".ver-error-input").length; |
if (error > 0) { |
this.form.querySelector(".ver-error-input").focus(); |
return false; |
} |
var form = this.form.getAttribute("data-form"); |
if (form == "ajax") { |
this.ajax(); |
return false; |
} |
return true; |
}, |
_sef_data: function (data, message) { |
var _self = this; |
if (data) { |
for (var i in data) { |
var names = document.getElementsByName(i); |
names.forEach(function (item) { |
for (var j in data[i]) { |
var messages = message && message[i] && message[i][j] ? message[i][j] : _self.messages[j]; |
if (j != "min" && j != "max" && j != "minlength" && j != "maxlength" && j != "rule" && j != "equal") { |
item.setAttribute("data-" + j, messages); |
} else if (j == "rule") { |
item.setAttribute("data-rule", data[i][j]); |
item.setAttribute("data-rule-message", messages); |
} else { |
item.setAttribute("data-" + j, data[i][j]); |
} |
} |
}) |
} |
} |
//判断标记中是否有data验证的数据标记 |
for (var i in this.messages) { |
var names = this.form.querySelectorAll("[data-" + i + "]"); |
names.forEach(function (items) { |
var val = items.getAttribute("data-" + i); |
if (val == "true" || val == "false") { |
items.setAttribute("data-" + i, _self.messages[i]); |
} |
items.onblur = function () { |
_self.query(this); |
}; |
items.change = function () { |
_self.query(this); |
}; |
items.onfocus = function () { |
_self.clear_error(this); |
}; |
if (_self.change == "keyup") { |
items.onkeyup = function () { |
_self.query(this); |
} |
} |
}) |
} |
}, |
verification: function () { |
var _self = this; |
for (var i in this.func) { |
var names = this.form.querySelectorAll("[data-" + i + "]"); |
if (names.length > 0) { |
names.forEach(function (items) { |
_self.func[i](items, _self); |
}) |
} |
} |
}, |
query: function (objects) { |
for (var i in this.func) { |
if (objects.getAttribute("data-" + i)) { |
this.func[i](objects, this); |
} |
} |
}, |
clear_error: function (objects) { |
var parent = objects.parentNode, |
errorTag = parent.querySelector(".ver-errors"); |
if (errorTag) { |
parent.removeChild(errorTag); |
} |
objects.classList.remove("ver-error-input"); |
}, |
data_required: function (objects, _self) { |
var value = objects.value, |
errorMessage = objects.getAttribute("data-required"); |
if (value == '' || value == null) { |
_self.error(errorMessage, objects); |
return false; |
} |
return true; |
}, |
data_min_value: function (objects, _self) { |
var value = (objects.value), |
min = parseInt(objects.getAttribute("data-min")); |
if (value) { |
value == parseInt(value); |
if (isNaN(value) || min > value) { |
_self.error("最小值为：" + min, objects); |
return false; |
} |
} |
return true; |
}, |
data_max_value: function (objects, _self) { |
var value = (objects.value), |
min = parseInt(objects.getAttribute("data-max")); |
if (value) { |
value = parseInt(value); |
if (isNaN(value) || min < value) { |
_self.error("最大值为：" + min, objects); |
return false; |
} |
} |
return true; |
}, |
data_min_length: function (objects, _self) { |
var value = objects.value.length, |
min = parseInt(objects.getAttribute("data-minlength")); |
if (value < min) { |
_self.error("最少输入" + min + "个字符", objects); |
return false; |
} |
return true; |
}, |
data_max_length: function (objects, _self) { |
var value = objects.value.length, |
min = parseInt(objects.getAttribute("data-maxlength")); |
if (value > min) { |
_self.error("最多输入" + min + "个字符", objects); |
return false; |
} |
return true; |
}, |
data_rule: function (objects, _self) { |
var value = objects.value, |
rule = objects.getAttribute("data-rule"), |
errorMessage = objects.getAttribute("data-rule-message"); |
if (!errorMessage) errorMessage = "格式错误!"; |
rule = new RegExp(rule); |
if (value) { |
if (!rule.test(value)) { |
_self.error(errorMessage, objects); |
return false; |
} |
} |
return true; |
}, |
data_equal: function (objects, _self) { |
var value = objects.value, |
equal = document.querySelector(objects.getAttribute("data-equal")).value, |
errorMessage = "两次输入内容不一致"; |
if (value != equal) { |
_self.error(errorMessage, objects); |
return false; |
} |
return true; |
}, |
data_mobile: function (object, _self) { |
var value = object.value, |
rule_tel = /^(0\d{2,3}\d{7,8}|0\d{2,3}-)\d{7,8}$/, |
rule_phone = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/, |
errorMessage = object.getAttribute("data-mobile"); |
if (value && !rule_phone.test(value) && !rule_tel.test(value)) { |
_self.error(errorMessage, object); |
return false; |
} |
return true; |
}, |
data_email: function (object, _self) { |
var value = object.value, |
rule_email = /^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g, |
errorMessage = object.getAttribute("data-email"); |
if (value && !rule_email.test(value)) { |
_self.error(errorMessage, object); |
return false; |
} |
return true; |
}, |
data_id_card: function (object, _self) { |
var value = object.value, |
rule_email = /^([1-9]\d{5}[1]\d{3}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}[0-9xX]|[1-9]\d{5}\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3})$/, |
errorMessage = object.getAttribute("data-idcard"); |
if (value && !rule_email.test(value)) { |
_self.error(errorMessage, object); |
return false; |
} |
return true; |
}, |
ajax: function () { |
var _self = this; |
var data = this.formData(); |
var xhr = new XMLHttpRequest(); |
xhr.open(this.form.method, this.form.action, true); |
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); |
xhr.onreadystatechange = function () { |
if (xhr.readyState == 4) { |
if (xhr.status == 200 || xhr.status == 304) { |
_self.success(xhr.responseText); |
} else { |
_self.fail(xhr.responseText); |
} |
} |
}; |
xhr.send(data); |
}, |
formData: function () { |
var ele = [], |
inputs = this.form.querySelectorAll("input"), |
select = this.form.querySelectorAll("select"), |
text = this.form.querySelectorAll("textarea"); |
if (inputs.length > 0) { |
inputs.forEach(function (items) { |
// ele.push(items); |
var type = items.type.toLowerCase(), |
value = ""; |
if (type !== 'checkbox' && type != "radio") { |
value = items.name + "=" + items.value; |
} else { |
if (items.checked) { |
value = items.name + "=" + items.value; |
} |
} |
if (value) { |
ele.push(value); |
} |
}); |
} |
if (select.length > 0) { |
select.forEach(function (items) { |
ele.push(items.name + "=" + items.value); |
}) |
} |
if (text.length > 0) { |
text.forEach(function (items) { |
ele.push(items.name + "=" + items.value); |
}) |
} |
return encodeURI(ele.join("&")); |
} |
}; |
return ver; |
})(); |
