这次给大家带来用正则表达式验证登录页面的输入内容，用正则表达式验证登录页面输入内容的注意事项有哪些，下面就是实战案例，一起来看一下。
先给大家展示下效果图：
废话不多说了，直接给大家贴代码了，具体代码如下所示：
$(function() { $("input[name='uname']").blur(function() { //失去焦点 var namestr = $(this).val(); var regstr = /^[u4e00-u9fa5]{2,4}$/; if(!regstr.test(namestr)) { $(this).parent().next().html("用户名必须是2-4个汉字").css("color", "red"); return false; } return true; }); $("input[name = 'uname']").focus(function() { //获取焦点 $(this).val(""); $(this).parent().next().html(""); }); $("input[name='pwd']").blur(function() { var pwdstr = $(this).val(); var regstr = /^w{6}$/; if(!regstr.test(pwdstr)) { $(this).parent().next().html("密码必须是6位数字字母下划线").css("color", "red"); return false; } return true; }); $("input[name='pwd']").focus(function() { $(this).parent().next().html(""); }); $("input[name='birthday']").blur(function() { var birthdaystr = $(this).val(); var regstr = /^(19|20)d{2}-(1[0-2]|0?[1-9])-(3[0-1]|2[0-9]|0?[1-9])$/; if(!regstr.test(birthdaystr)) { $(this).parent().next().html("日期格式不正确").css("color", "red"); return false; } return true; }); $("input[name='birthday']").focus(function() { $(this).parent().next().html(""); }); $("input[name='email']").blur(function(){ var emailstr = $(this).val(); var regstr = /^[w-]+@[a-z0-9A-Z]+(.[a-zA-Z]{2,3}){1,2}$/; if(!regstr.test(emailstr)){ $(this).parent().next().html("邮箱格式不正确").css("color","red"); return false; } return true; }); $("input[name='email']").focus(function(){ $(this).parent().next().html(""); }); }); body { font-size: 12px; } #home { background-color: beige; border: solid 1px black; width: 550px; height: 185px; margin: auto; margin-top: 20px; } #head { height: 135px; } #foot { text-align: center; } .dl1 { clear: both; padding-left: 10px; } .dl1 dt { float: left; height: 30px; width: 80px; line-height: 30px; } .dl1 dd { float: left; height: 30px; line-height: 30px; /*width: 250px;*/ } #btn_res { background-image: url(img/reset.gif); width: 80px; height: 34px; } #btn_sub { background-image: url(img/submit.gif); width: 80px; height: 34px; }
- 用户名 :
- 用户密码 :
- 出生日期 :
- yyyy-mm-dd
- 用户邮箱 :
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
实现日期正则表达式详解
JS正则的使用及基本语法
以上就是用正则表达式验证登录页面的输入内容的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2778130.html
