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_06_理解对象的创建过程
Oct 15 Javascript
自己整理的一个javascript日期处理函数
Oct 16 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
Feb 27 Javascript
window.returnValue使用方法示例介绍
Jul 03 Javascript
使用angular写一个hello world
Jan 23 Javascript
JavaScript代码性能优化总结篇
May 15 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
Jun 21 Javascript
Js 获取、判断浏览器版本信息的简单方法
Aug 08 Javascript
javascript 数组去重复(在线去重工具)
Dec 17 Javascript
Vue2.0 从零开始_环境搭建操作步骤
Jun 14 Javascript
完美解决axios跨域请求出错的问题
Feb 05 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
Apr 02 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中突破基于HTTP_REFERER的防盗链措施(stream_context_create)
2011/03/29 PHP
Warning: session_destroy() : Trying to destroy uninitialized sessionq错误
2011/06/16 PHP
应用开发中涉及到的css和php笔记分享
2011/08/02 PHP
PHP echo,print,printf,sprintf函数之间的区别与用法详解
2013/11/27 PHP
javascript使用eval或者new Function进行语法检查
2010/10/16 Javascript
JQuery动态给table添加、删除行 改进版
2011/01/19 Javascript
javascript手风琴下拉菜单实现代码
2015/11/12 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
js实现登录验证码
2016/12/22 Javascript
JS中Safari浏览器中的Date
2017/07/17 Javascript
Vue.js自定义事件的表单输入组件方法
2018/03/08 Javascript
微信小程序实现手指触摸画板
2018/07/09 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
vue路由插件之vue-route
2019/06/13 Javascript
通过vue刷新左侧菜单栏操作
2020/08/06 Javascript
[04:44]DOTA2英雄梦之声_第12期_矮人直升机
2014/06/21 DOTA
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
跟老齐学Python之使用Python查询更新数据库
2014/11/25 Python
Python中使用dom模块生成XML文件示例
2015/04/05 Python
python基础while循环及if判断的实例讲解
2017/08/25 Python
详解Python中 sys.argv[]的用法简明解释
2017/12/20 Python
Python内存读写操作示例
2018/07/18 Python
python实现五子棋小游戏
2020/03/25 Python
python使用SQLAlchemy操作MySQL
2020/01/02 Python
Python 操作SQLite数据库的示例
2020/10/16 Python
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
2020/03/18 HTML / CSS
法国大使拉杆箱官网:DELSEY Paris
2018/03/20 全球购物
马来西亚和新加坡巴士票在线预订:CatchThatBus
2018/11/17 全球购物
艺术系应届生的自我评价
2013/10/19 职场文书
2014年情人节活动方案
2014/02/16 职场文书
2014年寒假社会实践活动心得体会
2014/04/07 职场文书
岗位标兵事迹材料
2014/05/17 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
Nginx本地目录映射实现代码实例
2021/03/31 Servers
Feign调用传输文件异常的解决
2021/06/24 Java/Android
python实现双向链表原理
2022/05/25 Python