脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery插件EasyUI表单验证

轻松学习jQuery插件EasyUI EasyUI表单验证

 更新时间：2022年05月06日 15:04:18   投稿：lijiao  
轻松学习jQuery插件EasyUI，本文的重点在于EasyUI表单验证，并告诉大家如何提交表单，感兴趣的小伙伴们可以参考一下

一、EasyUI创建异步提交表单

本文向您展示如何通过 easyui 提交一个表单（Form）。我们创建一个带有 name、email 和 phone 字段的表单。通过使用 easyui 表单（form）插件来改变表单（form）为 ajax 表单（form）。表单（form）提交所有字段到后台服务器，服务器处理和发送一些数据返回到前端页面。我们接收返回数据，并将它显示出来。

创建表单（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 插件来验证表单。然后您可以根据自己的需求来调整这个表单。

创建表单（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');
 }
 });

如果表单是无效的，将显示一个提示信息。

以上就会针对表单进行的讲解，包括如何创建异步提交表单、如何进行表单验证，希望这些都可以帮助到大家。

您可能感兴趣的文章:

相关文章

  • 基于jquery的simpleValidate简易验证插件

    基于jquery的simpleValidate简易验证插件

    简易验证插件simpleValidate使用心得，基于JQuery，修改小BUG后能兼容各浏览器，附自用版本供下载
    2014-01-01
  • jQuery AJAX 方法success()后台传来的4种数据详解

    jQuery AJAX 方法success()后台传来的4种数据详解

    今天小编就为大家分享一篇jQuery AJAX 方法success()后台传来的4种数据详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • jQuery的text()方法用法分析

    jQuery的text()方法用法分析

    这篇文章主要介绍了jQuery的text()方法用法,以实例形式详细分析了jQuery的text()方法的定义、参数与具体用法,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • jQuery实现选项卡功能（两种方法）

    jQuery实现选项卡功能（两种方法）

    本文主要介绍了jQuery两种方法写选项卡的实例，具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • Bootstrop实现多级下拉菜单功能

    Bootstrop实现多级下拉菜单功能

    Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。本文重点给大家介绍bootstrap实现多级下拉菜单功能的实例代码，感兴趣的朋友一起学习吧
    2016-11-11
  • 基于jQuery实现的水平和垂直居中的div窗口

    基于jQuery实现的水平和垂直居中的div窗口

    在建立网页布局的时候，我们经常会面临一个问题，就是让一个div实现水平和垂直居中，虽然好几种方式实现，但是今天介绍时我最喜欢的方法，通过css和jQuery实现。
    2011-08-08
  • JQuery学习总结【二】

    JQuery学习总结【二】

    本文主要介绍了JQuery的基本知识，如：JQuery的dom操作，动态创建dom节点，删除节点，document方法等等，文章篇尾处附上实例小练习。需要的朋友可以参考下
    2016-12-12
  • jquery写个checkbox——类似邮箱全选功能

    jquery写个checkbox——类似邮箱全选功能

    最近在学习jquery，今天抽空用jquery写个checkbox——类似邮箱全选功能，感兴趣的你可以参考下哈，希望可以帮助到你
    2013-03-03
  • jQuery的cookie插件实现保存用户登陆信息

    jQuery的cookie插件实现保存用户登陆信息

    保存用户登陆信息的方法有很多，本文为大家介绍的这个方法是通过cookie插件来实现,需要的朋友可以参考下
    2014-04-04
  • 得到jQuery detach()后节点中的某个值实现代码

    得到jQuery detach()后节点中的某个值实现代码

    需要jQuery -detach 后的dom 结构或某个值，如何获取到呢？一直困惑着我们，不过本文将为大家解开疑惑，感兴趣的朋友可以了解下，或许本文对你有所帮助
    2013-02-02

最新评论