正则表单联系

第一步，布局

再练习之前，我上网查了一些网站的登陆注册页面，一般都是可以兼容手机端和pc端，所以我使用了bootstarp进行布局，正好也再次练习一下bootstarp的使用。
bootstarp中文网地址分享给大家
http://www.bootcss.com/

话不多说，直接上图：

第二步，书写表单验证js

首先，我们需要练习正则表达式

邮箱大家都知道，但是如何用正则来表示邮箱的格式呢？

我们大家都知道，邮箱必须有一个@符号，然后还有一个.,最后跟着一个域名，所以我们需要这样书写：

var emlReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/

然后需要书写名称以及密码

var nameReg = ^[\u4e00-\u9fa5]{2,}$

弱密码是6个以上的数字字母不包括汉字：

var pwReg1 = /^[0-9a-zA-Z]{6,}$/

强密码(必须包含大小写字母和数字的组合，不能使用特殊字符和汉字，长度在6个以上)：

var pwReg2 = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}$/

然后我们就需要书写js

var falg1 = falg2 = falg3 = false;function sd(x,y,z){if(x.attr("id")=="btn3"){x.siblings(".sps").text("弱");if(reg5.test(x.val())){x.siblings(".sps").text("强");}} } function ab (x,y,z){if(y.test(x.val())){x.parent().removeClass("has-error")x.parent().addClass("has-success")sd(x,y,z)return true; }else{x.parent().addClass("has-error")x.parent().removeClass("has-success")alert(z)return false;} } $("#btn1").blur(function(){var text = "邮箱格式错误"falg1=ab($(this),emlReg,text) }) $("#btn2").blur(function(){var text = "用户名格式错误，请输入至少2个汉字"falg2=ab($(this),nameReg,text) }) $("#btn3").blur(function(){var text = "密码格式错误，请输入至少6个英文或数字"falg3=ab($(this),pwReg1,text) })$("#zhuce").click(function(){$("#btn1").blur()$("#btn2").blur()$("#btn3").blur()if(falg1&&falg2&&falg3){alert("填写成功，正在提交，请稍后……")} })

这样，一个简单的表单验证练习就完成了，喜欢的点个赞呗！

总结

以上是生活随笔为你收集整理的简简单单的正则表单验证练习的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。