【注册页面表单校验--正则表达式--javascript】

css部分:

*{
    margin: 0;
    padding: 0;
}
body{
    background-image: url(../img/index.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
form{ 
    margin: 150px auto;
    width: 500px;
    height: 300px;
    background-color: rgb(255, 255, 255,.3);
    border: 2px solid black;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
form>div{
    margin:10px auto;
    font-size: 30px;
    height: 30px;
    line-height: 30px;
}
form>label{
    margin-left: 30px;
    display: flex;
}
form>label>input{
    width: 240px;
}
form>label>div{
    color: red;
}
form>button{
    margin:10px auto;
    text-align: center;
    font-size: 16px;
    height: 30px;
    width: 50px;
    line-height: 30px;
    background-color: transparent;
}

html部分:

    
    
    
    



    

        
注册页面
        
            用 户 名:
            

        
        
            密  码:
            

        
        
            确认密码:
            

        
        
            电  话:
            

        
        
            邮  箱:
            

        
        提交
    
    

javascript部分:

//跳转页面
var mysubmit=document.getElementById("submit")
mysubmit.onclick=function(evt){
    evt.preventDefault()
    console.log(checkAll())
    if(checkAll()==true){
    window.location.href="../html/index.html"
}else{
    alert("输入信息有误，请重新输入！")
    }   
}
//校验
function checkAll(){
//所有的方法都返回true，这个方法才返回true
    if(checkUsername() && checkPwd() && checkRepwd() && checkTel() && checkEmail()){
    return true
}
}

//检查用户名
function checkUsername(){
    var reg=/^[a-zA-Z]{4,12}$/
    var value = document.getElementById("username").value
    console.log(document.getElementById("username").value)
    // console.log(document.getElementsByName("username").value)
    if (reg.test(value)==false) {
        document.getElementById('showusername').innerHTML = "用户名不正确"
        return false
    }else {
        document.getElementById("showusername").innerHTML = ""
        return true
    }
}

//检查密码
 function checkPwd(){
    var reg=/^\w{6,20}$/
    var value = document.getElementById("pwd").value
    console.log(document.getElementById("pwd").value)
    if (reg.test(value)==false) {
        document.getElementById('showpwd').innerHTML = "密码不正确"
        return false
    }else {
        document.getElementById("showpwd").innerHTML = ""
        return true
    }
 }

 //检查确认密码
 function checkRepwd(){
    var value = document.getElementById("pwd").value
    var repwdvalue=document.getElementById("repwd").value
    if (repwdvalue!==value) {
        // console.log(checkPwd.value)
        document.getElementById('showrepwd').innerHTML = "两次密码不一样"
        return false
    }else {
        document.getElementById("showrepwd").innerHTML = ""
        return true
    }
 }
 //检查电话
 function checkTel(){
    var reg=/^1[34578]\d{9}$/
    var value = document.getElementById("tel").value
    if (reg.test(value)==false) {
        document.getElementById('showtel').innerHTML = "电话格式不正确"
        return false
    }else {
        document.getElementById("showtel").innerHTML = ""
        return true
    }
 }
  //检查邮箱
  function checkEmail(){
    var reg=/[a-zA-Z0-9]+([-_.][A-Za-zd]+)*@([a-zA-Z0-9]+[-.])+[A-Za-zd]{2,5}$/
    var value = document.getElementById("email").value
    if (reg.test(value)==false) {
        document.getElementById('showemail').innerHTML = "邮箱格式不正确"
        return false
    }else {
        document.getElementById("showemail").innerHTML = ""
        return true
    }
 }