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 相关文章推荐
一些mootools的学习资源
Feb 07 Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 Javascript
浅谈JavaScript 标准对象
Jun 02 Javascript
jQuery.uploadify文件上传组件实例讲解
Sep 23 Javascript
jQuery倒计时代码(超简单)
Feb 27 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
Dec 15 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
Jan 31 Javascript
JS实现关键词高亮显示正则匹配
Jun 22 Javascript
vue进入页面时滚动条始终在底部代码实例
Mar 26 Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 Javascript
javascript实现blob加密视频源地址的方法
Aug 08 Javascript
ES6 Generator基本使用方法示例
Jun 06 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&amp;mysql(一)
2006/10/09 PHP
php chr() ord()中文截取乱码问题解决方法
2008/09/08 PHP
PHP 防注入函数(格式化数据)
2011/08/08 PHP
php中apc缓存使用示例
2013/12/25 PHP
php生成静态页面的简单示例
2014/04/17 PHP
php站内搜索关键词变亮的实现方法
2014/12/30 PHP
smarty循环嵌套用法示例分析
2016/07/19 PHP
Yii2基于Ajax自动获取表单数据的方法
2016/08/10 PHP
用PHP去掉文件头的Unicode签名(BOM)方法
2017/06/22 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
PHP超全局变量实现原理及代码解析
2020/09/01 PHP
不安全的常用的js写法
2009/09/15 Javascript
Jquery下attr和removeAttr的使用方法
2010/12/28 Javascript
jQuery中val()方法用法实例
2014/12/25 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
Javascript 事件冒泡机制详细介绍
2016/10/10 Javascript
vue2.0实现导航菜单切换效果
2017/05/08 Javascript
微信小程序登录session的使用
2019/03/17 Javascript
JavaScript实现简单随机点名器
2019/11/21 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
JavaScript通如何过RGraph实现动态仪表盘
2020/10/15 Javascript
Python方法的延迟加载的示例代码
2017/12/18 Python
基于Python中numpy数组的合并实例讲解
2018/04/04 Python
Python Django模板之模板过滤器与自定义模板过滤器示例
2019/10/18 Python
Python使用OpenPyXL处理Excel表格
2020/07/02 Python
scrapy结合selenium解析动态页面的实现
2020/09/28 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
个人收入证明范本
2014/01/12 职场文书
竞聘书模板
2014/03/31 职场文书
情况说明书怎么写
2015/10/08 职场文书
《桂花雨》教学反思
2016/02/19 职场文书
入党申请书怎么写?
2019/06/21 职场文书
一篇文章弄懂MySQL查询语句的执行过程
2021/05/07 MySQL
go goroutine 怎样进行错误处理
2021/07/16 Golang