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 相关文章推荐
Javascript常用运算符(Operators)-javascript基础教程
Dec 14 Javascript
简洁短小的 JavaScript IE 浏览器判定代码
Mar 21 Javascript
javascript函数中参数传递问题示例探讨
Jul 31 Javascript
jQuery实现返回顶部效果的方法
May 29 Javascript
Javascript实现苹果悬浮虚拟按钮
Apr 10 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
May 10 Javascript
jQuery实现一个简单的轮播图
Feb 19 Javascript
从parcel.js打包出错到选择nvm的全部过程
Jan 23 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
May 22 Javascript
如何在微信小程序中存setStorage
Dec 13 Javascript
Angular利用HTTP POST下载流文件的步骤记录
Jul 26 Javascript
详解如何使用Node.js实现热重载页面
May 06 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可逆加密/解密函数分享
2012/09/25 PHP
Javascript公共脚本库系列(一): 弹出层脚本
2011/02/24 Javascript
javascript 拖动表格行实现代码
2011/05/05 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
Mac地址验证的javascript代码
2013/11/09 Javascript
详解jQuery插件开发中的extend方法
2013/11/19 Javascript
nodeType属性返回被选节点的节点类型介绍
2013/11/22 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
jquery五角星评分插件示例分享
2014/02/21 Javascript
Javascript中String的常用方法实例分析
2015/06/13 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
2015/08/06 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
2015/12/04 Javascript
Vue.JS入门教程之自定义指令
2016/12/08 Javascript
JavaScript实现经典排序算法之选择排序
2016/12/28 Javascript
详解angularjs结合pagination插件实现分页功能
2017/02/10 Javascript
vue脚手架中配置Sass的方法
2018/01/04 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
2019/04/09 Javascript
javascript for循环性能测试示例
2019/08/07 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
Python Tkinter基础控件用法
2014/09/03 Python
使用Python对MySQL数据操作
2017/04/06 Python
django 创建过滤器的实例详解
2017/08/14 Python
Python global全局变量函数详解
2018/09/18 Python
python之cv2与图像的载入、显示和保存实例
2018/12/05 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
python实现Excel文件转换为TXT文件
2019/04/28 Python
浅谈Django+Gunicorn+Nginx部署之路
2019/09/11 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧装饰器信号与槽详细使用方法与实例
2020/03/06 Python
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
Oracle性能调优原则
2012/05/03 面试题
分公司经理任命书
2014/06/05 职场文书
2014年服务员工作总结
2014/11/18 职场文书
Vue和Flask通信的实现
2021/05/19 Vue.js
CSS实现章节添加自增序号的方法
2021/06/23 HTML / CSS
Python实现打乒乓小游戏
2021/09/25 Python