轻松学习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小问题说明
Sep 26 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
Aug 06 Javascript
js动态添加事件并可传参数示例代码
Oct 21 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
Nov 20 Javascript
JavaScript插件化开发教程(六)
Feb 01 Javascript
js拆分字符串并将分割的数据放到数组中的方法
May 06 Javascript
Javascript函数中的arguments.callee用法实例分析
Sep 16 Javascript
JS百度地图搜索悬浮窗功能
Jan 12 Javascript
Vue中如何实现轮播图的示例代码
Jul 27 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
Vue触发式全局组件构建的方法
Nov 28 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
Aug 17 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关闭warning问题的解决方法
2016/05/17 PHP
thinkPHP模板中for循环与switch语句用法示例
2016/11/30 PHP
推荐40个非常优秀的jQuery插件和教程【系列三】
2011/11/09 Javascript
使用javascript做的一个随机点名程序
2014/02/13 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
2014/06/20 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
2016/11/02 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
2017/04/24 Javascript
React中的render何时执行过程
2018/04/13 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
详解elementui之el-image-viewer(图片查看器)
2019/08/30 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
python实现进程间通信简单实例
2014/07/23 Python
fastcgi文件读取漏洞之python扫描脚本
2017/04/23 Python
Python cookbook(数据结构与算法)通过公共键对字典列表排序算法示例
2018/03/15 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
css3实现一个div设置多张背景图片及background-image属性实例演示
2017/08/10 HTML / CSS
美国在线家装零售商:Build.com
2016/09/02 全球购物
西班牙鞋子和箱包在线销售网站:zapatos.es
2020/02/17 全球购物
路德维希•贝克(LUDWIG BECK)中文官网:德国大型美妆百货
2020/09/19 全球购物
营销与策划个人求职信
2013/09/22 职场文书
工程售后服务承诺书
2014/05/21 职场文书
物流专业自荐信
2014/05/23 职场文书
法律意见书范文
2015/05/20 职场文书
2016大学生暑期社会实践心得体会
2016/01/14 职场文书
vue3中的组件间通信
2021/03/31 Vue.js
Nginx配置80端口访问8080及项目名地址方法解析
2021/03/31 Servers
MySQL InnoDB ReplicaSet(副本集)简单介绍
2021/04/24 MySQL
浅谈MySQL函数
2021/10/05 MySQL
oracle delete误删除表数据后如何恢复
2022/06/28 Oracle