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 相关文章推荐
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
Feb 03 Javascript
Javascript常用小技巧汇总
Jun 24 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
Sep 14 Javascript
关于JavaScript 原型链的一点个人理解
Jul 31 Javascript
JavaScript交换两个变量值的七种解决方案
Dec 01 Javascript
使用jQuery操作DOM的方法小结
Feb 27 Javascript
jQuery实现字符串全部替换的方法【推荐】
Mar 09 Javascript
Angular中ng-bind和ng-model的区别实例详解
Apr 10 Javascript
微信小程序发送短信验证码完整实例
Jan 07 Javascript
微信小程序系列之自定义顶部导航功能
May 21 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
Apr 10 Javascript
react结合bootstrap实现评论功能
May 30 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检查字符串中是否包含7位GSM字符的方法
2015/03/17 PHP
简单介绍PHP的责任链编程模式
2015/08/11 PHP
基于PHP技术开发客服工单系统
2016/01/06 PHP
PHP 配置后台登录以及模板引入
2017/01/24 PHP
php调用云片网接口发送短信的实现方法
2017/10/25 PHP
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
2011/03/25 Javascript
jQuery操作select的实例代码
2012/06/14 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
js实现文字闪烁特效的方法
2015/12/17 Javascript
angularjs表格分页功能详解
2016/01/21 Javascript
jquery实现图片平滑滚动详解
2017/03/22 jQuery
详解基于Vue+Koa的pm2配置
2017/10/24 Javascript
如何使node也支持从url加载一个module详解
2018/06/05 Javascript
小程序清理本地缓存的方法
2018/08/17 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
2018/08/31 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
js实现抽奖功能
2020/11/24 Javascript
Python Mysql自动备份脚本
2008/07/14 Python
python使用cPickle模块序列化实例
2014/09/25 Python
Python开发SQLite3数据库相关操作详解【连接,查询,插入,更新,删除,关闭等】
2017/07/27 Python
Python用csv写入文件_消除空余行的方法
2018/07/06 Python
pip指定python位置安装软件包的方法
2019/07/12 Python
如何在VSCode上轻松舒适的配置Python的方法步骤
2019/10/28 Python
OpenCV哈里斯(Harris)角点检测的实现
2020/01/15 Python
python pillow库的基础使用教程
2021/01/13 Python
HTML5触摸事件(touchstart、touchmove和touchend)的实现
2020/05/08 HTML / CSS
Julep官网:美容产品和指甲油
2017/02/25 全球购物
BRASTY捷克:购买香水、化妆品、手袋和手表
2017/07/12 全球购物
N.Peal官网:来自伦敦的高档羊绒品牌
2018/10/29 全球购物
Aeropostale官网:美国著名校园品牌及青少年服饰品牌
2019/03/21 全球购物
任命书模板
2014/06/04 职场文书
乡镇八一建军节活动方案
2014/08/24 职场文书
家长高考寄语
2015/02/27 职场文书
公路施工安全责任书
2015/05/08 职场文书
Python面向对象之内置函数相关知识总结
2021/06/24 Python