轻松学习jQuery插件EasyUI EasyUI表单验证


Posted in Javascript onDecember 01, 2015

一、EasyUI创建异步提交表单
本文向您展示如何通过 easyui 提交一个表单(Form)。我们创建一个带有 name、email 和 phone 字段的表单。通过使用 easyui 表单(form)插件来改变表单(form)为 ajax 表单(form)。表单(form)提交所有字段到后台服务器,服务器处理和发送一些数据返回到前端页面。我们接收返回数据,并将它显示出来。

轻松学习jQuery插件EasyUI EasyUI表单验证

创建表单(Form)

<div style="padding:3px 2px;border-bottom:1px solid #ccc">Ajax Form</div>
 <form id="ff" action="form1_proc.php" method="post">
 <table>
 <tr>
 <td>Name:</td>
 <td><input name="name" type="text"></input></td>
 </tr>
 <tr>
 <td>Email:</td>
 <td><input name="email" type="text"></input></td>
 </tr>
 <tr>
 <td>Phone:</td>
 <td><input name="phone" type="text"></input></td>
 </tr>
 <tr>
 <td></td>
 <td><input type="submit" value="Submit"></input></td>
 </tr>
 </table>
 </form>

改变为 Ajax 表单

$('#ff').form({
 success:function(data){
 $.messager.alert('Info', data, 'info');
 }
 });

服务器端代码

form1_proc.php
 $name = $_POST['name'];
 $email = $_POST['email'];
 $phone = $_POST['phone'];
 
 echo "Your Name: $name <br/> Your Email: $email <br/> Your Phone: $phone";

二、EasyUI表单验证
将向您展示如何验证一个表单。easyui 框架提供一个 validatebox 插件来验证一个表单。在本教程中,我们将创建一个联系表单,并应用 validatebox 插件来验证表单。然后您可以根据自己的需求来调整这个表单。

轻松学习jQuery插件EasyUI EasyUI表单验证

创建表单(form)

让我们创建一个简单的联系表单,带有 name、email、subject 和 message 字段:

<div style="padding:3px 2px;border-bottom:1px solid #ccc">Form Validation</div>
 <form id="ff" method="post">
 <div>
 <label for="name">Name:</label>
 <input class="easyui-validatebox" type="text" name="name" required="true"></input>
 </div>
 <div>
 <label for="email">Email:</label>
 <input class="easyui-validatebox" type="text" name="email" required="true" validType="email"></input>
 </div>
 <div>
 <label for="subject">Subject:</label>
 <input class="easyui-validatebox" type="text" name="subject" required="true"></input>
 </div>
 <div>
 <label for="message">Message:</label>
 <textarea name="message" style="height:60px;"></textarea>
 </div>
 <div>
 <input type="submit" value="Submit">
 </div>
 </form>

我们添加一个样式名为 easyui-validatebox 到 input 标记,所以 input 标记将根据 validType 属性应用验证。
当表单无效时阻止表单提交

当用户点击表单的 submit 按钮时,如果表单是无效的,我们应该阻止表单提交。

$('#ff').form({
 url:'form3_proc.php',
 onSubmit:function(){
 return $(this).form('validate');
 },
 success:function(data){
 $.messager.alert('Info', data, 'info');
 }
 });

如果表单是无效的,将显示一个提示信息。

以上就会针对表单进行的讲解,包括如何创建异步提交表单、如何进行表单验证,希望这些都可以帮助到大家。

Javascript 相关文章推荐
jquery学习笔记 用jquery实现无刷新登录
Aug 08 Javascript
JavaScript模块规范之AMD规范和CMD规范
Oct 27 Javascript
基于jQuery实现响应式圆形图片轮播特效
Nov 25 Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 Javascript
Kotlin学习第一步 kotlin语法特性
May 25 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
Jul 20 Javascript
基于JSON数据格式详解
Aug 31 Javascript
解决vue 绑定对象内点击事件失效问题
Sep 05 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
Mar 07 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
Apr 24 Javascript
js数组中去除重复值的几种方法
Aug 03 Javascript
vue flex 布局实现div均分自动换行的示例代码
Aug 05 Javascript
整理Javascript函数学习笔记
Dec 01 #Javascript
全面解析Bootstrap弹窗的实现方法
Dec 01 #Javascript
js获取及判断键盘按键的方法
Dec 01 #Javascript
Eclipse引入jquery报错如何解决
Dec 01 #Javascript
JS验证邮件地址格式方法小结
Dec 01 #Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 #Javascript
常见JS验证脚本汇总
Dec 01 #Javascript
You might like
用cookies来跟踪识别用户
2006/10/09 PHP
PHP学习笔记之二 php入门知识
2011/01/12 PHP
使用PHP实现二分查找算法代码分享
2011/06/24 PHP
php一维二维数组键排序方法实例总结
2014/11/13 PHP
CI框架中类的自动加载问题分析
2016/11/21 PHP
JSON JQUERY模板实现说明
2010/07/03 Javascript
node.js 一个简单的页面输出实现代码
2012/03/07 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
JS实现六边形3D拖拽翻转效果的方法
2016/09/11 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
Vue.js弹出模态框组件开发的示例代码
2017/07/26 Javascript
浅谈Redux中间件的实践
2018/07/27 Javascript
Koa 中的错误处理解析
2019/04/09 Javascript
vue商城中商品“筛选器”功能的实现代码
2020/07/01 Javascript
vue实现PC端分辨率适配操作
2020/08/03 Javascript
jQuery实现日历效果
2020/09/11 jQuery
pyqt4教程之实现半透明的天气预报界面示例
2014/03/02 Python
python实现跨文件全局变量的方法
2014/07/07 Python
Python中使用HTMLParser解析html实例
2015/02/08 Python
基于Python 的进程管理工具supervisor使用指南
2016/09/18 Python
教你使用python画一朵花送女朋友
2018/03/29 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
Python3.6+Django2.0以上 xadmin站点的配置和使用教程图解
2019/06/04 Python
python 实现交换两个列表元素的位置示例
2019/06/26 Python
什么是python的必选参数
2020/06/21 Python
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
Chemist Warehouse官方海外旗舰店:澳洲第一连锁大药房
2017/08/25 全球购物
捷克厨房用品购物网站:Tescoma
2018/07/13 全球购物
司机检讨书
2014/02/13 职场文书
职工小家建设活动方案
2014/08/25 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
小学生优秀评语
2014/12/29 职场文书
2015年小学数学教师工作总结
2015/05/20 职场文书
Go 自定义package包设置与导入操作
2021/05/06 Golang
Python&Matlab实现樱花的绘制
2022/04/07 Python