Validform实时表单验证插件实例使用
生活随笔
收集整理的這篇文章主要介紹了
Validform实时表单验证插件实例使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文檔日期：2016-10-17
適用范圍：所有類型網站表單驗證
插件版本：v5.3.2
插件地址：http://validform.rjboy.cn/Validform/v5.3.2/Validform_v5.3.2_min.js
jquery地址：http://download.csdn.net/detail/bennygreat/3861587
html中的代碼實例
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/style.css"><script type="text/javascript" src="js/jquery-1.6.2.min.js"></script><script type="text/javascript" src="js/Validform_v5.3.2.js"></script> </head> <body><div class="main"><div class="box"><form action="test.php" id="myForm"><ul><li>賬號：<input type="text" name="number" ajaxurl="number.php" datatype="s5-16" errormsg="昵稱至少5個字符,最多16個字符！"><div class="Validform_checktip"></div></li><li>密碼：<input type="password" name="password" datatype="*6-15" errormsg="密碼范圍在6~15位之間！"><div class="Validform_checktip"></div></li><li>郵箱：<input type="email" name="email" datatype="e" errormsg="郵箱格式不正確！"><div class="Validform_checktip"></div></li><li>內容：<textarea name="content" id="" cols="30" rows="10" tip="請在這里輸入您的意見。" errormsg="很感謝您花費寶貴時間給我們提供反饋，請填寫有效內容！" datatype="s" altercss="gray"></textarea><div class="Validform_checktip"></div></li><li>性別：<input type="radio" class="radio" name="sex" value='1' datatype="*" nullmsg="請選擇性別！" errormsg="請選擇性別！" >男 <input type="radio" class="radio" name="sex" value='0' >女 <div class="Validform_checktip"></div></li><li>select：<select name="select" datatype="*" nullmsg="請選擇！" errormsg="請選擇！" ><option value="開啟">開啟</option><option value="關閉">關閉</option></select><div class="Validform_checktip"></div></li><li>愛好：<input type="checkbox" class="check" name="hopoy[]" value="足球" datatype="*" nullmsg="請選擇愛好！" errormsg="請選擇性別！" >足球<input type="checkbox" class="check" name="hopoy[]" value="籃球" >籃球<input type="checkbox" class="check" name="hopoy[]" value="排球" >排球<div class="Validform_checktip"></div></li><li><input type="submit" value="提交" class="btn"><input type="reset" value="重置" class="btn"></li></ul><div id="dump"></div></form></div></div><script>$(function() {$("#myForm").Validform({tiptype:function(msg,o,cssctl){if(!o.obj.is("form")){var objtip=o.obj.siblings(".Validform_checktip");cssctl(objtip,o.type);objtip.text(msg);}else{var objtip=o.obj.find("#dump");cssctl(objtip,o.type);objtip.text(msg);}},ajaxPost:true});}) </script> </body> </html>test.php文件代碼實例
<?phpsleep(3);if($_POST) {echo '{"info":"數據提交成功！","status":"y"}';}?>number.php代碼實例
<?phpsleep(1);if($_POST){if($_POST["param"] == "abc123"){echo '{"info":"用戶名重復！","status":"n"}';}else{echo '{"info":"通過信息驗證！","status":"y"}';}} ?>style.css樣式代碼
/*全局注釋*/ *{padding: 0px;marign:0px; } ul,li{list-style: none; } /*表單部分*/ .main{margin-top:30px; background: #fff; }.main .box{width: 50%;margin: 0 auto; }.main .box ul li{margin-top: 5px; } .main .box ul li input{height: 20px;width: 140px; }.main .box ul li input.radio,.main .box ul li input.check{width: 13px;height: 13px; }/*固定文本框大小*/ .main .box ul li textarea{resize: none;width: 200px;height: 100px;max-width: 200px;max-height: 100px; }/*表單提交按鈕*/ .main .box ul li input.btn{margin:5px; width: 40px;height: 30px; }#dump{width: 50%;margin:10px auto; }/*提示信息*/ .Validform_checktip{/*display: none;*/font-size: 14px;padding-left: 20px; } .Validform_wrong{font-size: 14px;color: red;padding-left: 20px; }總結
以上是生活随笔為你收集整理的Validform实时表单验证插件实例使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 存储过程没有执行完后没有释放锁_【大厂面
- 下一篇： 【Ant Design Vue】之lay