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压缩工具下载集合
Mar 06 Javascript
让网页根据不同IE版本显示不同的内容
Feb 08 Javascript
jquery live()重复绑定的解决方法介绍
Jan 03 Javascript
jquery动态改变form属性提交表单
Jun 03 Javascript
JavaScript操作DOM元素的childNodes和children区别
Apr 01 Javascript
js+canvas绘制矩形的方法
Jan 28 Javascript
微信js-sdk地理位置接口用法示例
Oct 12 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
Jul 23 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
Nov 15 Javascript
JavaScript使用类似break机制中断forEach循环的方法
Nov 13 Javascript
原生JS实现动态添加新元素、删除元素方法
May 05 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
Nov 20 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面向对象之工作单元(实例讲解)
2017/06/26 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
Laravel框架使用技巧之使用url()全局函数返回前一个页面的地址方法详解
2020/04/06 PHP
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
2010/04/01 Javascript
jQuery contains过滤器实现精确匹配使用方法
2013/04/12 Javascript
Javascript中的Array数组对象详谈
2014/03/03 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
2015/08/11 Javascript
基于javascript实现动态时钟效果
2020/08/18 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
浅谈JavaScript的内置对象和浏览器对象
2016/06/03 Javascript
简单实现js间歇或无缝滚动效果
2016/06/29 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
JS实现购物车特效
2017/02/02 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
2017/02/05 Javascript
原生JS实现的雪花飘落动画效果
2018/05/03 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
2019/09/30 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
Python中Continue语句的用法的举例详解
2015/05/14 Python
Python使用lxml模块和Requests模块抓取HTML页面的教程
2016/05/16 Python
Python实现在线暴力破解邮箱账号密码功能示例【测试可用】
2017/09/06 Python
python中in在list和dict中查找效率的对比分析
2018/05/04 Python
python3实现字符串的全排列的方法(无重复字符)
2018/07/07 Python
pytorch 在网络中添加可训练参数,修改预训练权重文件的方法
2019/08/17 Python
windows、linux下打包Python3程序详细方法
2020/03/17 Python
使用python实现下载我们想听的歌曲,速度超快
2020/07/09 Python
HTML5 video标签(播放器)学习笔记(二):播放控制
2015/04/24 HTML / CSS
详解webapp页面滚动卡顿的解决办法
2018/12/26 HTML / CSS
洲际酒店集团英国官网:IHG英国
2019/07/10 全球购物
销售业务实习自我鉴定
2013/09/23 职场文书
表彰先进集体通报
2014/01/12 职场文书
网络管理员岗位职责
2014/03/17 职场文书
公民授权委托书
2014/10/15 职场文书
《当代神农氏》教学反思
2016/02/23 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android