Jquery組件easyUi實(shí)現(xiàn)表單驗(yàn)證示例
本文實(shí)例為大家分享了Jquery easyUi表單驗(yàn)證實(shí)現(xiàn)代碼,供大家參考,具體內(nèi)容如下
<!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>語(yǔ)言:</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>

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jQuery Easyui使用(一)之可折疊面板的布局手風(fēng)琴菜單
- JQuery EasyUI Layout 在from布局自適應(yīng)窗口大小的實(shí)現(xiàn)方法
- jQuery EasyUi實(shí)戰(zhàn)教程之布局篇
- jQuery Easyui實(shí)現(xiàn)左右布局
- jQuery EasyUI 布局之動(dòng)態(tài)添加tabs標(biāo)簽頁(yè)
- JQueryEasyUI Layout布局框架的使用
- Jquery組件easyUi實(shí)現(xiàn)手風(fēng)琴(折疊面板)示例
- Jquery組件easyUi實(shí)現(xiàn)選項(xiàng)卡切換示例
- jQuery EasyUI API 中文文檔 - DataGrid數(shù)據(jù)表格
- jQuery組件easyui基本布局實(shí)現(xiàn)代碼
相關(guān)文章
Jquery Ajax學(xué)習(xí)實(shí)例3 向WebService發(fā)出請(qǐng)求,調(diào)用方法返回?cái)?shù)據(jù)
Jquery Ajax學(xué)習(xí)實(shí)例3 向WebService發(fā)出請(qǐng)求,調(diào)用方法返回?cái)?shù)據(jù)2010-03-03
jquery通過擴(kuò)展select控件實(shí)現(xiàn)支持enter或focus選擇的方法
這篇文章主要介紹了jquery通過擴(kuò)展select控件實(shí)現(xiàn)支持enter或focus選擇的方法,通過jQuery針對(duì)select空間增加enter及focus選擇功能分析了jQuery擴(kuò)展的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-11-11
jQuery+canvas實(shí)現(xiàn)的球體平拋及顏色動(dòng)態(tài)變換效果
這篇文章主要介紹了jQuery+canvas實(shí)現(xiàn)的球體平拋及顏色動(dòng)態(tài)變換效果,通過jQuery結(jié)合html5的canvas技術(shù)調(diào)用時(shí)間函數(shù)實(shí)時(shí)進(jìn)行數(shù)學(xué)運(yùn)算,最終實(shí)現(xiàn)球體平拋及顏色動(dòng)態(tài)變換的效果,需要的朋友可以參考下2016-01-01
IE10中flexigrid無(wú)法顯示數(shù)據(jù)的解決方法
這篇文章主要介紹了IE10中flexigrid無(wú)法顯示數(shù)據(jù)的解決方法的相關(guān)資料,需要的朋友可以參考下2015-07-07
jQuery 實(shí)現(xiàn)評(píng)論等級(jí)好評(píng)差評(píng)特效
本文主要介紹如何實(shí)現(xiàn)類似淘寶好評(píng)差評(píng)的效果,需要的小伙伴直接拿去用吧。2016-05-05
easyUI實(shí)現(xiàn)類似搜索框關(guān)鍵詞自動(dòng)提示功能示例代碼
本篇文章主要介紹了easyUI實(shí)現(xiàn)類似搜索框關(guān)鍵詞自動(dòng)提示功能示例代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2016-12-12
jQuery函數(shù)的等價(jià)原生函數(shù)代碼示例
原生方法明顯要比jQuery方法快,因?yàn)閖Query方法要處理瀏覽器兼容以及其他一些事情,如果你針對(duì)的是現(xiàn)代瀏覽器,那么使用原生方法會(huì)使性能有很大的提升2013-05-05

