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.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
随机推荐
- CSS实现禁止文字选中
E10平台预览第四版中包含了对 CSS3 新属性 -ms-user-select 的支持,Web 开发人员可以利用这一新属性轻松精确的控制用户可以在网站上选择哪些文本. user-select:non ...
- 【C++】构造函数语意
构造函数的构造操作 编译器何时会为一个类合成默认构造函数? 答:当编译器需要的时候. 有以下四种情况: 带有默认构造函数的类对象 以下代码为例: class Foo {public: Foo();} ...
- Floyd算法简介
参考:https://blog.csdn.net/qq_35644234/article/details/60875818 一.Floyd算法的介绍 1.算法的特点: 弗洛伊德算法是解决任 ...
- linux之master和minion
saltstack博客地址: https://www.cnblogs.com/pyyu/p/9465608.html在线yaml文件编写:http://www.bejson.com/validator ...
- PL/SQL Dev连接Oracle弹出空白提示框的解决方法分享
第一次安装Oracle,装在虚拟机中,用PL/SQL Dev连接远程数据库的时候老是弹出空白提示框,网上找了很久,解决方法也很多,可是就是没法解决我这种情况的. 出现这种问题,解决方法大概有这几种: ...
- 三个<li>元素放一行
<ul><li style="float:left;display:inline;">0</li><li style="floa ...
- php项目执行composer install时报错
报错信息: Loading composer repositories with package informationInstalling dependencies (including requi ...
- YYKit @autoreleasepool 使用，优化内存
写在前面 最近再看YY大神的YYKit工具,发现在代码中经常使用@autoreleasepool,特别是在与for循环搭配使用的时候.刚开始很不能理解. 先有个概念: 自己创建的对象:使用 alloc ...
- MVC 学习(一）Linq to Entities 简单Demo
Linq定义了一组标准查询符号,标准查询符允许查询作用于所有基于IEnumerable<T>接口源. 我们看看LINQ的总体架构.如下图所示 EF4.1 数据操作及持久化,常见的是Data ...
- Java04-Java语法基础（三）流程控制
Java04-Java语法基础(三)流程控制 一.数据类型的转换 1.自动转换:在赋值运算中,占字节数大的类型会自动向字节小的类型转换 double d1 = 3.14; int t1 = d1; 2 ...