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(非HTML5)可编辑表格实现代码
Dec 11 Javascript
Jquery带搜索框的下拉菜单
May 06 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
Feb 18 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
Oct 16 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
Apr 17 Javascript
JavaScript标准对象_动力节点Java学院整理
Jun 27 Javascript
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
node.js遍历目录的方法示例
Aug 01 Javascript
微信小程序云函数使用mysql数据库过程详解
Aug 07 Javascript
使用zrender.js绘制体温单效果
Oct 31 Javascript
javascript实现放大镜功能
Dec 09 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
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
ThinkPHP自动验证失败的解决方法
2011/06/09 PHP
关于PHP实现异步操作的研究
2013/02/03 PHP
php 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
php实现斐波那契数列的简单写法
2014/07/19 PHP
Cygwin中安装PHP方法步骤
2015/07/04 PHP
WordPress主题制作中自定义头部的相关PHP函数解析
2016/01/08 PHP
PHP中抽象类和抽象方法概念与用法分析
2016/05/24 PHP
php表单习惯用的正则表达式
2017/10/11 PHP
PHP开发API接口签名生成及验证操作示例
2020/05/27 PHP
基于jQuery的可以控制左右滚动及自动滚动效果的代码
2010/07/25 Javascript
javascript中的float运算精度实例分析
2010/08/21 Javascript
用js控制组织结构图可以任意拖拽到指定位置
2014/01/17 Javascript
json实现前后台的相互传值详解
2015/01/05 Javascript
推荐10 款 SVG 动画的 JavaScript 库
2015/03/24 Javascript
JavaScript实现Java中Map容器的方法
2016/10/09 Javascript
详细分析单线程JS执行问题
2017/11/22 Javascript
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
2018/09/01 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
2019/11/26 Javascript
Python的Bottle框架中返回静态文件和JSON对象的方法
2015/04/30 Python
django允许外部访问的实例讲解
2018/05/14 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
详解Python的三种拷贝方式
2020/02/11 Python
Python的in,is和id函数代码实例
2020/04/18 Python
python模拟斗地主发牌
2020/04/22 Python
Keras预训练的ImageNet模型实现分类操作
2020/07/07 Python
英国医生在线预约:Top Doctors
2019/10/30 全球购物
企业为何需要商业计划书
2013/12/26 职场文书
乡镇安全生产月活动总结
2015/05/08 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
如何书写先进事迹材料?
2019/07/02 职场文书
聊聊Python中关于a=[[]]*3的反思
2021/06/02 Python
CSS实现章节添加自增序号的方法
2021/06/23 HTML / CSS
数据库之SQL技巧整理案例
2021/07/07 SQL Server
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL