html5表单验证

原创 2017年09月26日 14:34:35
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.定义一个<form id>
<form action ="" class="xxxx" id="entrollBatchForm_add" name="xxx"></form>
3.在label中定义为必填项,for=""定义提示内容
<label class="control-label" for="enrollBatchName_add"><span class="required">*</span>招生批次:</label>
4.定义一个submit提交按钮
<div class="modal-footer">
<button type="Submit" class="btn green ajaxButton">保存</button>
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\\-\\._\\?\\,\\'\\/\\\\\\+&amp;%\\$#\\=~])*$",
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 $('<input type="email">').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;
}
};
})();
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_39840445/article/details/78094995

<em>html</em>的<em>checkbox</em>的javascript<em>验证</em>

[免费]HTML <em>表单验证</em> (输入框的验证) 时间:2017-9-7 JS判断是否选中<em>checkbox</em> 时间:2018-3-28 华丽的CSS3+<em>HTML5</em>表单客户端验证 时间:2018-3-27...
  • 2018年04月03日 00:00

关于表单提交带复选框验证的

1,form表单如下 input type="checkbox" name="radiobutton" id="radiobutton" class="input-xlarge" ...
  • qq_39024372
  • qq_39024372
  • 2017-09-27 14:16:10
  • 73

HTML5的表单验证实例

HTML5新增加的表单验证可以大大减少你对JavaScript代码的依赖,并且进行丰富的客户端校验,下面提供两个例子。 1.HTML5客户端校验:checkValidity方法 check...
  • sinat_26342009
  • sinat_26342009
  • 2015-05-17 23:52:33
  • 2068

吃惊!强大的HTML5居然能使表单验证变得如此如此简单!!!

(HTML5大神可以就此飘过,以前通过JS写的那么多的代码,现在通过HTML5居然可以怎么简单) ,废话就少说了,直接上代码: 用户注册 已有账号?去...
  • qq_32080545
  • qq_32080545
  • 2016-07-10 17:14:42
  • 6172

HTML5表单及其验证

转载:http://www.cnblogs.com/Wenwang/archive/2012/04/26/2470403.html HTML表单一直都是Web的核心技术之一,有了它我们才能在Web...
  • u013096666
  • u013096666
  • 2016-05-15 12:52:36
  • 644

HTML5-输入验证

下述内容主要讲述了《HTML5权威指南》第14章关于“其他表单元素及输入验证”。 一、使用其他表单元素1. 生成选项列表select元素可以用来生成一个选项列表供用户选择。 size属性用来设定要显示...
  • ligang2585116
  • ligang2585116
  • 2016-08-22 14:40:29
  • 2286

html验证表单

  • 2014年12月11日 12:03
  • 6KB
  • 下载

HTML5 - 使用HTML5Forms让旧浏览器支持表单新特性,表单验证

对于不支持HTML5表单验证的浏览器,虽然我们可以先用Modernizr判断后使用自定义的验证代码。但如果表单很多,或者需要验证地方很多,那这样就略嫌麻烦。 我们还可以使用HTML5Forms.js...
  • u014063717
  • u014063717
  • 2016-03-17 15:01:19
  • 514

jquery 在提交表单的时候验证checkbox是否选中

function checksubmit()   {    var sel = $("input[name='school']:checkbox[checked=true]");    if(s...
  • xiaohanshenchu
  • xiaohanshenchu
  • 2012-08-20 08:31:05
  • 2419

jQuery html5Validate基于HTML5表单验证插件

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=2857 更新...
  • xygg0801
  • xygg0801
  • 2017-03-17 17:46:07
  • 739
收藏助手
不良信息举报
您举报文章:html5表单验证
举报原因:
原因补充:

(最多只允许输入30个字)