easyui表单提交验证form
时间:2022-05-04
本文章向大家介绍easyui表单提交验证form,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
方式一,不需要考虑jquery.easyui.min.js版本
<script>
$(function () {
//针对 设置 novalidate:true
$('.validatebox-text').bind('blur', function () {
$(this).validatebox('enableValidation').validatebox('validate');
});
$("#btn_ok").click(function () {
//启用
$('.validatebox-text').validatebox('enableValidation').validatebox('validate')
$.messager.progress(); // 显示进度条
var b = $("#ff").form('validate');//验证
if (b) {
$.messager.progress('close'); // 如果提交成功则隐藏进度条
}
else { $.messager.progress('close'); } // 如果提交成功则隐藏进度条 }
});
});
</script>
<div id="ff">
<input class="easyui-textbox easyui-validatebox" type="text" name="name" data-options="required:true,novalidate:true" />
<input style="width: 150px;" class="easyui-textbox easyui-validatebox" data-options="required:true,validType:'length[4,20]',missingMessage:'用户名不能为空,请输入用户名',invalidMessage:'用户名的长度为4-20位'" />
<input class=" textbox easyui-validatebox" data-options="required:true,validType:'email' ,missingMessage:'用户名不能为空,请输入用户名',invalidMessage:'邮件'" />
</div>
<input id="btn_ok" type="button" value="确定" />
方式2,暂时发现1.3.6版本一下不支持
<script>
function submitForm() {
$('#ff').form('submit', {
onSubmit: function () {
var b = $(this).form('enableValidation').form('validate');
if (b) {
alert("成功");
}
else { alert("不成功"); }
}
});
}
$(function () {
$("#btn_ok").click(function () {
var b = $('#ff').form("enableValidation").form('validate');
if (b) {
alert("成功");
}
else { alert("不成功"); }
});
});
</script>
<body>
<div id="ff" class="easyui-form" data-options="novalidate:true">
<input class="easyui-textbox" type="text" name="email" data-options="required:true" />
</div>
<div style="text-align: center; padding: 5px">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">Submit</a>
<a href="javascript:void(0)" class="easyui-linkbutton" id="btn_ok">OK</a>
</div>
</body>
- Spring【AOP模块】就这么简单
- 【专业技术】如何写出优美的C 代码?
- StringUtils工具类常用方法
- 数据刷新中的并行改进(三) (r5笔记第79天)
- SSH【史上最详细整合】
- Github 项目推荐 | TensorFlow 项目模板架构最佳实践
- 两个死锁的实例 (r5笔记第90天)
- SSM【史上最详细整合】
- 终结 finalize()和垃圾回收(garbage collection)
- 代码+实战:TensorFlow Estimator of Deep CTR —— DeepFM/NFM/AFM/FNN/PNN
- 【SSH测试整合Demo】企业人事管理系统
- Hybris 项目工程配置
- 购物车案例【简单版】
- 再学习之MyBatis.
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法