当前位置:首页 > 原创 > 正文内容

欣达软件从easyui中提出的精简版表单验证,可以和jquery.fom配套使用(含演示代码)

Z先生9年前 (2016-08-19)原创5392

使用方法:

1、引用Jquery库、Jquery.form库。

2、引用easy-validate样式文件(tips的样式)以及js文件

<link href="easy-validate/validate.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="easy-validate/jquery.validate.js"></script>
<script type="text/javascript" src="easy-validate/jquery.validate.regex.js"></script>

3、表单注入

<input name="member[username]" type="text" class="xinda-validatebox" data-options="required:true,validType:['username','length[5,30]'],missingMessage:'请输入用户名',invalidMessage:'用户名以字母打头,并且至少5个字符,最多30个字符'" placeholder="用户名">
<input name="member[password]" type="password" class="xinda-validatebox" data-options="required:true,validType:['password'],missingMessage: '请输入密码'" placeholder="密码 ">
<input name="member[code]" type="text" class="xinda-validatebox" maxlength="4" data-options="required:true,validType:length[4,4],missingMessage: '请输入验证码',invalidMessage: '请输入正确的验证码'" placeholder="验证码 ">

关键点:指定类样式xinda-validatebox,通过data-options设置验证属性。data-options的具体设置参考:http://www.jeasyui.com/documentation/validatebox.php

4、和Jquery.from嵌套使用

	<script>
		var _form = "#login_form",
			submit_option = {
				type: "post",
				dataType: "json",
				beforeSubmit: function () {
					return $(_form).form("validate");
				},
				success: function (data) {
					if (data.success == true) {
						xcwl.tips(data.message, function () {
							xcwl.go(data.other);
						})
					} else {
						xcwl.tips(data.message);
						chgCode();
					}
				}
			};
		$(function () {
			$("#nav_member a").addClass("active");
			$(_form).ajaxForm(submit_option);
			$(document).on("click", "#codeimg", function () {
				chgCode();
			});
		});
	</script>

个人比较懒,直接给演示代码,关键点在于:

$(_form).form("validate");

这里是返回easyui-validate验证结果的。


下载地址(含简单演示):easy-validate-demo.rar


分享给朋友:

相关文章

【Z先生原创】10行代码实现选项卡

先扔代码,记得先引入JQ库function xcwltabs(title, content, isclick) { var titleobj&nb...

ZBlog Markdown编辑器

# 背景 喜欢Markdown的简洁代码,又喜欢wysiwyg所见即所得,所以在Vditor基础上就产生了《超级Markdown编辑器》 # 特色功能 ## 牛叉的功能 * 兼...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。
请先 登录 再评论,若不是会员请先 注册