JavaScript案例--表单验证 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 

    <form id="reg-form" action="#" method="get">


<table>
<tr>
    <td>用户名</td>
    <td class="inputs">
        <input name = "username" type="text" id="username">
        <br>
        <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
    </td>
</tr>

<tr>
    <td>密码</td>
    <td class="inputs">
        <input name = "password" type="password" id="password">
        <br>
        <span id="password_err" class="err_msg" style="display: none">密码格式错误</span>
    </td>
</tr>

<tr>
    <td>手机号</td>
    <td class="inputs">
        <input name = "tele" type="text" id="tele">
        <br>
        <span id="tele_err" class="err_msg" style="display: none">请输入正确格式的手机号</span>
    </td>
</tr>

<tr>
    <td class="inputs">
        <input name = "tele" type="submit" id="reg-form" value="提交">
        <br>
        <!-- <span id="tele_err" class="err_msg" style="display: none">请输入正确格式的手机号</span> -->
    </td>
</tr>

</table>
</form>



<script>

/*

输入框验证


*/




//1.1 获取用户名的输入框
var usernameInput = document.getElementById("username");
//1.2 绑定onblur事件，失去焦点
usernameInput.onblur= usernameflag;
    //1.3 获取用户输入
    function usernameflag(){
    //去除空格
    var username = usernameInput.value.trim();
    //1.4判断是否合规
    var flag = username.length >= 6 && username.length<=12 ;
    if(flag){
        document.getElementById("username_err").style.display = "none";
    }
    else{
        document.getElementById("username_err").style.display = "";
    }
    return flag;
}

//1.验证密码是否合规
//1.1 获取密码的输入框
var passwordInput = document.getElementById("password");
//1.2 绑定onblur事件，失去焦点
passwordInput.onblur = passwordflag;
//1.3 获取用户输入
function passwordflag(){
//先去除所有空格
var password = passwordInput.value.trim();
//1.4 判断是否合规
var flag = password.length>=6&&password.length<=12
if(flag){
    document.getElementById("password_err").style.display = "none";
}
else{
    document.getElementById("password_err").style.display = "";
}
return flag;
}
//1.验证密码是否合规
//1.1 获取密码的输入框
var teleInput = document.getElementById("tele");
//1.2 绑定onblur事件，失去焦点
teleInput.onblur = teleflag;
//1.3 获取用户输入
//先去除所有空格
function teleflag(){
var tele = teleInput.value.trim();
var flag = tele.length==11
//1.4 判断是否合规
if(flag){
    document.getElementById("tele_err").style.display = "none";
}
else{
    document.getElementById("tele_err").style.display = "";
}
return flag;

}


/*

表单验证


*/
//1、获取表单
var regForm = document.getElementById("reg-form");


//2、绑定onsumit事件
regForm.onsubmit = function(){

    //判断每个表单项是否符合要求
    var flag = passwordflag() && usernameflag() && teleflag();
    return flag;

}





</script>
<style>
    span{
        color:red;
    }
</style>

</body>
</html>

 

posted on 2023-11-12 13:21  na2co3-  阅读(18)  评论(0)    收藏  举报