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 相关文章推荐
基于Jquery的跨域传输数据(JSONP)
Mar 10 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
Oct 26 Javascript
妙用Jquery的val()方法
Jun 27 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
Jan 26 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
Dec 03 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
Apr 30 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
Jun 12 Javascript
微信小程序 实现点击添加移除class
Jun 12 Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
vue-quill-editor富文本编辑器简单使用方法
Sep 21 Javascript
详解Nuxt.js中使用Element-UI填坑
Sep 06 Javascript
vue的webcamjs集成方式
Nov 16 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
了解咖啡雨林联盟认证 什么是雨林认证 雨林认证是什么意思
2021/03/05 新手入门
PHP实现时间轴函数代码
2011/10/08 PHP
浅析PHP绘图技术
2013/07/03 PHP
dedecms集成财付通支付接口
2014/12/28 PHP
Laravel框架基于ajax和layer.js实现无刷新删除功能示例
2019/01/17 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
php创建类并调用的实例方法
2019/09/25 PHP
基于JQuery的简单实现折叠菜单代码
2010/09/15 Javascript
Webkit的跨域安全问题说明
2011/09/13 Javascript
jquery中ajax学习笔记一
2011/10/16 Javascript
jquery 单引号和双引号的区别及使用注意
2013/07/31 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
2014/02/11 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
2014/05/27 Javascript
动态创建按钮的JavaScript代码
2016/01/29 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
2018/03/05 Javascript
vue-cli脚手架引入图片的几种方法总结
2018/03/13 Javascript
node 使用 async 控制并发的方法
2018/05/07 Javascript
nodejs 如何手动实现服务器
2018/08/20 NodeJs
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
2019/06/04 Javascript
Jquery异步上传文件代码实例
2019/11/13 jQuery
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG
2014/05/26 DOTA
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
详解Django admin高级用法
2019/11/06 Python
pytorch对梯度进行可视化进行梯度检查教程
2020/02/04 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
英国标准协会商店:BSI Shop
2019/02/25 全球购物
护士演讲稿范文
2014/01/05 职场文书
三年级科学教学反思
2014/01/29 职场文书
政法学院毕业生求职信
2014/02/28 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
实习报告范文
2019/07/30 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
javascript的setTimeout()使用方法总结
2021/11/20 Javascript