js 进行表单验证细节显示各种功能详细解说每一步

最新推荐文章于 2022-08-04 09:59:48 发布

掌舵的船手

最新推荐文章于 2022-08-04 09:59:48 发布

阅读量217

点赞数

分类专栏：基础类文章标签： html js javascript css

本文链接：https://blog.csdn.net/liuhebahuang/article/details/107901079

版权

基础类专栏收录该内容

10 篇文章 0 订阅

订阅专栏

表单验证

表单是网站获取用户信息的主要途径，用户输入或选择的就是数据，将来存储到数据库中。
表单的作用是什莫？表单验证是JS很重要的功能，防止逻辑上错误的数据提交给服务器，减少和服务器的通信次数，降低服务器的
负担
原则：能在浏览器中通过JS进行验证就不提交给服务器进行验证。

<!DOCTYPE html>
<html>
    <head>
        <meta charser="utf-8">
        <title>js的表单验证</title>
        <style type="text/css">
            span{
                color: red;
                font-size: 8px;
              }
        </style>
        <script type="text/javascript">
                window.onload=function(){
                        function $(_id){
                            return document.getElementById(_id);
                        }
                        var form1=$("form1");
                        var userName=$("userName");
                        var userNameTips=$("userNameTips");
                        var pwd1=$("pwd1");
                        var pwd1Tips=$("pwd1Tips");
                        var pwd2=$("pwd2");
                        var pwd2Tips=$("pwd2Tips");
                        var sexsTips=$("sexsTips");
                        var city=$("city");
                        var cityTips=$("cityTips");

                        var sexs=document.getElementsByName("sex");
                        //解决表单内容什么也不写直接点级确定按钮表单直接跳转问题
                        form1.onsubmit=function(event){
                        //当用户名为空阻止页面跳转     event阻止跳转
                            if(userName.value==""){
                                 userNameTips.innerText="用户名为空";
                                 event.preventDefault();
                            }
                            //没写密码报错
                            if(pwd1.value==""){
                                 pwd1Tips.innerText="密码为空";
                                 event.preventDefault();
                            }
                            //没写确认密码报错
                            if(pwd2.value==""){
                                 pwd2Tips.innerText="确认密码还未输入";
                                 event.preventDefault();
                            }
                            //没选择性别报错
                            if(!(sexs[0].checked || sexs[1].checked)){
                                 sexsTips.innerText="请选择性别";
                                 event.preventDefault();
                            }
                            if(city.options[0].selected){
                                 cityTips.innerText="请选择所在的城市";
                                 event.preventDefault();
                            }
                         }
                       //给userName设置焦点
                       userName.onfocus=function(){
                             userNameTips.innerText="";
                       }
                       //给pwd1设置焦点并且在点击pwd1获取焦点时清空pwd2里面的错误提示
                       pwd1.onfocus=function(){
                             pwd1Tips.innerText="";
                             pwd2Tips.innerText="";
                       }
                       //选择性别后清空报错提示 并赋值改变事件     性别两个写在一起如果看着不顺眼那麽可以分开写
                       sexs[0].onchange=sexs[1].onchange=function(){
                             sexsTips.innerText="";
                       }
                       //选择城市后  清空报错提示并赋值改变事件
                       city.onchange=function(){
                             cityTips.innerText="";
                       }
                       //用户名不足六个字符报错  并设置改变事件 length代表字符段的长度
                       userName.onchange=function(){
                             if(userName.value.length<6){
                                    userNameTips.innerText="用户名不能少于6个字符";
                                    
                             }
                       }
                      //两次密码不相等报错  重新获取焦点
                      pwd2.onchange=function(){
                            if(pwd2.value!=pwd1.value){
                                 pwd2Tips.innerText="两次密码不相等";
                                 pwd1.value="";
                                 pwd1.value="";
                                 }
                       } 
                    }
        </script>
    </head>
    <body>
    <form action="http://www.tmall.com" id="form1" method="get">
        <label for="userName">输入用户名：</label>
        <input type="text" name="" id="userName" value=""><br/> 
        <span id="userNameTips"></span><br/>
        <label for="pwd1">输入密码：</label>
        <input type="password" name="" id="pwd1" value=""><br/> 
        <span id="pwd1Tips"></span><br/>
        <label for="pwd2">确认密码：</label>
        <input type="password" name="" id="pwd2" value=""><br/>
        <span id="pwd2Tips"></span><br/>
        <input type="radio" name="sex" id="" value="nan">男
        <input type="radio" name="sex" id="" value="nv">女
        <span id="sexsTips"></span><br/>
        <select id="city">
              <option value="" selected>请选择城市</options>
              <option value="hz">杭州</option>
              <option value="sh">上海</option>
              <option value="bj">北京</option>
              <option value="sz">深圳</option>
        </select> 
        <span id="cityTips"></span><br/>
        <input type="submit" name="" id="sb1" value="确定">

        

    </form>
    </body>
</html>

掌舵的船手

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 进行表单验证细节显示各种功能详细解说每一步

表单验证表单是网站获取用户信息的主要途径，用户输入或选择的就是数据，将来存储到数据库中。表单的作用是什莫？表单验证是JS很重要的功能，防止逻辑上错误的数据提交给服务器，减少和服务器的通信次数，降低服务器的负担原则：能在浏览器中通过JS进行验证就不提交给服务器进行验证。<!DOCTYPE html><html> <head> <meta charser="utf-8"> <title>js的表单
复制链接

扫一扫