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.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
随机推荐
- unittest测试
标签(空格分隔): unittest unittest介绍: python里面也有单元测试框架-unittest,相当于是一个python版的junit. 一.unittest简介 1.先导入unit ...
- 站点防火墙api,增加黑名单IP接口,增加用post,修改用put,php案例
<?php $apiHost = "http://192.168.1.198/api2/site/index.php"; $router = "token" ...
- DB2 57016报错的解决办法（表状态不正常，导致表无法操作）
新建了一张表,删除了一列,然后执行insert的时候,报错 57016,解释为:因为表不活动. 1.执行db2 "load query table <tabname>" ...
- python 分词
import jieba text = '我来到北京清华大学' default_mode =jieba.cut(text) full_mode = jieba.cut(text,cut_all=Tru ...
- python学习day6 for循环 字符串的内置方法
1.for循环 和while相比 l=[1,2,3] i=0 while i <len(l) print(l[i]) i+=1 l=['a','b','c'] for item in l: pr ...
- jquery mobil 和页面适应
<meta name="viewport" content="width=device-width" />
- poj1019（打表预处理+数学）
题目链接:http://poj.org/problem?id=1019 题意:对于序列1121231234...,求第i个数字(i<=2147483647). 思路:记第一组为1,第二组为12, ...
- python os.path模块常用方法详解（转）
转自:https://www.cnblogs.com/wuxie1989/p/5623435.html os.path模块主要用于文件的属性获取,在编程中经常用到,以下是该模块的几种常用方法.更多的方 ...
- numpy学习之矩阵之旅
一:特殊的矩阵 1.全0全1的矩阵 2.单位矩阵 单位矩阵:整个矩阵是n*n的,并且斜对角全是1 矩阵的加减法 1.矩阵相加,相减必须要有相同的行和列 二:数组的乘法(点成) 数组的乘法 list_1 ...
- C++ map与unordered_map
map与unordered_map对比 map unordered_map 红黑树(非严格二叉平衡搜索树)实现 哈希表实现 有序 无序 -- 查找时间复杂度为O(1),非常快 空间消耗较大 空间消耗较 ...