今天要用JavaScript正则做一个表单验证
1、首先是HTML结构
<form action="#">账号：<input type="text" name="user"><span></span><br />密码：<input type="text" name="pass"><span></span><br />邮箱：<input type="text" name="email"><span></span><br /><button>注册</button></form>
//后面的span标签用来显示内容，显示账号正确与否。
2、CSS样式 - 其实也只是给span设置一点点样式即可
<style>span {color: red}</style>
3、最重要的JS代码
①首先需要先获取我们所要操作的元素对象
//获取操作对象var frm = document.querySelector('form')var inps = document.querySelectorAll('input')var spans = document.querySelectorAll('span')
②将账号、密码、邮箱分为3个部分书写
账号功能实现
var q1 = false //账号是否验证成功inps[0].onblur = function () {//获取当前输入框的value值var s1 = this.valuevar reg = /^([0-9]|[a-zA-Z]|[\u4e00-\u9fa5]){2,10}$///判断输入字符串是否符合规则if (reg.test(s1)) {//给输入框的后面提示spans[0].innerHTML = "√"//账号验证成功q1 = true} else {spans[0].innerHTML = "账号输入有误"q1 = false}}
思路：【1】先设置一个布尔值q1用来判断账号是否输入正确，用来验证最后的表格提交
【2】给第一个输入框设置点击事件
【3】s1变量接收输入框的内容
【4】书写正则 ★
账号长度一般为2-10，且内容可以是数字，大小写字母，中文，搭配（）和 | 使用；【】和 - 使用
所以账号（用户）正则为：reg=/^（【0-9】|【a-zA-Z】|【\u4e00-\u9fa5】{2，10}）$/
【5】用正则去验证输入的字符串是否符合规则
验证成功的话：在这账号后面的span标签内添加内容 “ √ ”，表示验证成功
q1=true 表示账号验证成功【作用于后面的表格提交】
验证失败的话：在这账号后面的span标签内添加内容 “ 账号输入错误”，表示验证失败
空着的话也算验证失败哦
q1=false 表示账号验证成功【作用于后面的表格提交】
密码功能的实现
var k1 = falseinps[1].onblur = function () {var s1 = this.valuevar reg = /^\w{6,16}$///判断该字符串是否符合正则表达式if (reg.test(s1)) {var a = 0 //数字var b = 0 //小写var c = 0 //大写var d = 0 //下划线//判断当前字符串中是否存在数字if (s1.search(/\d/) != -1) {a = 1}if (s1.search(/[a-z]/) != -1) {b = 1}if (s1.search(/[A-Z]/) != -1) {c = 1}if (s1.search(/_/) != -1) {d = 1}//判断出现了几种字符类型if (a + b + c + d == 1) {spans[1].innerHTML = '密码强度弱，请修改密码'} else if (a + b + c + d == 2) {spans[1].innerHTML = '密码强度中'} else if (a + b + c + d > 2) {spans[1].innerHTML = '强'}//密码验证成功k1 = true} else {spans[1].innerHTML = "密码输入有误"//密码验证失败k1 = false}}
密码部分其实是三部分中最多复杂的部分，其实思路与上方的用户差不多
思路：【1】先设置一个布尔值K1【验证后面的表格提交】
【2】s1获取输入框的内容
【3】密码为数字，字母，下划线 都行 ，所以正则比较简单 ，长度为6-16位
正则：reg = /^\w{6,16}$/
【4】正则验证密码是否成功
用a,b,c,d表示分别记录数字，小写字母，大写字母，下划线 是否出现
【5】查询一下当前字符串是否有数字，大写字母，小写字母，下划线，有的话为1，没有 则还是为0
【6】a+b+c+d的值用来判断密码的强弱（1种类型为弱，2种类型为种，大于2为强）
将这些内容写进密码后面的span内容中
k1=true
验证失败的话：span内容写上“密码输入有误”
k1=false
邮箱验证
var e1=false inps[2].onblur = function () {var s1 = this.valuevar reg = /^[1-9a-zA-Z_]\w{5,9}@(qq|163)\.(com|cn)$///验证if (reg.test(s1)) {spans[2].innerHTML = "√"e1 = true} else {spans[2].innerHTML = '邮箱格式有误'e1 = false}}
邮箱思路与上面差不多，记得布尔值
最后的表单验证
//给表单绑定提交事件frm.onsubmit=function(){if(q1 && k1 && e1){return true}else{return false }}
如果前三项都为true的时候才能提交，如果其中一项为false的话，则提交不了
效果：
