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引擎长时间独占线程造成卡顿的解决方案
Dec 03 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
Nov 20 Javascript
jquery实现select选择框内容左右移动代码分享
Nov 21 Javascript
JavaScript中apply方法的应用技巧小结
Sep 29 Javascript
用jquery快速解决IE输入框不能输入的问题
Oct 04 Javascript
bootstrap实现图片自动轮播
Dec 21 Javascript
require.js中的define函数详解
Jul 10 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
Nov 07 Javascript
微信小程序实现一张或多张图片上传(云开发)
Sep 25 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 Javascript
如何解决jQuery 和其他JS库的冲突
Jun 22 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
AM/FM收音机的安装与调试
2021/03/02 无线电
php生成缩略图的类代码
2008/10/02 PHP
php中的三元运算符使用说明
2011/07/03 PHP
PHP中使用BigMap实例
2015/03/30 PHP
php实现图片按比例截取的方法
2017/02/06 PHP
PHP笛卡尔积实现算法示例
2018/07/30 PHP
PHP通过调用新浪API生成t.cn格式短网址链接的方法详解
2019/02/20 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
在页面上点击任一链接时触发一个事件的代码
2007/04/07 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
2011/09/29 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
2013/05/19 Javascript
javascript生成json数据简单示例分享
2014/02/14 Javascript
javascript中几个容易混淆的概念总结
2015/04/14 Javascript
很不错的两款Bootstrap Icon图标选择组件
2016/01/28 Javascript
javascript创建对象、对象继承的实用方式详解
2016/03/08 Javascript
深入理解JavaScript函数参数(推荐)
2016/07/26 Javascript
jQuery fadeOut 异步实例代码详解
2016/08/18 Javascript
AngularJS中如何使用echart插件示例详解
2016/10/26 Javascript
基于nodejs 的多页面爬虫实例代码
2017/05/31 NodeJs
Bootstrap弹出框(Popover)被挤压的问题小结
2017/07/11 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
js/jQuery实现全选效果
2019/06/17 jQuery
小程序分享链接onShareAppMessage的具体用法
2020/05/22 Javascript
[32:56]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.11
2020/12/16 DOTA
Python中防止sql注入的方法详解
2017/02/25 Python
用python实现将数组元素按从小到大的顺序排列方法
2018/07/02 Python
python读写csv文件方法详细总结
2019/07/05 Python
微信小程序实现可实时改变转速的css3旋转动画实例代码
2018/09/11 HTML / CSS
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
2018/01/29 HTML / CSS
英国打印机墨盒销售网站:Ink Factory
2019/10/07 全球购物
客房主管岗位职责
2013/12/09 职场文书
物流创业计划书
2014/02/01 职场文书
2014年十一国庆节活动方案
2014/09/16 职场文书
会议简报格式范文
2015/07/20 职场文书
无线电通信名词解释
2022/02/18 无线电