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获取iframe中的dom对象(两种方法)
Jul 02 Javascript
javascript中call和apply方法浅谈
Sep 27 Javascript
IE6兼容透明背景图片及解决方案
Aug 19 Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 Javascript
javaScript数组迭代方法详解
Apr 14 Javascript
微信小程序实战之自定义toast(6)
Apr 18 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
Jun 13 Javascript
用Vue.extend构建消息提示组件的方法实例
Aug 08 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
小程序转发探索示例
Feb 19 Javascript
在Vue环境下利用worker运行interval计时器的步骤
Aug 01 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
PHP自动更新新闻DIY
2006/10/09 PHP
浅谈php中的循环while、do...while、for、foreach四种循环
2016/11/05 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
javascript编程起步(第六课)
2007/01/10 Javascript
解析js如何获取当前url中的参数值并复制给input
2013/06/23 Javascript
嵌入式iframe子页面与父页面js通信的方法
2015/01/20 Javascript
javascript动态添加删除tabs标签的方法
2015/07/06 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
2015/10/01 Javascript
JavaScript的设计模式经典之代理模式
2016/02/24 Javascript
开启BootStrap学习之旅
2016/05/04 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
2016/12/06 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
理解 javascript 中的函数表达式与函数声明
2017/07/07 Javascript
微信小程序页面滑动屏幕加载数据效果
2020/11/16 Javascript
node.js 发布订阅模式的实例
2017/09/10 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
基于Python Shell获取hostname和fqdn释疑
2016/01/25 Python
python中的字典使用分享
2016/07/31 Python
Python列表推导式、字典推导式与集合推导式用法实例分析
2018/02/07 Python
Python解决两个整数相除只得到整数部分的实例
2018/11/10 Python
django富文本编辑器的实现示例
2019/04/10 Python
python 将字符串中的数字相加求和的实现
2019/07/18 Python
python的scipy实现插值的示例代码
2019/11/12 Python
win10安装python3.6的常见问题
2020/07/01 Python
如何在Canvas中添加事件的方法示例
2019/05/21 HTML / CSS
英国No.1文具和办公用品在线:Euroffice
2016/09/21 全球购物
美国皮靴公司自1863年:The Frye Company
2016/11/30 全球购物
旷课检讨书2000字
2014/01/14 职场文书
《雨点》教学反思
2014/02/12 职场文书
诚信考试标语
2014/06/24 职场文书
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android