注册中的验证用户名密码

往事随风 2019年07月07日 214次浏览

WEB前端之注册验证

请先引入jQuery食用

全部源代码请点击这里源码

准备

$(function(){ //页面加载完成后
    var username //用户名
    var password //密码
    var namespan  = $('#namespan') //显示错误提示信息的span标签
    var pwdspan   = $('#pwdspan')  
    // ...略若干行 此处定义注册表单的其他错误提示信息标签

    register.on('click', function(event){
       event.preventDefault() //阻止默认行为
       var register = false //默认是注册失败
       username = $('#username').val() //得到username文本框中的内容
       password = $('#password').val()
       //...略若干行 此处得到注册表单的其他输入值

       register = checkUsername() //调用验证用户名的方法
       register = checkPassword() //调用验证密码的方法
       //...略若干行 此处验证注册的其他表单
       
       if(register){
            alert('恭喜你,注册成功。快去登录吧!')
            window.location.href = 'login.html'
        }

       //验证方法写这里
    })
})

验证用户名

用户名需为大于6个字符的字母数字组合

function checkUsername(){
        var regUsername = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/
        // console.log(username)
        if(username.length == 0){
            namespan.text('用户名不能为空') //报错信息的span
            return false   //返回验证失败
        }else if(!regUsername.test(username)){
            namespan.text('用户名必须是数字和字母的组合,长度不小于六个字符')
            return false
        }else{
            namespan.text('')
            return true
        }
    }

验证密码

密码需大于8个字符

function checkPassword(){
        var regPwd = /^\w{8,}$/
        //console.log(password)
        if(password.length == 0){
            pwdspan.text('密码不能为空')
            return false
        }else if(!regPwd.test(password)){
            pwdspan.text('密码必须不少于8个字符')
            return false
        }else{
            pwdspan.text('')
            return true
        }
    }