首页 > 代码库 > 一款基于jQuery的带Tooltip表单验证的注册表单
一款基于jQuery的带Tooltip表单验证的注册表单
今天给大家分享一款基于jQuery的注册表单，这款注册表单的特点是确认提交注册信息时，表单会自动验证所填写的信息，如果信息填写有误，即会在相应的字段内以Tooltip提示框的形式显示错误信息。这款jQuery表单实现非常简单，使用起来相对比较轻巧。
在线预览 源码下载
这款插件js要引用jquery.js库，还有一个easyform.js 库。
html代码部分如下：
<div class="form-div"> <form id="reg-form" action="" method="post"> <table> <tr> <td> 用户名 </td> <td> <input name="uid" type="text" id="uid" easyform="length:4-16;char-normal;real-time;" message="用户名必须为4—16位的英文字母或数字" easytip="disappear:lost-focus;theme:blue;" ajax-message="用户名已存在!"> </td> </tr> <tr> <td> 密码 </td> <td> <input name="psw1" type="password" id="psw1" easyform="length:6-16;" message="密码必须为6—16位" easytip="disappear:lost-focus;theme:blue;"> </td> </tr> <tr> <td> 确认密码 </td> <td> <input name="psw2" type="password" id="psw2" easyform="length:6-16;equal:#psw1;" message="两次密码输入要一致" easytip="disappear:lost-focus;theme:blue;"> </td> </tr> <tr> <td> email </td> <td> <input name="email" type="text" id="email" easyform="email;real-time;" message="Email格式要正确" easytip="disappear:lost-focus;theme:blue;" ajax-message="这个Email地址已经被注册过，请换一个吧!"> </td> </tr> <tr> <td> 昵称 </td> <td> <input name="nickname" type="text" id="nickname" easyform="length:2-16" message="昵称必须为2—16位" easytip="disappear:lost-focus;theme:blue;"> </td> </tr> </table> <div class="buttons"> <input value="注 册" type="submit" style="margin-right: 20px; margin-top: 20px;"> <input value="我有账号，我要登录" type="button" style="margin-right: 45px; margin-top: 20px;"> </div> <br class="clear"> </form> </div> <script type="text/javascript"> $(document).ready(function () { $(‘#reg-form‘).easyform(); }); </script>
via：http://www.w2bc.com/Article/13972
一款基于jQuery的带Tooltip表单验证的注册表单
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。