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 remove方法应用详解
Nov 22 Javascript
JS获取当前网页大小以及屏幕分辨率等
Sep 05 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
Jul 17 Javascript
详解JavaScript语言的基本语法要求
Nov 20 Javascript
JavaScript中绑定事件的三种方式及去除绑定
Nov 05 Javascript
Vue.js中组件中的slot实例详解
Jul 17 Javascript
Nuxt配合Node在实际生产中的应用详解
Aug 07 Javascript
小程序实现展开/收起的效果示例
Sep 22 Javascript
详解Vue内部怎样处理props选项的多种写法
Nov 06 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
Apr 01 Javascript
微信小程序上线发布流程图文详解
May 06 Javascript
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
利用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/24 PHP
PHP文件及文件夹操作之创建、删除、移动、复制
2016/07/13 PHP
php 使用fopen函数创建、打开文件详解及实例代码
2016/09/24 PHP
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
FireFox下XML对象转化成字符串的解决方法
2011/12/09 Javascript
Vuejs第十三篇之组件——杂项
2016/09/09 Javascript
js实现的光标位置工具函数示例
2016/10/03 Javascript
vue地址栏直接输入路由无效问题的解决
2018/11/15 Javascript
一秒学会微信小程序制作table表格
2019/02/14 Javascript
layui table单元格事件修改值的方法
2019/09/24 Javascript
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
2019/11/09 Javascript
Vue实现星级评价效果实例详解
2019/12/30 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
JavaScript图片旋转效果实现方法详解
2020/06/28 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
[01:32]dota2拉比克至宝(222)
2018/12/20 DOTA
shelve  用来持久化任意的Python对象实例代码
2016/10/12 Python
Python max内置函数详细介绍
2016/11/17 Python
解决pandas .to_excel不覆盖已有sheet的问题
2018/12/10 Python
python线程中的同步问题及解决方法
2019/08/29 Python
Selenium启动Chrome时配置选项详解
2020/03/18 Python
解决c++调用python中文乱码问题
2020/07/29 Python
Python爬取你好李焕英豆瓣短评生成词云的示例代码
2021/02/24 Python
浅析rem和em和px vh vw和% 移动端长度单位
2016/04/28 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
卡塔尔航空官方网站:Qatar Airways
2017/02/08 全球购物
行政内勤岗位职责
2014/04/07 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
项目建议书怎么写
2014/05/15 职场文书
员工薪酬激励方案
2014/06/13 职场文书
2016年教师节感言
2015/12/09 职场文书
Vue全局事件总线你了解吗
2022/02/24 Vue.js
Python中requests库的用法详解
2022/06/05 Python