jq实现注册页面表单校验
生活随笔
收集整理的這篇文章主要介紹了
jq实现注册页面表单校验
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>網站注冊頁面</title><style>#contanier{border: 0px solid white;width: 1300px;margin: auto;}#top{border: 0px solid white;width: 100%;height: 50px;}#menu{border: 0px solid white;height: 40px;background-color: black;padding-top: 10px;margin-bottom: 15px;margin-top: 10px;}.top{border: 0px solid white;width: 405px;height: 100%;float: left;padding-left: 25px;}#top1{padding-top: 15px;}#bottom{margin-top: 13px;text-align: center;}#form{height: 500px;padding-top: 70px;background-image: url(../img/regist_bg.jpg);margin-bottom: 10px;}a{text-decoration: none;}label.error{background:url(../img/unchecked.gif) no-repeat 10px 3px;padding-left: 30px;font-family:georgia;font-size: 15px;font-style: normal;color: red;}label.success{background:url(../img/checked.gif) no-repeat 10px 3px;padding-left: 30px;}#father{border: 0px solid white;padding-left: 307px;}#form2{border: 5px solid gray;width: 660px;height: 450px;}</style><script type="text/javascript" src="../js/jquery-1.8.3.js" ></script><!--引入validate插件js文件--><script type="text/javascript" src="../js/jquery.validate.min.js" ></script><!--引入國際化js文件--><script type="text/javascript" src="../js/messages_zh.js" ></script><script>$(function(){$("#registForm").validate({rules:{user:{required:true,minlength:3},password:{required:true,digits:true,minlength:6},repassword:{required:true,equalTo:"[name='password']"},email:{required:true,email:true},username:{required:true,maxlength:5},sex:{required:true}},messages:{user:{required:"用戶名不能為空!",minlength:"用戶名不得少于3位!"},password:{required:"密碼不能為空!",digits:"密碼必須是整數!",minlength:"密碼不得少于6位!"},repassword:{required:"確認密碼不能為空!",equalTo:"兩次輸入密碼不一致!"},email:{required:"郵箱不能為空!",email:"郵箱格式不正確!"},username:{required:"姓名不能為空!",maxlength:"姓名不得多于5位!"},sex:{required:"性別必須勾選!"}},errorElement: "label", //用來創建錯誤提示信息標簽,validate插件默認的就是labelsuccess: function(label) { //驗證成功后的執行的回調函數//label指向上面那個錯誤提示信息標簽labellabel.text(" ") //清空錯誤提示消息.addClass("success"); //加上自定義的success類}});});</script></head><body><div id="contanier"><div id="top"><div class="top"><img src="../img/logo2.png" height="47px"/></div><div class="top"><img src="../img/header.png" height="45px" /></div><div class="top" id="top1"><a href="#">登錄</a><a href="#">注冊</a><a href="#">購物車</a></div></div><div id="menu"><a href="#"><font size="5" color="white">首頁</font></a> <a href="#"><font color="white">電腦辦公</font></a> <a href="#"><font color="white">手機數碼</font></a> <a href="#"><font color="white">鞋靴箱包</font></a> </div><div id="form"><form action="#" method="get" id="registForm"><div id="father"><div id="form2"><table border="0px" width="100%" height="100%" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white"><tr><td colspan="2" > <font size="5">會員注冊</font> USER REGISTER </td></tr><tr><td width="180px"> <label for="user" >用戶名</label></td><td><em style="color: red;">*</em> <input type="text" name="user" size="35px" id="user"/></td></tr><tr><td> 密碼</td><td><em style="color: red;">*</em> <input type="password" name="password" size="35px" id="password" /></td></tr><tr><td> 確認密碼</td><td><em style="color: red;">*</em> <input type="password" name="repassword" size="35px"/></td></tr><tr><td> Email</td><td><em style="color: red;">*</em> <input type="text" name="email" size="35px" id="email"/></td></tr><tr><td> 姓名</td><td><em style="color: red;">*</em> <input type="text" name="username" size="35px"/></td></tr><tr><td> 性別</td><td><span style="margin-right: 155px;"><em style="color: red;">*</em> <input type="radio" name="sex" value="男"/>男<input type="radio" name="sex" value="女"/>女<em></em><label for="sex" class="error" style="display: none;"></label></span></td></tr><tr><td> 出生日期</td><td><em style="color: red;">*</em> <input type="text" name="birthday" size="35px"/></td></tr><tr><td> 驗證碼</td><td><em style="color: red;">*</em> <input type="text" name="yanzhengma" /><img src="../img/yanzhengma.png" style="height: 18px;width: 85px;"/></td></tr><tr><td colspan="2"> <input type="submit" value="注 冊" height="50px"/></td></tr></table></div></div></form></div><div><img src="../img/footer.jpg" width="100%"/></div><div id="bottom"><a href="../案例一：網站信息顯示頁面/網站信息顯示頁面.html">關于我們</a><a href="#">聯系我們</a><a href="#">招賢納士</a><a href="#">法律聲明</a><a href="../案例三：網站友情鏈接顯示頁面/網站友情鏈接顯示頁面.html">友情鏈接</a><a href="#">支付方式</a><a href="#">配送方式</a><a href="#">服務聲明</a><a href="#">廣告聲明</a><p>Copyright ? 2005-2016 傳智商城 版權所有 </p></div></div></body>
</html>
?
總結
以上是生活随笔為你收集整理的jq实现注册页面表单校验的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 城头土命适合做计算机电脑职业,土命人适合
- 下一篇： E-R图画法解析----概念模型的一种表