轻松学习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');
 }
 });

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

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

(0)

相关推荐

  • jquery插件EasyUI中form表单提交实例分享

    之前用AJax给Controller传递参数,然后再调用服务端的方法对数据库进行更改,今天碰到一个新的方法,就是表单的提交,这样可以省去AJax传参. 当表单提交后,我们可以获取表单上控件中的值,然后再调用服务端的方法对数据库进行更改.下面的一张截图是具体的业务需求. 一.要实现的功能:从上面这个表单中,获取控件中的值,然后传递给后台.下面是表单代码. 二.表单代码 <div id="Editwin" class="easyui-window" title=&

  • Jquery组件easyUi实现表单验证示例

    本文实例为大家分享了Jquery easyUi表单验证实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic Form - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" hr

  • Jquery插件easyUi实现表单验证示例

    要实现的功能:在做添加学生信息的时候,利用easyui的验证功能判断 学号是否重复和学号只能为数字 最终效果如下图: 但在做这个的过程中,遇到了一系列的问题: 扩展validatebox的验证方法,最开始的验证代码如下: //学号格式只能为数字 ****//这里没有问题**** number: {//value值为文本框中的值 validator: function (value) { var reg = /^[0-9]*$/; return reg.test(value); }, messag

  • Jquery插件easyUi表单验证提交(示例代码)

    复制代码 代码如下: <form id="myForm" method="post">  <table align="center" style="width:400px;height:auto;margin-top: 20px">           <tr>                                           <td align="righ

  • jQuery EasyUI API 中文文档 - DataGrid数据表格

    扩展自 $.fn.panel.defaults ,用 $.fn.datagrid.defaults 重写了 defaults . 依赖 panel resizable linkbutton pagination 用法 复制代码 代码如下: <table id="tt"></table> 复制代码 代码如下: $('#tt').datagrid({ url:'datagrid_data.json', columns:[[ {field:'code',title:'

  • jQuery EasyUI API 中文文档 - Form表单

    Form 表单 用法 复制代码 代码如下: <form id="ff" method="post"> ... </form> 使 form 成为 ajax 提交的 form . 复制代码 代码如下: $('#ff').form({ url:..., onSubmit: function(){ // 做某些检查 // 返回 false 来阻止提交 }, success:function(data){ alert(data) } }); // 提

  • jQuery EasyUI提交表单验证

    EasyUI的form表单里面的验证框,先讲解下validatebox类和相关的属性. 验证规则 验证规则是通过使用 required 和 validType 特性来定义的, 这里是已经实施的规则: email:匹配 email 正则表达式规则,系统提供的属性. url:匹配 URL 正则表达式规则 length[0,100]:允许从 x 到 y 个字符 remote['http://.../action.do','paramName']:发送 ajax 请求来验证值,成功时返回 'true'

  • jQuery EasyUI API 中文文档 - Tree树使用介绍

    用 $.fn.tree.defaults 重写了 defaults. 依赖 draggable droppable 用法 Tree 能在 <ul> 元素里定义,此标记可以定义为叶节点和子节点.下面是一个示例: 复制代码 代码如下: <ul id="tt"> <li> <span>Folder</span> <ul> <li> <span>Sub Folder 1</span> &

  • jQuery EasyUI API 中文文档 - ComboBox组合框

    扩展自 $.fn.combo.defaults. 用 $.fn.combobox.defaults 重写了 defaults. 依赖 combo 用法 <select id="cc" name="dept" style="width:200px;"> <option value="aa">aitem1</option> <option>bitem2</option>

  • 实例解析jQuery插件EasyUI最常用的表单验证规则

    例如:校验输入框只能录入0-1000之间 最多有2位小数的数字 表单<input type="text" id="rate" name="rate" required="true" class="easyui-validatebox"  validType="rateCheck[0,1000]"  maxlength="6" /> $.extend($.f

随机推荐