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的淡入淡出可自动切换的幻灯插件打包下载
Sep 15 Javascript
怎么清空javascript数组
May 11 Javascript
javascript 获取浏览器版本
Jan 21 Javascript
JavaScript用select实现日期控件
Jul 17 Javascript
浅析在javascript中创建对象的各种模式
May 06 Javascript
深入理解jQuery之防止冒泡事件
May 24 Javascript
Javascript类型系统之String字符串类型详解
Jun 21 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 Javascript
JavaScript数据类型的存储方法详解
Aug 25 Javascript
原生JS实现 MUI导航栏透明渐变效果
Nov 07 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
Dec 18 Javascript
JS表单传值和URL编码转换
Mar 03 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
如何实现给定日期的若干天以后的日期
2006/10/09 PHP
php at(@)符号的用法简介
2009/07/11 PHP
同台服务器使用缓存APC效率高于Memcached的演示代码
2010/02/16 PHP
php利用腾讯ip分享计划获取地理位置示例分享
2014/01/20 PHP
学习php设计模式 php实现建造者模式
2015/12/07 PHP
PHP实现的mysql操作类【MySQL与MySQLi方式】
2017/10/07 PHP
PHP+redis实现的限制抢购防止商品超发功能详解
2019/09/19 PHP
javascript json2 使用方法
2010/03/16 Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
2010/11/16 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
2013/04/24 Javascript
js arguments,jcallee caller用法总结
2013/11/30 Javascript
jquery+php实现搜索框自动提示
2014/11/28 Javascript
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
jQuery EasyUi实战教程之布局篇
2016/01/26 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
2016/10/10 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
2016/11/25 Javascript
Vue.js在使用中的一些注意知识点
2017/04/29 Javascript
详解react、redux、react-redux之间的关系
2018/04/11 Javascript
Vue在页面数据渲染完成之后的调用方法
2018/09/11 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
2019/04/08 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
python 简单的绘图工具turtle使用详解
2017/06/21 Python
Python BS4库的安装与使用详解
2018/08/08 Python
Python 微信爬虫完整实例【单线程与多线程】
2019/07/06 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
捷克浴室和厨房设备购物网站:SIKO
2018/08/11 全球购物
初中升旗仪式演讲稿
2014/05/08 职场文书
计算机网络专业自荐信
2014/07/04 职场文书
教师节学生演讲稿
2014/09/03 职场文书
2014年政风行风工作总结
2014/11/22 职场文书
同意转租证明
2015/06/24 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
2016年大学生暑期社会实践活动总结
2016/04/06 职场文书
Redis IP地址的绑定的实现
2021/05/08 Redis
教你如何让spark sql写mysql的时候支持update操作
2022/02/15 MySQL