第十六章表单验证

最新推荐文章于 2024-04-28 13:46:58 发布

百密一疏^^

最新推荐文章于 2024-04-28 13:46:58 发布

阅读量849

点赞数 2

分类专栏：前端学习文章标签：前端 javascript

本文链接：https://blog.csdn.net/m0_71674778/article/details/125391277

版权

前端学习专栏收录该内容

19 篇文章 1 订阅

订阅专栏

1.练习回顾

内容：

定义图书json数组。渲染生成表格。

并实现添加到购物车（使用模板字符串）

----------------------------------

图书数组

[

{"bookId":1001,"bookName":"西游记","author":"吴承恩","price":20}, {"bookId":1002,"bookName":"xxx","author":"xxx","price":30}

]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        图书购物车
    </title>
    <style>
        fieldset{
            width: 800px;
            margin: 0px auto;
        }
        table{
            margin: 20px auto;
            border: 1px solid black;
            border-collapse: collapse;
        }
        tr,td{
            border: 1px solid black;
            text-align: center;
        }
        input{
            text-align: center;
        }
    </style>
</head>
<body>
    <fieldset>
        <legend>图书信息</legend>
        <table>
            <thead>
                <tr>
                    <td>图书编号</td>
                    <td>书名</td>
                    <td>作者</td>
                    <td>价格</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody id="bookslist">

            </tbody>
        </table>
    </fieldset>
    <fieldset>
        <legend>购物车</legend>
        <table>
            <thead>
                <tr>
                    <td>
                        全选:<input type="checkbox" />
                    </td>
                    <td>图书编号</td>
                    <td>书名</td>
                    <td>作者</td>
                    <td>价格</td>
                    <td>数量</td>
                    <td>小计</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody id="shoppingcart">

            </tbody>
        </table>
    </fieldset>
    <script type="text/html" id="booksTemp">
        <td>{BH}</td>
        <td>{SM}</td>
        <td>{ZZ}</td>
        <td>{JG}</td>
        <td>
            <input type="button" value="添加" onclick="addbooks(this)" />
        </td>
    </script>
    <script type="text/html" id="addTemp">
        <td>
            <input type="checkbox" />
        </td>
        <td>{BH}</td>
        <td>{SM}</td>
        <td>{ZZ}</td>
        <td>{JG}</td>
        <td>
            <input type="button" value="+" />
            <input type="text" value="{SL}">
            <input type="button" value="-">
        </td>
        <td>{XJ}</td>
        <td>
            <input type="button" name="" id="" value="删除">
        </td>
    </script>
    <script>
        function addbookslist(){
            var books =[
                {"id":1001,"name":"西游记","autor":"吴承恩","price":35},
                {"id":1002,"name":"三国演义","autor":"罗贯中","price":45}
            ]
            for(var i=0;i<books.length;i++){
                var b = books[i];
                var tds= booksTemp.innerHTML.replace("{BH}",b.id)
                                               .replace("{SM}",b.name)
                                               .replace("{ZZ}",b.autor)
                                               .replace("{JG}",b.price);
                var trobj = document.createElement("tr");
                trobj.innerHTML=tds;
                bookslist.appendChild(trobj);                            
            }
            
        }
        addbookslist();
        function addbooks(thisbook){
            var thisbook = thisbook.parentElement.parentElement.children;
            //alert(shoppingcart.children.length);
            if(shoppingcart.children.length>0){
                for(var i=0;i<shoppingcart.children.length;i++){
                    //alert(thisbook[1].innerText);
                    if(thisbook[1].innerText==shoppingcart.children[i].children[2].innerText){
                        shoppingcart.children[i].children[5].children[1].value++;

                        shoppingcart.children[i].children[6].innerText=(shoppingcart.children[i].children[5].children[1].value)*Number(shoppingcart.children[i].children[4].innerText);
                        return ;
                    }
                }
            }

            var tds = addTemp.innerHTML.replace("{BH}",thisbook[0].innerText)
                                       .replace("{SM}",thisbook[1].innerText)
                                       .replace("{ZZ}",thisbook[2].innerText)
                                       .replace("{JG}",thisbook[3].innerText)
                                       .replace("{SL}",1)
                                       .replace("{XJ}",Number(thisbook[3].innerText)*1);
            var trobj =document.createElement("tr");
            trobj.innerHTML=tds;
            shoppingcart.appendChild(trobj);                           

        }
    </script>
</body>
</html>

2. 表单验证

2.1什么是表单验证

表单：搜集用户信息，并且将信息发送给指定的服务器程序处理，信息必须符合格式才能向后台提交。

没有JavaScript：此时数据的校验只能在后台服务器端完成，会造成资源，时间的浪费，降低服务器的效率。在js校验数据格式，如果符合格式，可以提交，否则不能提交。

有js：直接在客户端进行数据格式的校验，不需要经过后台，换句话说，只要数据能发送到后台，就说明这个数据一定是后台需要的数据。

表单验证的作用：验证数据的格式，将后台需要的数据格式发送到后台。

2.2 字符串的操作

length	获取字符串的长度
charAt(位置)	返回在指定位置的字符
concatenate()	链接两个或更多字符串，并返回新的字符串
indexOf(字符串)	从前向后查找，返回某个指定的子字符串值在字符串中首次出现的位置
includes()	查找字符串中石佛包含指定的子字符串。是返回true,否则返回false
lastIndexOf()	从后向前搜索字符串，并从起始位置(0)开始计算返回字符串最后出现的位置
replace()	用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串
slice()	提取字符串的片段，在新的字符串中返回被提取的部分
split()	把字符串分割为字符串数组
startsWith()	查看字符串是否以指定的子字符串开头
endsWith()	查看字符串是否以指定的子字符串结尾
substr(起始索引,提取的长度)	从起始索引号提取字符串中指定数目的字符
substring(开始,结束)	提取字符串中两个指定的索引号之间的字符
toLowerCase()	把字符串转换为小写
toUpperCase()	把字符串转换为大写
trim()	去除字符串两边的空白
其他类型.toString()	返回一个字符串

参考:JavaScript 字符串方法

2.3 练习-验证邮箱格式

验证邮箱:

①含有@和.

②@不能为第一位

③.不能是最后一位

④@和.不能挨着

⑤@在.后面

⑥@不能出现多次

<body>
    邮箱:
    <input type="text" name="email" id="email">
    <input type="button" name="" id="" value="验证邮箱" onclick="checkEmail()">
    <script>
        function checkEmail(){
            var atPos = email.value.indexOf("@");
		    var dotPos = email.value.indexOf(".");

            //1. 含有@和.   
            if(atPos==-1 || dotPos==-1){
                alert("没有@或.，邮箱不合法");
                return;
            }

            //2. @不能为第一位 
            if(atPos==0){
                alert("@是第一位，邮箱不合法");
                return;
            }
            //3. .不能是最后一位 
            if(dotPos==email.value.length-1){
                alert(".是最后一位,邮箱不合法");
                return;
            }
            //4. @和.不能挨着 , .在@后面
            if(atPos>dotPos || atPos==dotPos-1){
                alert("@不能在.之后，或者@不能挨着.");
                return;
            }
            //5. @不能出现多次
            var atPos2 = email.value.lastIndexOf("@");
            if(atPos!=atPos2){
                alert("@不能出现多次")
                return;
            }

            alert("邮箱正确!!!");
        }
    </script>
</body>

3. 表单验证使用

3.1 表单校验的两种方式

①通过type="submit" 结合表单onsubmit事件完成校验和提交;

②通过任意元素任意事件结合表单的submit()方法完成校验和提交。

3.2 表单校验实例

模拟信息注册页面

onsubmit: 表单提交事件 , 当点击了 type= "submit" 类型的按钮时 , 提交事件会被触发

如果要阻止 onsbumit 事件的继续触发，要为 onsubmit 返回一个 false

οnsubmit= "return false" : 不会向服务器提交数据

    <style>
        .err{
            color: red;
            font-size: 15px;
        }
        span{
            display: inline-block;
            margin-left: 50px;
            width: 40px;
            height: 25px;
            background-color: orange;
            color: white;
            text-align: center;
            line-height: 25px;
        }
        span:hover{
            background-color: red;
            color: black;
        }
    </style>
    <body>
    <!-- <form action="" method="get" onsubmit="return checkAll()"> -->
    <form action="" method="get" id="frm">
        <h3>用户注册</h3>
        <p>
            用户名(4-10个字符):<br/>
            <input type="text" name="username" id="username" onblur="checkName()"/>
            <div class="err"></div>
        </p>
        <p>
            密码(6-20个字符):<br/>
            <input type="password" name="password" id="password" onblur="checkPassword()"/>
            <div class="err"></div>
        </p>
        <p>
            手机(11位数字):<br/>
            <input type="text" name="phone" id="phone" onblur="checkPhone()"/>
            <div class="err"></div>
        </p>
        <!-- <p>
            <input type="submit" value="提交"/>
            <input type="reset" value="重置"/>
        </p> -->
    </form>
    <span onclick="checkAll()">提交</span>
    <script>
        var err = document.querySelectorAll(".err");
        function checkName(){
            if(username.value.length==0){
                err[0].innerText="用户名不能为空";
                return false;
            }else if(username.value.length<4||username.value.length>10){
                err[0].innerText="用户名长度不对";
                return false;
            }
            err[0].innerText="";
            return true;
        }
        function checkPassword(){
            if(password.value.length==0){
                err[1].innerText="密码不能为空";
                return false;
            }else if(password.value.length<6||password.value.length>20){
                err[1].innerText="密码长度不对";
                return false;
            }
            err[1].innerText="";
            return true;
        }
        function checkPhone(){
            if(phone.value.length==0){
                err[2].innerText="手机号不能为空";
                return false;
            }else if(phone.value.length!=11){
                err[2].innerText="手机号长度不是11位";
                return false;
            }else if(isNaN(Number(phone.value))){
                err[2].innerText="手机号不是纯数字";
                return false;
            }
            err[2].innerText="";
            return true;
        }
        function checkAll(){
            checkName();
            checkPassword();
            checkPhone();
            if(checkName()&&checkPassword()&&checkPhone()){
                frm.submit();
            };
        }
    </script>
</body>