轻松学习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 相关文章推荐
根据一段代码浅谈Javascript闭包
Dec 14 Javascript
Javascript和Java获取各种form表单信息的简单实例
Feb 14 Javascript
js简单实现点击左右运动的方法
Apr 10 Javascript
分享Javascript实用方法二
Dec 13 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
May 10 Javascript
js定时器实例分享
Dec 20 Javascript
详解Node项目部署到云服务器上
Jul 12 Javascript
浅谈Webpack 持久化缓存实践
Mar 22 Javascript
微信小程序实现人脸识别
May 25 Javascript
webpack开发环境和生产环境的深入理解
Nov 08 Javascript
JavaScript常见继承模式实例小结
Jan 11 Javascript
js实现验证码干扰(动态)
Feb 23 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
phpExcel导出大量数据出现内存溢出错误的解决方法
2013/02/28 PHP
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
PHP代码优化技巧小结
2015/09/29 PHP
php实现计算百度地图坐标之间距离的方法
2016/05/05 PHP
sina的lightbox效果。
2007/01/09 Javascript
jQuery 前的按键判断代码
2010/03/19 Javascript
javascript 正则表达式相关应介绍
2012/11/27 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
2014/01/11 Javascript
jquery插件unobtrusive实现片段式加载
2015/06/15 Javascript
基于javascript实现图片懒加载
2016/01/05 Javascript
关于JS变量和作用域详解
2016/07/28 Javascript
浅谈javascript中执行环境(作用域)与作用域链
2016/12/08 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
jQuery实现下拉菜单的实例代码
2017/06/19 jQuery
JS实现弹出下载对话框及常见文件类型的下载
2017/07/13 Javascript
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
JS中使用textPath实现线条上的文字
2017/12/25 Javascript
一次记住JavaScript的6个正则表达式方法
2018/02/22 Javascript
vue的toast弹窗组件实例详解
2018/05/14 Javascript
jQuery实现ajax的嵌套请求案例分析
2019/02/16 jQuery
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
解决layer.prompt无效的问题
2019/09/24 Javascript
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
零基础写python爬虫之打包生成exe文件
2014/11/06 Python
Django的分页器实例(paginator)
2017/12/01 Python
Python数据可视化编程通过Matplotlib创建散点图代码示例
2017/12/09 Python
python实现门限回归方式
2020/02/29 Python
Python中无限循环需要什么条件
2020/05/27 Python
反对邪教标语
2014/06/30 职场文书
干部个人对照检查材料
2014/08/25 职场文书
故宫导游词
2015/01/31 职场文书
2016年度先进班组事迹材料
2016/03/01 职场文书
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS