html5表单验证

1.第一步在js中写方法，放在$(document).ready(function(){})里面
//需要但没有填写区域的提示格式
var enrollBatchForm = $("form[id^='enrollBatchForm']");
enrollBatchForm.each(function(){
var formId = this.id;
var flag = formId.substr(formId.indexOf("_") + 1);
$(this).html5Validate(function() {
//调用保存方法
saveEnrollBatch(flag);//在后台写saveEnrollBatch方法
});
});
2.定义一个

3.在label中定义为必填项,for=""定义提示内容
*招生批次：
4.定义一个submit提交按钮

保存
5.html5Validate 接口
// 全局对象，可扩展
OBJREG = {
EMAIL:"^[a-z0-9._%-]+@([a-z0-9-]+\\.)+[a-z]{2,4}$",
NUMBER: "^\\-?\\d+(\\.\\d+)?$",
URL:"^(http|https|ftp)\\:\\/\\/[a-z0-9\\-\\.]+\\.[a-z]{2,3}(:[a-z0-9]*)?\\/?([a-z0-9\\-\\._\\?\\,\\'\\/\\\\\\+&%\\$#\\=~])*$",
TEL:"^1\\d{10}$",
ZIPCODE:"^\\d{6}$",
"prompt": {
radio: "请选择一个选项",
checkbox: "如果要继续，请选中此框",
"select": "请选择列表中的一项",
email: "请输入电子邮件地址",
url: "请输入网站地址",
tel: "请输入手机号码",
number: "请输入数值",
date: "请输入日期",
pattern: "内容格式不符合要求",
empty: "请填写此字段",
multiple: "多条数据使用逗号分隔"
}
};

$.html5Attr = function(ele, attr) {
if (!ele || !attr) return undefined;
// 为了向下兼容jQuery 1.4
if (document.querySelector) {
return $(ele).attr(attr);
} else {
// IE6, 7
var ret;
ret = ele.getAttributeNode(attr);
// Return undefined if nodeValue is empty string
return ret && ret.nodeValue !== "" ? ret.nodeValue : undefined;
}
};
$.html5Validate = (function() {
// 验证需要的子集方法 如是否为空，是否正则匹配，是否溢出
return {
isSupport: (function() {
return $('').attr("type") === "email";
})(),
isEmpty: function(ele, value) {
value = value || $.html5Attr(ele, "placeholder");
var trimValue = ele.value;
if (ele.type !== "password") {
trimValue = $.trim(trimValue);
}
if (trimValue === "" || trimValue === value) return true;
return false;
},
isRegex: function(ele, regex, params) {
// 原始值和处理值
var inputValue = ele.value, dealValue = inputValue, type = ele.getAttribute("type") + "";
type = type.replace(/\W+$/, "");

if (type !== "password") {
// 密码不trim前后空格
dealValue = $.trim(inputValue);
if (type !== "text" && type !== "null" && ele.tagName.toLowerCase() != "textarea") {
// 非密码框和文本框进行全半角转换
dealValue = DBC2SBC(dealValue);
}
//  文本框值改变，重新赋值
if (dealValue !== inputValue) $(ele).val(dealValue);
}

// 获取正则表达式，pattern属性获取优先，然后通过type类型匹配。注意，不处理为空的情况
regex = regex || (function() {
return $.html5Attr(ele, "pattern");
})() || (function() {
// 文本框类型处理，可能有管道符——多类型重叠，如手机或邮箱
return type && $.map(type.split("|"), function(typeSplit) {
var matchRegex = OBJREG[typeSplit.toUpperCase()];
if (matchRegex) return matchRegex;
}).join("|");
})();

if (dealValue === "" || !regex) return true;

// multiple多数据的处理
var isMultiple = $(ele).hasProp("multiple"), newRegExp = new RegExp(regex, params || 'i');
// number类型下multiple是无效的
if (isMultiple && !/^number|range$/i.test(type)) {
var isAllPass = true;
$.each(dealValue.split(","), function(i, partValue) {
partValue = $.trim(partValue);
if (isAllPass && !newRegExp.test(partValue)) {
isAllPass = false;
}
});
return isAllPass;
} else {
return newRegExp.test(dealValue);
}
return true;
},
isOverflow: function(ele) {
if (!ele) return false;
//  大小限制
var attrMin = $(ele).attr("min"), attrMax = $(ele).attr("max"), attrStep
// 长度限制
, attrDataMin, attrDataMax
// 值
, value = ele.value;

if (!attrMin && !attrMax) {
attrDataMin = $(ele).attr("data-min"), attrDataMax = $(ele).attr("data-max");
if (attrDataMin && value.length < attrDataMin) {
$(ele).testRemind("至少输入" + attrDataMin + "个字符");
ele.focus();
} else if (attrDataMax && value.length > attrDataMax) {
$(ele).testRemind("最多输入" + attrDataMax + "个字符");
$(ele).selectRange(attrDataMax, value.length);
} else {
return false;
}
} else {
// 数值大小限制
value = Number(value);
attrStep = Number($(ele).attr("step")) || 1;
if (attrMin && value < attrMin) {
$(ele).testRemind("值必须大于或等于" + attrMin);
} else if (attrMax && value > attrMax) {
$(ele).testRemind("值必须小于或等于" + attrMax);
} else if (attrStep && !/^\d+(\.0+)?$/.test((Math.abs((value - attrMin || 0)) / attrStep).toFixed(10))) {
$(ele).testRemind("值无效");
} else {
return false;
}
ele.focus();
ele.select();
}
return true;
},
isAllpass: function(elements, options) {
if (!elements) return true;
var defaults = {
// 优先label标签作为提示文字
labelDrive: true
};
params = $.extend({}, defaults, options || {});

if (elements.size && elements.size() == 1 && elements.get(0).tagName.toLowerCase() == "form") {
elements = elements.find(":input");
} else if (elements.tagName && elements.tagName.toLowerCase() == "form") {
elements = $(elements).find(":input");
}
var self = this;
var allpass = true
 , remind = function(control, type, tag) {
var key = $(control).attr("data-key"), label = $("label[for='"+ control.id +"']"), text= '', placeholder;

if (params.labelDrive) {
placeholder = $.html5Attr(control, "placeholder");
label.each(function() {
var txtLabel = $(this).text();
if (txtLabel !== placeholder) {
text += txtLabel.replace(/\*|:|：/g, "");
}
});
}

// 如果元素完全显示
if ($(control).isVisible()) {
if (type == "radio" || type == "checkbox") {
$(control).testRemind(OBJREG.prompt[type], {
align: "left"
});
control.focus();
} else if (tag == "select" || tag == "empty") {
// 下拉值为空或文本框文本域等为空
$(control).testRemind((tag == "empty" && text)? "您尚未输入"+ text : OBJREG.prompt[tag]);
control.focus();
} else if (/^range|number$/i.test(type) && Number(control.value)) {
// 整数值与数值的特殊提示
$(control).testRemind("值无效");
control.focus();
control.select();
} else {
// 文本框文本域格式不准确
// 提示文字的获取
var finalText = OBJREG.prompt[type] || OBJREG.prompt["pattern"];
if (text) {
finalText = "您输入的"+ text +"格式不准确";
}
if (type != "number" && $(control).hasProp("multiple")) {
finalText += "，" + OBJREG.prompt["multiple"];
}

$(control).testRemind(finalText);
control.focus();
control.select();
}
} else {
// 元素隐藏，寻找关联提示元素, 并走label提示流(radio, checkbox除外)
var selector = $(control).attr("data-target");
var target = $("#" + selector);
if (target.size() == 0) {
target = $("." + selector);
}
var customTxt = "您尚未" + (key || (tag == "empty"? "输入": "选择")) + ((!/^radio|checkbox$/i.test(type) && text) || "该项内容");
if (target.size()) {
if (target.offset().top < $(window).scrollTop()) {
$(window).scrollTop(target.offset().top - 50);
}
target.testRemind(customTxt);
} else {
alert(customTxt);
}
}
return false;
};

elements.each(function(){
var el = this, type = el.getAttribute("type"), tag = el.tagName.toLowerCase(), isRequired = $(this).hasProp("required");
// type类型
if (type) {
var typeReplace = type.replace(/\W+$/, "");
if (!params.hasTypeNormally && $.html5Validate.isSupport && type != typeReplace) {
// 如果表单元素默认type类型保留，去除某位空格或管道符
try { el.type = typeReplace; } catch(e) {}
}
type = typeReplace;
}

if (allpass == false || el.disabled || type == 'submit' || type == 'reset' || type == 'file' || type == 'image') return;
// 需要验证的有
// input文本框, type, required, pattern, max, min以及自定义个数限制data-min, data-max
// radio, checkbox
// select
// textarea
// 先从特殊的下手，如单复选框
if (type == "radio" && isRequired) {
// 单选框，只需验证是否必选，同一name单选组只有要一个设置required即可
var eleRadios = el.name? $("input[type='radio'][name='"+ el.name +"']"): $(el)
, radiopass = false;

eleRadios.each(function() {
if (radiopass == false && $(this).is(":checked")) {//20140609 Chvin
radiopass = true;
}
});

if (radiopass == false) {
allpass = remind(eleRadios.get(0), type, tag);
}
} else if (type == "checkbox" && isRequired && !$(el).is(":checked")) {//20140609 zhangxinxu
// 复选框是，只有要required就验证，木有就不管
allpass = remind(el, type, tag);
} else if (tag == "select" && isRequired && !el.value) {
// 下拉框只要关心值
allpass = remind(el, type, tag);
} else if ((isRequired && self.isEmpty(el)) || !(allpass = self.isRegex(el))) {
// 各种类型文本框以及文本域
// allpass为true表示是为空，为false表示验证不通过
allpass? remind(el, type, "empty"): remind(el, type, tag);
allpass = false;
} else if (self.isOverflow(el)) {
// 最大值最小值, 个数是否超出的验证
allpass = false;
}
});

return allpass;
}
};
})();