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入门教程(11) js事件处理
Jan 31 Javascript
Extjs学习过程中新手容易碰到的低级错误积累
Feb 11 Javascript
基于jquery的动态创建表格的插件
Apr 05 Javascript
jquery滚动到顶部底部代码
Apr 20 Javascript
Position属性之relative用法
Dec 14 Javascript
浅谈JS中的bind方法与函数柯里化
Aug 10 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
Nov 26 Javascript
微信小程序实现图片预览功能
Jan 31 Javascript
React如何避免重渲染
Apr 10 Javascript
MockJs结合json-server模拟后台数据
Aug 26 Javascript
js实现简易计算器功能
Oct 18 Javascript
js中switch语句的学习笔记
Mar 25 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
日本十大科幻动漫 宇宙骑士垫底,第一已成经典
2020/03/04 日漫
PHP 观察者模式的实现代码
2013/05/10 PHP
PHP页面中文乱码分析
2013/10/29 PHP
PHP循环结构实例讲解
2014/02/10 PHP
php操作MongoDB基础教程(连接、新增、修改、删除、查询)
2014/03/25 PHP
PHP中使用localhost连接Mysql不成功的解决方法
2014/08/20 PHP
JavaScript中的Window窗口对象
2008/01/16 Javascript
javascript 日期时间函数(经典+完善+实用)
2009/05/27 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
javascript实用方法总结
2015/02/06 Javascript
JS仿Windows开机启动Loading进度条的方法
2015/02/26 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
2015/08/04 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
分享JavaScript监听全部Ajax请求事件的方法
2016/08/28 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
js实现音乐播放控制条
2017/09/09 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
微信小程序点餐系统开发常见问题汇总
2019/08/06 Javascript
Node使用Nodemailer发送邮件的方法实现
2020/02/24 Javascript
Python爬虫框架Scrapy实例代码
2018/03/04 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
Python分布式进程中你会遇到的问题解析
2019/05/28 Python
基于FME使用Python过程图解
2020/05/13 Python
Python 如何实现访问者模式
2020/07/28 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
高级3D打印市场:Gambody
2019/12/26 全球购物
非功能性需求都包括哪些方面
2013/10/29 面试题
经典优秀毕业生求职信范文分享
2013/12/18 职场文书
化工专业大学生职业生涯规划书
2014/01/14 职场文书
六一亲子活动感想
2015/08/07 职场文书
解决mysql问题:由于找不到MSVCR120.dll,无法继续执行代码
2021/06/26 MySQL
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers