Résumé des méth...LOGIN

Résumé des méthodes de soumission et de vérification

Résumé des méthodes de soumission et de vérification


1. Utilisation Le bouton de soumission est implémenté en conjonction avec l'événement onsubmit (le plus couramment utilisé)

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>php.cn</title>
<script type="text/javascript">
function checkForm()
{
    //判断用户名是否为空
    if(document.form1.username.value=="")
    {
        window.alert("用户名不能为空!");
        return false;
    }else
    {
        window.alert("验证通过!");
        return true;
    }
}
</script>
</head>
<body>
<form name="form1" method="post" action="login.php" onsubmit="return checkForm()">
用户名:<input type="text" name="username" />
密码:<input type="password" name="userpwd" />
<input type="submit" value="提交表单" />
</form>
</body>
</html>



2. bouton de soumission, combiné à l'événement onclick, pour réaliser la vérification et la soumission du formulaire

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>php.cn</title>
<script type="text/javascript">
function checkForm()
{
    //判断用户名是否为空
    if(document.form1.username.value=="")
    {
        window.alert("用户名不能为空!");
    }else
    {
        window.alert("验证通过!");
    }
}
</script>
</head>
<body>
<form name="form1" method="post" action="login.php">
用户名:<input type="text" name="username" />
密码:<input type="password" name="userpwd" />
<input type="submit" value="提交表单" onclick="checkForm()" />
</form>
</body>
</html>



3. bouton bouton (bouton ordinaire), combiné à la méthode submit(), pour implémenter la soumission de vérification du formulaire

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>php.cn</title>
<script type="text/javascript">
function checkForm()
{
    if(document.form1.username.value.length == 0)
    {
        //如果用户名为空
        window.alert("用户名不能为空!");
    }else if(document.form1.username.value.length<5 || document.form1.username.value.length>20)
    {
        //如果用户名长度小于5或大于20
        window.alert("用户名只能介于5-20个字符!");
    }else if(checkOtherChar(document.form1.username.value))
    {
        //如果用户名含有特殊符号
        window.alert("用户名中含有特殊符号!");
    }else
    {
        //如果验证通过,提交表单
        window.alert("验证通过!");
        //表单提交方法
        document.form1.submit();
    }
}
function checkOtherChar(str)
{
    //定义一个特殊符号的数组
    var arr = ["*","&","<",">","$","\","/"];
    //循环比较:数组中的每一个字符,与用户名每一个字符进行比对
    for(var i=0;i<arr.length;i++)
    {
        for(var j=0;j<str.length;j++)
        {
            if(arr[i]==str.charAt(j))
            {
                return true;
            }
        }
    }
    //如果没找到
    return false;
}
</script>
</head>
<body>
<form name="form1" method="post" action="login.php">
用户名:<input type="text" name="username" />
密码:<input type="password" name="userpwd" />
<input type="button" value="提交按钮" onclick="checkForm()" />
</form>
</body>
</html>


section suivante
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>php.cn</title> <script type="text/javascript"> function checkForm() { //判断用户名是否为空 if(document.form1.username.value=="") { window.alert("用户名不能为空!"); return false; }else { window.alert("验证通过!"); return true; } } </script> </head> <body> <form name="form1" method="post" action="login.php" onsubmit="return checkForm()"> 用户名:<input type="text" name="username" /> 密码:<input type="password" name="userpwd" /> <input type="submit" value="提交表单" /> </form> </body> </html>
soumettreRéinitialiser le code
chapitredidacticiel