2022年7月19日——JavaScript表单校验-CFANZ编程社区

2022年7月19日——JavaScript表单校验

描述：表单校验的实现，在提交表单之前，实现对数据的验证，判断空等。还可以进行正则校验判断等。

效果展示：

2022年7月19日——JavaScript表单校验_正则

2022年7月19日——JavaScript表单校验_form表单_02

2022年7月19日——JavaScript表单校验_form表单_03

三个状态的判断，当没有进行任何操作的时候，在输入框中没有显示任何的效果，当点击提交的时候，将进行数据的校验，如果不符合条件，将进行反馈原因，如果满足条件，同样给出反馈结果。

代码展示：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>表单校验1</title>
    </head>
    <body>
        <br/>
        <h1>好好学习，天天向上</h1>
        <form name="form" action="https://www.baidu.com/" onsubmit="return formtest()" >
            用户名：<input type="text" name="username"/><span id="username_span"></span>
            <br/>
            <input type="submit" value="提交" />
        </form>
        <script>
            function formtest(){
                var testData = document.forms["form"]["username"].value;
                var us = document.getElementById("username_span");
                if(testData == null || testData == ""){
                    us.innerHTML = "用户名不能为空，请输入内容";
                    us.style.color="red";
                    return false;
                }else{
                    us.innerHTML = "校验成功";
                    us.style.color="green";
                    alert("校验成功，即将进行页面跳转");
                    return true;
                }
            }
        </script>
    </body>
</html>

正则校验：

如果需要，正则表达式的使用，可详见，正则校验。

0 条评论