轻松学习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 相关文章推荐
弹出广告特效代码(一个IP只弹出一次)
May 11 Javascript
不用MOUSEMOVE也能滑动啊
May 23 Javascript
JQueryEasyUI datagrid框架的进阶使用
Apr 08 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
Nov 25 Javascript
JQuery中操作Css样式的方法
Feb 12 Javascript
jQuery 无限级菜单的简单实例
Feb 21 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
javascript定义类和类的实现实例详解
Dec 01 Javascript
js+css实现select的美化效果
Mar 24 Javascript
jQuery实现图片加载完成后改变图片大小的方法
Mar 29 Javascript
基于JavaScript实现单例模式
Oct 30 Javascript
详解vue修改elementUI的分页组件视图没更新问题
Nov 13 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
PHP源码分析之变量的存储过程分解
2014/07/03 PHP
php中spl_autoload详解
2014/10/17 PHP
PHP简单获取视频预览图的方法
2015/03/12 PHP
PHP中each与list用法分析
2016/01/08 PHP
PHP 二级子目录(后台目录)设置二级域名
2017/03/02 PHP
PHP数组式访问接口ArrayAccess用法分析
2017/12/28 PHP
PHP DB 数据库连接类定义与用法示例
2019/03/11 PHP
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
2008/12/25 Javascript
JS获取dom 对象 ajax操作 读写cookie函数
2009/11/18 Javascript
js判断是否为数组的函数: isArray()
2011/10/30 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
2012/01/15 Javascript
JS实现网页滚动条感应鼠标变色的方法
2015/02/26 Javascript
基于jQuery实现返回顶部实例代码
2016/01/01 Javascript
实用jquery操作表单元素的简单代码
2016/07/04 Javascript
JS面试题---关于算法台阶的问题
2016/07/26 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
微信小程序 实战实例开发流程详细介绍
2017/01/05 Javascript
jQuery设置图片等比例缩小的方法
2017/04/29 jQuery
微信小程序实现鼠标拖动效果示例
2017/12/01 Javascript
mui js控制开关状态、修改switch开关的值方法
2019/09/03 Javascript
vue实现数字滚动效果
2020/06/29 Javascript
js实现双色球效果
2020/08/02 Javascript
[02:10]DOTA2亚洲邀请赛 EG战队出场宣传片
2015/02/07 DOTA
web.py在模板中输出美元符号的方法
2014/08/26 Python
django开发教程之利用缓存文件进行页面缓存的方法
2017/11/10 Python
python 中字典嵌套列表的方法
2018/07/03 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
使用Python给头像戴上圣诞帽的图像操作过程解析
2019/09/20 Python
python导入库的具体方法
2020/06/18 Python
python time()的实例用法
2020/11/03 Python
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
选秀节目策划方案
2014/06/06 职场文书
门面房租房协议书
2014/12/01 职场文书
学习型家庭事迹材料
2014/12/20 职场文书