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 插件 任意位置浮动固定层
Dec 25 Javascript
用JavaScript编写COM组件的步骤
Mar 17 Javascript
javascript倒计时功能实现代码
Jun 07 Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 Javascript
js树插件zTree获取所有选中节点数据的方法
Jan 28 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
Feb 04 Javascript
详解mpvue开发小程序小总结
Jul 25 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 Javascript
Node.js 进程平滑离场剖析小结
Jan 24 Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 Javascript
微信小程序批量上传图片到七牛(推荐)
Dec 19 Javascript
一篇文章看懂JavaScript中的回调
Jan 05 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
Yii分页用法实例详解
2014/12/04 PHP
php mysql操作mysql_connect连接数据库实例详解
2016/12/26 PHP
JScript内置对象Array中元素的删除方法
2007/03/08 Javascript
Google Map Api和GOOGLE Search Api整合实现代码
2009/07/18 Javascript
jquery获得同源iframe内body下标签的值的方法
2014/09/25 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
jQuery中on()方法用法实例
2015/01/19 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
jQuery Validate表单验证深入学习
2015/12/18 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
2017/03/06 Javascript
jQuery插件开发发送短信倒计时功能代码
2017/05/09 jQuery
JS实现简单表格排序操作示例
2017/10/07 Javascript
NodeJS爬虫实例之糗事百科
2017/12/14 NodeJs
详解vue项目中使用token的身份验证的简单实践
2019/03/08 Javascript
js核心基础之闭包的应用实例分析
2019/05/11 Javascript
javascript canvas API内容整理
2020/02/16 Javascript
js实现手表表盘时钟与圆周运动
2020/09/18 Javascript
python 示例分享---逻辑推理编程解决八皇后
2014/07/20 Python
python做量化投资系列之比特币初始配置
2018/01/23 Python
详解python数据结构和算法
2019/04/18 Python
使用Matplotlib 绘制精美的数学图形例子
2019/12/13 Python
python3 正则表达式基础廖雪峰
2020/03/25 Python
Python 存取npy格式数据实例
2020/07/01 Python
python实现快速文件格式批量转换的方法
2020/10/16 Python
使用HTML5 Canvas API中的clip()方法裁剪区域图像
2016/03/25 HTML / CSS
深入解析HTML5中的Blob对象的使用
2015/09/08 HTML / CSS
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
应届生学校辅导员求职信
2013/11/07 职场文书
结婚保证书
2015/01/16 职场文书
详解Python牛顿插值法
2021/05/11 Python
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL