正则表单联系

第一步，布局

再练习之前，我上网查了一些网站的登陆注册页面，一般都是可以兼容手机端和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("填写成功，正在提交，请稍后……")}
})

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

简简单单的正则表单验证练习相关推荐

字符表单验证与正则表单验证
1.字符表单验证 html部分 js部分 /*事件驱动函数 click blur--失去焦点*/var oUsername = document.getElementById("userna ...
JavaScript---网络编程(12)--DHTML技术演示(5)-form表单验证技术(正则)
这里不进行很复杂的后台验证以及JavaScript的正则表达式,只是简单的介绍下这个技术,简单的后台接收与跳转,大概了解怎么验证的就可以.具体的技术,我后面还会继续写博客的.本人也还在学习中. 表单验 ...
【VUE+Elemet 】最全正则验证 + 表单验证 + 注意事项
目录一.正则验证 1.输入字母/数字/下划线: 2.请输入中英文/数字/下划线: 3.请输入中文/英文: 4.规范金额: 5.用户名不能全是数字: 6.中文: 7.非中文: 8.限制长度: 9.数字 ...
vue 表单验证正则_vue表单验证
首先需要自己写正则表达式,正则学得不好就不乱指点了=> 方法 1如果你是单独建的js文件先引入正则表达式文件才进行下一步或者直接在组件内写正则 2data({ const regExpID ...
vue密码正则验证表单验证_如何在Vue中使用表单验证
vue密码正则验证表单验证介绍 (Introduction) Almost every web application makes use of forms in some way, as such ...
vue 表单验证正则_vue elementui form表单验证的实现
最近我们公司将前端框架由easyui 改为 vue+elementui .自学vue两周就开始了爬坑之路.业余时间给大家分享一下心得,技术新手加上第一次分享(小激动),有什么不足的地方欢迎大家指正, ...
float js 正则验证_使用HTML和Vuejs进行表单验证
他们说大多数网络应用只是HTML表单.好吧,表单需要验证,谢天谢地,HTML5带有许多优秀的内置表单验证功能,可用于电子邮件,数字,最大值,分钟等.您甚至可以使用模式编写自己的验证规则.在本文中,我将 ...
JS(DOM对象表单验证与正则表达)
目录 DOM对象表单验证 DOM对象 <!DOCTYPE html> <html><head><meta charset="utf-8" ...
JavaScript 笔记(2) -- 类型转换正则表达变量提升表单验证
目录: typeof, null, undefined, valueOf() 类型转换正则表达式错误: try, catch, throw 调试工具变量提升 strict 严格模式使用误区 ...

简简单单的正则表单验证练习