Summary of submission and verification methods

Summary of submission and verification methods

1. Use submit button, combined with onsubmit event to implement (most commonly used)

<!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 button , combined with the onclick event, to achieve form verification and submission

<!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 button ( Ordinary button), combined with the submit() method to implement form verification submission

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

Continuing Learning

new file

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

submit Reset Code

Automatic operation

Summary of submission and verification methods

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]