jquery plugin 之 form表单验证插件
基于h5表单验证系统、扩展了对easyui组件的支持
先上图：
提示样式用到了伪对象的 {content: attr(xxx)}函数方法，实现提示信息能动态切换。
1、关键属性说明：
type: 表单元素类型（h5的input类型：number、email等）,
max: type为number、range时可用的属性,
min: type为number、range时可用的属性,
pattern: 正则表达式,
maxLength: 元素最大长度,
placeholder: 输入域的填写提示,
required: 必填
required-msg: 为空时的校验提示,
invalid-msg: 正则校验不通过的提示（对应pattern的校验规则）
2、demo - html:
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>javascript test</title>
<link rel="stylesheet" type="text/css" href="css/metro/easyui.css">
<link rel="stylesheet" type="text/css" href="css/icon.css">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/valid.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<style>
.hidden{
display: none;
} /* 表单校验样式 */
.valid-item {
display: inline-block;
position: relative;
}
.valid-item:after {
content: attr(data-msg);
position: absolute;
top: calc(100% + 2px);
left: 0;
color: #cc0066;
font-size: 10px;
opacity: 0;
transition: opacity 0.5s ease;
text-shadow: 1px 1px 5px silver;
z-index: -1;
}
.valid-item.invalid:after {
opacity: 1;
z-index: 100;
}
</style>
</head> <body>
<div class="middle">
<h5>
<pre>
表单校验：$(form).cform('valid');
</pre>
<pre>
表单提交：$(form).cform('submit',fn);
</pre>
</h5> <form class="easyui-cform" action="index.do" method="post">
<h5>第一种纯容器模式：根据type生成对应的表单元素</h5>
<span class="valid-item" name="name" invalid-msg="字母、数字，以字母开头且最少3位" type="text" maxLength="4"
value="sr" required pattern="^[a-zA-Z_][a-zA-Z0-9_@\.]{2,16}$" placeholder="字母、数字">
<!-- <input id="name" type="text" name="name" value="sc" required pattern="^[a-zA-Z_][a-zA-Z0-9_]{2,16}$" placeholder="字母、数字" class="ignore"/> -->
</span>
<br>
<br>
<h5>第二种非纯容器模式：子节点已经包含表单元素，将不再生成新的表单元素，子节点按h5的表单属性配置</h5>
<span class="valid-item" required-msg="必填项">
<select name="sex" required style="width: 170px;">
<option value="">--select--</option>
<option value="1">man</option>
<option value="2">women</option>
</select>
</span>
<h5>非纯容器模式：easyui-numberbox组件解析</h5>
<span class="valid-item" required-msg="数字必填项">
<input class="easyui-numberbox" name="phone" required style="width: 170px;">
</span>
<h5>非纯容器模式：easyui-combobox组件解析</h5>
<span class="valid-item" name="country" required-msg="必填项">
<input id="cc" class="easyui-combobox" required data-options="
valueField: 'label',
textField: 'value',
data: [{
label: '',
value: 'select'
},{
label: 'java',
value: 'Java'
},{
label: 'perl',
value: 'Perl'
},{
label: 'ruby',
value: 'Ruby'
}
]" />
</span>
<input type="submit" value="submit">
</form>
</div>
</body>
</html>
3、valid.js:
function easyuiInvalidProcess(item, value) {
item.parentNode.classList.add('invalid');
var $pnode = $(item.parentNode),
requiredMsg = $pnode.attr('required-msg') || $.fn.cform.defaults.required,
invalidMsg = $pnode.attr('invalid-msg') || $.fn.cform.defaults.invalid;
if (value) {
item.parentNode.classList.remove('invalid');
$pnode.attr('data-msg', '');
} else $pnode.attr('data-msg', requiredMsg);
}
(function($) {
function _initItem(form) { /* 初始化校验容器 */
var ctns = $('.valid-item', form).not('.hasparsed');
ctns.each(function(index, item) {
var $item = $(item),
props = {
id: $item.prop('id') ? $item.prop('id') + '_input' : undefined,
name: $item.attr('name'),
value: $item.attr('value'),
type: $item.attr('type') || 'text',
max: $item.attr('max'),
min: $item.attr('min'),
pattern: $item.attr('pattern'),
maxLength: $item.attr('maxLength'),
placeholder: $item.attr('placeholder'),
required: $item.attr('required') || $item.attr('required')
},
propstr = ' ';
$.each(props, function(key, value) {
if (value) propstr += key + '=' + value + ' ';
});
var itemChilds = $item.children(),
noChild = itemChilds.length == 0;
if (noChild) { /* 校验容器如果没有子节点则生成type对应的表单元素 */
var $input = $('<input ' + propstr + '/>');
$(this).append($input);
item.removeAttribute('name');
} else {
itemChilds.each(function(n, child) {
var isEasyui = $(child).prop('class').indexOf('easyui-') >=
0;
if (isEasyui) { /* easyui组件初始化 */
$.each(props, function(key, value) {
if (value) $(child).attr(key, value);
});
$(child).addClass('ignore');
item.removeAttribute('name');
var options = $(child).data('options') || '';
if (options) {
options +=
',onChange:function(val,oval){ easyuiInvalidProcess(this, val); }';
} else {
options +=
'onChange:function(val,oval){ easyuiInvalidProcess(this, val); }';
}
$(child).attr('data-options', options);
/* 解决报错：An invalid form control with name='' is not focusable */
$(child).removeAttr('required');
}
});
}
ctns.addClass('hasparsed');
});
}
function itemInvalidProcess(item) {
item.setCustomValidity(' ');
item.parentNode.classList.add('invalid');
var $pnode = $(item.parentNode),
requiredMsg = $pnode.attr('required-msg') || $.fn.cform.defaults.required,
invalidMsg = $pnode.attr('invalid-msg') || $.fn.cform.defaults.invalid;
if (item.validity.valueMissing) $pnode.attr('data-msg', requiredMsg);
else $pnode.attr('data-msg', invalidMsg);
}
function _initValid(form, op) { /* 初始化form及表单元素 */
if (form) {
bindEvent(form);
_initItem(form);
var inputs = $(':input', form).not('.ignore');
inputs.map(function(index, item) {
var $input = $(item);
item.addEventListener('invalid', function() {
itemInvalidProcess(this);
});
item.addEventListener('input', function() {
this.setCustomValidity('');
this.parentNode.classList.remove('invalid');
if (!this.validity.valid) { /* this.validity h5表单元素的校验结果对象 */
itemInvalidProcess(this);
}
});
});
form.addEventListener('submit', function() { /* 校验通过时执行 */
console.log(123);
});
};
}
function bindEvent(form) { /* 关掉浏览器默认行为 */
var $form = $(form);
$form.data('submit', form.submit);
form.submit = function(event) {
var valid = validCheck(form);
if (valid) $form.data('submit').call(form);
};
$form.on("invalid", "form", function(event) {
event.preventDefault();
});
$form.on("click", "input[type=submit]", function(event) {
var valid = validCheck(form);
if (!valid) event.preventDefault();
});
}
function validCheck(form) { /* 检查校验是否通过 */
var inputs = $(':input', form),
valid = true;
inputs.map(function(index, item) {
var iCls = $(item).prop('class');
if (item.type != "submit" && !item.checkValidity() && iCls.indexOf(
'ignore') < 0) {
valid = false;
} else if (iCls.indexOf('textbox-value') >= 0) {
/* 扩展easyui组件支持 */
var domCtn = $('[textboxname="' + $(item).attr('name') + '"]'),
clist = domCtn[0].classList;
$.each(clist, function(n, cls) {
try {
var pName = cls.replace('easyui-', ''),
value = domCtn[pName]('getValue');
if (value) {
} else valid = false;
easyuiInvalidProcess(domCtn[0], value);
} catch (e) {}
});
}
});
return valid;
}
$.fn.cform = function(options, param) {
/* 判断是否为对外调用API */
if (typeof options == 'string') {
return $.fn.cform.methods[options](this, param);
}
/* 初始化组件 */
var op = $.extend({}, $.fn.cform.defaults, options);
return this.each(function() {
_initValid(this, op)
});
}
$.fn.cform.methods = {
valid: function(form, param) {
var $inputs = $(':input', form) || [];
for (var i = 0; i < $inputs.length; i++) {
var input = $inputs[i];
if (input.type != "submit" && !input.validity.valid) {
input.checkValidity();
return false;
}
}
return true;
},
submit: function(form, fn) {
return form.each(function() {
var url = form.prop('action'),
dataType = 'json';
var valid = validCheck(form);
if (valid) {
try {
var param = $(form).serializeJson();
$.post(url, param, function(data) {
try {
if (typeof fn == 'function') fn(data);
} catch (e) {}
}, dataType);
} catch (e) {}
}
});
}
}
$.fn.cform.defaults = {
required: 'field required !',
invalid: 'field invalid !'
}
})(jQuery)
4、easyui-parser改动处：
$.parser = {
auto: true,
onComplete: function(_1) {},
plugins: ["draggable", "droppable", "resizable", "pagination",
"tooltip", "linkbutton", "menu", "menubutton", "splitbutton",
"cform", /* 为了让组件自动解析 */
"switchbutton", "progressbar", "tree", "textbox", "filebox",
"combo", "combobox", "combotree", "combogrid", "numberbox",
"validatebox", "searchbox", "spinner", "numberspinner",
"timespinner", "datetimespinner", "calendar", "datebox",
"datetimebox", "slider", "layout", "panel", "datagrid",
"propertygrid", "treegrid", "datalist", "tabs", "accordion",
"window", "dialog", "form"
],
jquery plugin 之 form表单验证插件的更多相关文章
- jQuery html5Validate基于HTML5表单验证插件
更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...
- [php基础]PHP Form表单验证:PHP form validator使用说明
在PHP网站开发建设中,用户注册.留言是必不可少的功能,用户提交的信息数据都是通过Form表单提交,为了保证数据的完整性.安全性,PHP Form表单验证是过滤数据的首要环节,PHP对表单提交数据的验 ...
- jQuery Form 表单提交插件----Form 简介，官方文档，官方下载地址
一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...
- jQuery Validate 表单验证插件----通过name属性来关联字段来验证，改变默认的提示信息，将校验规则写到 js 代码中
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二. 添加一个另外一个插件jquery.validate.messages_cn.js. ...
- jQuery Validate 表单验证插件----Validate简介，官方文档，官方下载地址
一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆 ...
- jquery validate表单验证插件-推荐
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- 表单验证插件之jquery.validate.js
提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...
- jQuery学习之：Validation表单验证插件
http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...
- jquery validate表单验证插件
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
随机推荐
- maven开发工具安装
Maven安装并测试步骤: 1.下载并解压meaven.zip: 2.配置环境变量“M2_HOME”指向meaven安装目录: 3.添加“%M2_HOME%\bin;”到path环境变量中: 4.测试 ...
- 在 Android Studio 上调试数据库 ( SQLite ) （转）
转自:http://c.colabug.com/thread-1781696-1-1.html 以前 Eclipse 时代,调试 SQLite 都是将数据库文件导出到电脑,然后再用软件打开查看.现在我 ...
- avcodec_decode_video2少帧问题
使用libav转码视频时发现一个问题:使用下面这段代码解码视频时,解码中会不时丢掉几帧. ){ ret = avcodec_decode_video2(video_dec_ctx, vframe, & ...
- LeetCode第20题
LeetCode20题不多说上代码 public boolean isValid(String s){ Stack<Character> stack = new Stack<Char ...
- WEB 自动化思路
前期做了一个关键字驱动模型的WEB自动化项目,特意写文章归纳和总结下. 框架架构图 已经实现的部分: 1. 读写excel数据模板 2.配置中心,支持properties,xml格式的配置文件 3.参 ...
- UVA-10054.The Necklace(欧拉回路)解题报告
2019-02-09-21:55:23 原题链接 题目描述: 给定一串珠子的颜色对,每颗珠子的两端分别有颜色(用1 - 50 之间的数字表示,对每颗珠子的颜色无特殊要求),若两颗珠子的连接处为同种颜色 ...
- ds.Tables[0].Rows.RemoveAt(i)数据库表格删除行
不要在循环里使用myDataTable.Rows.RemoveAt(i).因为每删除一行后.i的值会增加,但行数会是减少了.这么做一定会出错.因此要遍历数据,使用Remove方式时,要倒序的遍历int ...
- AWVS结果分析与实践-XSS
今天趁着老师接项目,做了一丢丢实践,以下是一点点感触. 都知道AWVS是神器,可是到我手里就是不灵.拿了它扫了一个URL,结果提示XSS漏洞,实践没反应,只好愉快地享受了过程.来看看. ...
- Angular之特性模块 ( Feature Module )
项目结构 一 创建特性模块,及其包含的组件.服务. ng g module art ng g component art/music ng g component art/dance ng g ser ...
- Mac 动态库加载不上
OC xcode can't found xxx.dylib 1 targer- build phase :link binary with library添加动态库 注意不要将后边的选项选成opti ...