js--表单验证

js- -表单验证

form表单提交后，对发送给服务器的数据验证合法性有两种方式

通过前端js进行验证
通过表单提交后，jsp对不合法的数据重定向。

今天我们来了解一下第一种方式的表单验证
先来看一下代码

html源代码

<div class="div3">
<div class="div3_1">
    <form action="test1.html" method="post" enctype="multipart/form-data" onsubmit="return checksubmit()">
        <label class="label1" for="username">Username:</label></br>
        <input class="input1" type="text" name="username" id="username" placeholder="Pick a username"><span id="USERNAME" class="error"><b>用户名错误</b></span></br>
        <label class="label1" for="id">Id:</label></br>
        <input class="input1" type="text" name="id" id="id" placeholder="Your name"><span id="ID" class="error"><b>用户ID错误</b></span></br>
        <label class="label1" for="password">Password</label></br>
        <input class="input1" type="password" name="password" id="password" placeholder="input your password"><span id="PASSWORD" class="error"><b>密码错误</b></span></br>
        <p class="p1">Use at least one letter, one numeral, and seven characters.</p>
        <button id="button1" value="Sign up for Github"><span style="color:white">Sign up for GitHub</span></button>
        <p class="p1">By clicking “Sign up for GitHub”, you agree to our <a style="color:blue;">terms of service </a>and <a>privacy statement</a>. We’ll occasionally send you account related emails.</p>
    </form>
</div>
</div>

css源代码

.div3{
    position: relative;
    margin-left:30px;
    height:500px;
    width:500px;
    float:left;
}
.div3_1{
    padding:10px 10px 10px 10px;
    background-color: aliceblue;
    position: relative;
    height:420px;
    margin-left:50px;
    margin-right:30px;
    margin-top:70px;
    border:1px solid green;
}

js源代码

function checksubmit(){
    flag=true;
    var username=document.getElementById("username");
    var id=document.getElementById("id");
    var password=document.getElementById("password");
    alert(username.value);
    if(username.value != "lyc"){
        USERNAME.style.visibility="visible";
        flag=false;
    }
    if(id.value!=1){
        ID.style.visibility="visible";
        flag=false;
    }
    if(password.value!=970916){
        PASSWORD.style.visibility="visible";
        flag=false;
    }
    return flag;
}

看一下表单验证效果

在这里插入图片描述

表单验证的重点是js中的onsubmit函数。只有当返回值为true时，表单才会通过验证。
逻辑写在onsubmit函数中来实现验证。

猜你喜欢