Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch

提交和验证方法总结

提交和验证方法总结

1、使用submit按钮，结合onsubmit事件来实现(最常用)

<!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、submit按钮，结合onclick事件，实现表单的验证和提交

<!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、button按钮(普通按钮)，结合submit()方法，实现表单验证提交

<!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>


Weiter lernen
||
<!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>
einreichenCode zurücksetzen
Vorherige Sektion nächsten Abschnitt
Tutorial-Liste
Hilfe bekommen
  • Kursempfehlungen
  • Kursunterlagen herunterladen
Die Kursunterlagen stehen derzeit nicht zum Download zur Verfügung. Die Mitarbeiter organisieren es derzeit. Bitte schenken Sie diesem Kurs in Zukunft mehr Aufmerksamkeit

Auch Studierende, die diesen Kurs gesehen haben, lernen

Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)  492569 spielt ab