JS源代码实现表单验证

今天要用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.value
            var 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 = false
    inps[1].onblur = function () {
            var s1 = this.value
            var 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.value
            var 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的话，则提交不了

效果：