轻松学习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 相关文章推荐
JS+ACTIVEX实现网页选择本地目录路径对话框
Mar 18 Javascript
jquery拖动插件(jquery.drag)使用介绍
Jun 18 Javascript
jquery实现的下拉和收缩效果示例
Aug 21 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
Mar 01 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
Aug 03 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
Oct 16 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
Oct 18 Javascript
fetch 使用及如何接收JS传值
Nov 11 Javascript
vue router 配置路由的方法
Jul 26 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
Apr 13 Javascript
jQuery实现二级导航菜单的示例
Sep 30 jQuery
vue router 动态路由清除方式
May 25 Vue.js
整理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
一个用于MySQL的PHP XML类
2006/10/09 PHP
PHP+ACCESS 文章管理程序代码
2010/06/21 PHP
PHP编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
PHP session_start()问题解疑(详细介绍)
2013/07/05 PHP
带密匙的php加密解密示例分享
2014/01/29 PHP
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
YII2框架中使用yii.js实现的post请求
2017/04/09 PHP
PHP的mysqli_select_db()函数讲解
2019/01/23 PHP
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
2015/09/01 Javascript
js判断登陆用户名及密码是否为空的简单实例
2016/05/16 Javascript
Highcharts入门之基本属性
2016/08/02 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
2016/09/08 Javascript
jQuery动态生成Bootstrap表格
2016/11/01 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
2016/12/20 Javascript
requirejs + vue 项目搭建详解
2017/06/16 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
记一次webapck4 配置文件无效的解决历程
2018/09/19 Javascript
详解Vue之父子组件传值
2019/04/01 Javascript
python33 urllib2使用方法细节讲解
2013/12/03 Python
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
python异常和文件处理机制详解
2016/07/19 Python
JSONLINT:python的json数据验证库实例解析
2017/11/28 Python
Python 中@property的用法详解
2020/01/15 Python
pytorch之Resize()函数具体使用详解
2020/02/27 Python
Python小白垃圾回收机制入门
2020/06/09 Python
详解python命令提示符窗口下如何运行python脚本
2020/09/11 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
python切割图片的示例
2020/11/12 Python
创造美妙香氛体验:Aera扩散器和香水
2018/11/25 全球购物
求职简历中自我评价
2014/01/28 职场文书
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL
Python3中PyQt5简单实现文件打开及保存
2021/06/10 Python
MySQL学习之基础操作总结
2022/03/19 MySQL
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js