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


Posted in Javascript onAugust 23, 2016

本文实例为大家分享了Jquery easyUi表单验证实现代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Basic Form - jQuery EasyUI Demo</title>
 <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
 <link rel="stylesheet" type="text/css" href="../themes/icon.css">
 <link rel="stylesheet" type="text/css" href="demo.css">
 <script type="text/javascript" src="../jquery.min.js"></script>
 <script type="text/javascript" src="../jquery.easyui.min.js"></script>
</head>
<body>
 <h2>基本表单</h2>
 <p>Fill the form and submit it.</p>
 <div style="margin:20px 0;"></div>
 <div class="easyui-panel" title="新主题" style="width:400px">
 <div style="padding:10px 60px 20px 60px">
 <form id="ff" method="post">
 <table cellpadding="5">
 <tr>
 <td>姓名:</td>
 <td><input class="easyui-textbox" type="text" name="name" data-options="required:true"></input></td>
 </tr>
 <tr>
 <td>邮件:</td>
 <td><input class="easyui-textbox" type="text" name="email" data-options="required:true,validType:'email'"></input></td>
 </tr>
 <tr>
 <td>主题:</td>
 <td><input class="easyui-textbox" type="text" name="subject" data-options="required:true"></input></td>
 </tr>
 <tr>
 <td>消息:</td>
 <td><input class="easyui-textbox" name="message" data-options="multiline:true" style="height:60px"></input></td>
 </tr>
 <tr>
 <td>语言:</td>
 <td>
  <select class="easyui-combobox" name="language"><option value="ar">Arabic</option><option value="bg">Bulgarian</option><option value="ca">Catalan</option><option value="zh-cht">Chinese Traditional</option><option value="cs">Czech</option><option value="da">Danish</option><option value="nl">Dutch</option><option value="en" selected="selected">English</option><option value="et">Estonian</option><option value="fi">Finnish</option><option value="fr">French</option><option value="de">German</option><option value="el">Greek</option><option value="ht">Haitian Creole</option><option value="he">Hebrew</option><option value="hi">Hindi</option><option value="mww">Hmong Daw</option><option value="hu">Hungarian</option><option value="id">Indonesian</option><option value="it">Italian</option><option value="ja">Japanese</option><option value="ko">Korean</option><option value="lv">Latvian</option><option value="lt">Lithuanian</option><option value="no">Norwegian</option><option value="fa">Persian</option><option value="pl">Polish</option><option value="pt">Portuguese</option><option value="ro">Romanian</option><option value="ru">Russian</option><option value="sk">Slovak</option><option value="sl">Slovenian</option><option value="es">Spanish</option><option value="sv">Swedish</option><option value="th">Thai</option><option value="tr">Turkish</option><option value="uk">Ukrainian</option><option value="vi">Vietnamese</option></select>
 </td>
 </tr>
 </table>
 </form>
 <div style="text-align:center;padding:5px">
 <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a>
 <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">清除</a>
 </div>
 </div>
 </div>
 <script>
 function submitForm(){
 $('#ff').form('submit');
 }
 function clearForm(){
 $('#ff').form('clear');
 }
 </script>
</body>
</html>

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS仿百度搜索自动提示框匹配查询功能
Nov 21 Javascript
使用jQuery动态加载js脚本文件的方法
Apr 03 Javascript
js+HTML5实现视频截图的方法
Jun 16 Javascript
Bootstrap实现弹性搜索框
Jul 11 Javascript
代码详解Vuejs响应式原理
Dec 20 Javascript
Vue+SpringBoot开发V部落博客管理平台
Dec 27 Javascript
搭建vue开发环境
Jul 19 Javascript
对vue v-if v-else-if v-else 的简单使用详解
Sep 29 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
Apr 28 Javascript
详解如何修改 node_modules 里的文件
May 22 Javascript
vue实现购物车案例
May 30 Javascript
js 获取扫码枪输入数据的方法
Jun 10 Javascript
利用JavaScript判断浏览器类型及版本
Aug 23 #Javascript
AngularJS使用ng-repeat指令实现下拉框
Aug 23 #Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
Aug 23 #Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
Aug 23 #Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 #Javascript
AngularJS使用ng-options指令实现下拉框
Aug 23 #Javascript
js简单获取表单中单选按钮值的方法
Aug 23 #Javascript
You might like
PHP写MySQL数据 实现代码
2009/06/15 PHP
PHP数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
关于php正则匹配汉字的方法介绍
2013/04/25 PHP
PHP中使用file_get_contents抓取网页中文乱码问题解决方法
2014/12/17 PHP
php和editplus正则表达式去除空白行
2015/04/17 PHP
PHPExcel笔记, mpdf导出
2016/05/03 PHP
PHP导出带样式的Excel示例代码
2016/08/28 PHP
PHP创建XML接口示例
2019/07/04 PHP
使用Mootools动态添加Css样式表代码,兼容各浏览器
2011/12/12 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
2013/04/28 Javascript
JavaScript中双叹号(!!)作用示例介绍
2014/04/10 Javascript
JavaScript制作windows经典扫雷小游戏
2015/03/31 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
vue.js实例todoList项目
2017/07/07 Javascript
微信小程序movable view移动图片和双指缩放实例代码
2017/08/08 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
如何使用 vue + d3 画一棵树
2018/12/03 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
2019/08/16 Javascript
[06:15]2016国际邀请赛中国区预选赛单车采访:我顶WINGS
2016/06/27 DOTA
python实现的防DDoS脚本
2011/02/08 Python
python中实现php的var_dump函数功能
2015/01/21 Python
Python psutil模块简单使用实例
2015/04/28 Python
详解Python中的Numpy、SciPy、MatPlotLib安装与配置
2017/11/17 Python
浅谈Python反射 &amp; 单例模式
2019/03/21 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
django框架cookie和session用法实例详解
2019/12/10 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
Python实现给PDF添加水印的方法
2021/01/25 Python
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
MIXIT官网:俄罗斯最大的化妆品公司之一
2020/01/25 全球购物
法国春天百货官网:Printemps.com
2020/06/29 全球购物
护士求职推荐信范文
2013/11/23 职场文书
会计专业应届生自荐信
2014/06/28 职场文书
大学生迟到检讨书500字
2014/10/17 职场文书
漫画「请问您今天要来点兔子吗?」最新杂志彩页公开
2022/03/24 日漫
python神经网络学习 使用Keras进行回归运算
2022/05/04 Python