轻松学习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 相关文章推荐
用dom+xhtml+css制作的一个相册效果代码打包下载
Jan 24 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
Mar 02 Javascript
js中的DOM模拟购物车功能
Mar 22 Javascript
BootStrap 动态表单效果
Jun 02 Javascript
Vue应用部署到服务器的正确方式
Jul 15 Javascript
JavaScript实现旋转轮播图
Aug 18 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
Sep 12 Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 Javascript
ES6 fetch函数与后台交互实现
Nov 14 Javascript
发布订阅模式在vue中的实际运用实例详解
Jun 09 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
Jan 14 Javascript
浅谈vue 多个变量同时赋相同值互相影响
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
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
浅析php单例模式
2014/11/25 PHP
一起来写段JS drag拖动代码
2010/12/09 Javascript
jQuery实现鼠标经过图片预览大图效果
2014/04/10 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
2015/08/24 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
2016/07/07 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
2016/09/06 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
2016/10/30 Javascript
深入学习 JavaScript中的函数调用
2017/03/23 Javascript
详解AngularJS ui-sref的简单使用
2017/04/24 Javascript
js实现鼠标拖拽多选功能示例
2017/08/01 Javascript
AngularJS 教程及实例代码
2017/10/23 Javascript
JS删除数组里的某个元素方法
2018/02/03 Javascript
js实现简单放大镜效果
2020/03/07 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
2020/08/04 Javascript
[57:53]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#3OG VS VP
2016/03/03 DOTA
Python类的继承和多态代码详解
2017/12/27 Python
python实现简易内存监控
2018/06/21 Python
jupyter 实现notebook中显示完整的行和列
2020/04/09 Python
Python while true实现爬虫定时任务
2020/06/08 Python
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
2014/04/10 HTML / CSS
跑鞋、网球鞋、网球拍、服装及装备:Holabird Sports
2016/09/19 全球购物
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
社区志愿者活动总结
2014/06/26 职场文书
公司员工活动策划方案
2014/08/20 职场文书
优秀三好学生事迹材料
2014/08/31 职场文书
岗位职责范本大全
2015/02/26 职场文书
父亲节寄语大全
2015/02/27 职场文书
电力培训学习心得体会
2016/01/11 职场文书
小学生六年级作文之关于感恩
2019/08/16 职场文书
pycharm2021激活码使用教程(永久激活亲测可用)
2021/03/30 Python
i7 6700处理器相当于i5几代
2022/04/19 数码科技