制作简单的用户登录界面

用户登录界面

手机号:

密码:

<script>
    // /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/ 判断手机号是否正确
    // /^[A-Za-z0-9]{6,10}$/ 判断密码是否正确
    
    var phone_is_ok = false;
    var password_is_ok = false;
    
    // 手机号的验证
    function phone_foucs(obj){
        document.getElementById("phone_msg").innerHTML = "请输入11位手机号";
    }
    function phone_blur(obj){
        var phone_val = obj.value;
        if(/(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/.test(phone_val)){
            document.getElementById("phone_msg").innerHTML = "号码正确";
            document.getElementById("phone_msg").style.color = "green";
            phone_is_ok = true;
        }else{
            document.getElementById("phone_msg").innerHTML = "号码错误,请重新输入!"
            document.getElementById("phone_msg").style.color = "red";
            phone_is_ok = false;
        }
    }

    // 密码的验证
    function password_foucs(obj){
        document.getElementById("password_msg").innerHTML = "请输入6~10位含字母数字密码";
    }
    function password_blur(obj){
        var password_val = obj.value;
        if(/^[A-Za-z0-9]{6,10}$/.test(password_val)){
            document.getElementById("password_msg").innerHTML = "密码正确";
            document.getElementById("password_msg").style.color = "green";
            password_is_ok = true;
        }else{
            document.getElementById("password_msg").innerHTML = "密码错误,请重新输入";
            document.getElementById("password_msg").style.color = "red";
            password_is_ok = false;
        }
    }

    // 判断手机号和密码是否正确
    function checkForm(){
        if(!phone_is_ok || !password_is_ok){
            return false;
        }
        return true;
    }
   
</script>