本章节分享一段代码实例,它实现了简单的表单验证小姑。
在文本框或者密码框的尾部会有提示文本的出现。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>犀牛前端部落</title> <style> body { position: absolute; top: 25%; left: 33%; } table { color: #666; } table tr { height: 50px; } .state1 { color: #aaa; } .state2 { color: #00b0ff; } .state3 { color: #EB4F38; } .state4 { color: #00B694; } input[type="submit"] { width: 80px; height: 30px; font-weight: bold; border-radius: 15px; background-color: #3CbAB7; color: #fff; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(function () { var username = false; var password = false; var repassword = false; var email = false; //username $('input[name="username"]').focus(function () { $(this).parent() .siblings() .find('span') .text('用户名应该在6-20位之间!') .removeClass('state1 state4 state3').addClass('state2'); }).blur(function () { var len = $(this).val().length; if (len >= 6 && len <= 20 && $(this).val() != '') { $(this).parent() .siblings() .find('span') .text('用户名输入正确!') .removeClass('state1 state4 state3').addClass('state4'); username = true; } else { $(this).parent() .siblings() .find('span') .text('用户名输入错误,应在6-20位之间!') .removeClass('state1 state2 state4') .addClass('state3'); } }) //password $('input[name="password"]').focus(function () { $(this).parent() .siblings() .find('span') .text('密码6-20位字符,字母开头,只包含字母数字下划线!') .removeClass() .addClass('state2'); }).blur(function () { var reg = /^[a-z | A-Z]\w{5,19}$/; if (reg.test($(this).val())) { $(this).parent() .siblings() .find('span') .text('密码输入正确!') .removeClass() .addClass('state4'); password = true; } else { $(this).parent() .siblings() .find('span') .text('密码输入错误,请重新输入!') .removeClass() .addClass('state3'); } }) //repassword $('input[name="repassword"]').focus(function () { $(this).parent() .siblings() .find('span') .text('请输入确认密码!') .removeClass() .addClass('state2'); }).blur(function () { var reg = /^[a-z | A-Z]\w{5,19}$/; if (reg.test($(this).val()) && $(this).val() == $('input[name="password"]').val()) { $(this).parent() .siblings() .find('span') .text('确认密码输入正确!') .removeClass() .addClass('state4'); repassword = true; } else { $(this).parent() .siblings() .find('span') .text('两次输入不一致!') .removeClass() .addClass('state3'); } }) //email $('input[name="email"]').focus(function () { $(this).parent() .siblings() .find('span') .text('请输入正确的EMAIL格式!') .removeClass() .addClass('state2'); }).blur(function () { var reg = /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/; if (reg.test($(this).val())) { $(this).parent() .siblings() .find('span') .text('邮箱输入正确!') .removeClass() .addClass('state4'); email = true; } else { $(this).parent() .siblings() .find('span') .text('邮箱输入错误,请输入重新输入!') .removeClass() .addClass('state3'); } }) //提交 $('input[type="submit"]').click(function () { if (username && password && repassword && email) { $('form').submit(); } else { return alert('您未填写齐全,或填写格式错误!'); } }); }) </script> </head> <body> <form> <table> <tr> <td>用 户 名:</td> <td><input type="text" name="username" /></td> <td><span class="state1">请输入用户名</span></td> </tr> <tr> <td>密 码:</td> <td><input type="password" name="password" /></td> <td><span class="state1">请输入密码</span></td> </tr> <tr> <td>确认密码:</td> <td><input type="password" name="repassword" /></td> <td><span class="state1">请输入确认密码</span></td> </tr> <tr> <td>邮 箱:</td> <td><input type="email" name="email" /></td> <td><span class="state1">请输入邮箱</span></td> </tr> <tr> <td></td> <td><input type="submit" value="提 交" /></td> <td></td> </tr> </table> </form> </body> </html>
jQuery注册表单验证代码实例,这样的场景在实际项目中还是用的比较多的,关于jQuery注册表单验证代码实例就介绍到这了。
jQuery注册表单验证代码实例属于前端实例代码,有关更多实例代码大家可以查看。
本文地址: http://www.zzsi.net/code/web/98657.html
本站部分资源来源与网络,仅供学习参考使用,请勿商用,如侵犯了您的权益,请联系我们删除。
上一篇: js CSS3实现卡牌旋转切换效果
下一篇: JavaScript无操作后屏保功能的实现方法