JS--表单基本验证

卷不动的程序员

于 2024-07-03 14:11:34 发布

阅读量975

点赞数 14

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

本文链接：https://blog.csdn.net/qq_49018210/article/details/140150842

版权

javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、form表单

form表单中的标签
- input：text、password、radio、checkbox、file、date、button、submit、reset
- select-opitn、textarea、button(放在form里面，有提交功能；放在form外面，就是普通按钮)
表单提交时，以form表单为单位进行提交，提交给action对应的url
- name

二、为什么要进行表单验证

减轻服务器端压力，使用js进行验证，不经过服务器
保证输入的数据符合要求

三、表单验证的内容

表单元素是否为空
用户名和密码
邮箱、手机号、身份证号等
日期的验证(日期是否有效，是否合理)

四、表单验证的思路

当输入的表单数据不符合要求时，如何编写脚本进行提示？
- 获取表单元素值
- 使用js的一些方法对数据进行判断
- 当表单提交时，触发onsubmit事件，对获取的数据进行验证

五、string对象

js里的字符串可以使用双引号或单引号包含

//如果单引号是字符串的一部分，定义字符串可以使用双引号
//I'm ok!
let str = "I'm ok!";
document.write(str + "<br>");
//如果字符串中既包含单引号又包含双引号，这时需要使用功能转义字符
//I'm "ok"!
let str2 = "I'm \"ok\"!";
document.write(str2);

属性

length：获取字符串的长度

在js中，可以向获取数组元素一样，来获取字符串中的每个字符，下标从0开始

document.write(str2.length);
        alert(str2[2])
        alert(str2[4])
        alert(str2[6])
        alert(str2[11]) //undefined

方法

let str = "heLLoWorld";
//把字符串转化为大写
document.write(str.toUpperCase() + "<br>");
//把字符串转化为小写
document.write(str.toLowerCase() + "<br>");
//返回指定位置的字符(下标从0开始)
document.write(str.charAt(4) + "<br>") ;//o
//截取字符串
//substring(start, end)：从start位置截取到end位置，包含start，不包含end，[start,end)
document.write(str.substring(1, 6) + "<br>") ;//1eLLoW
//substr(start,length)：从start位置开始截取，截取length个字符
document.write(str.substr(1,6) + "<br>")//eLLoWo
//查找指定字符在字符串中首次出现的位置，如果没有找到，返回-1
document.write(str.indexOf("o") + "<br>");//4
document.write(str.indexOf("a") + "<br>");//-1
//查找指定字符在字符串中最后一次出现的位置，如果没有找到，返回-1
document.write(str.lastIndexOf("o") + "<br>");//6

六、文本框验证效果

练习：验证用户名和密码

用户名不能为空，且不能包含数字
密码不能为空，长度不能小于6位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本框验证效果</title>
    <style>
        #emailMsg {
            color: red;
            font-size: smaller;
        }
    </style>
</head>
<body>
<!--我们在提交form表单的时候，在提交之前会对form表单做一个验证，只有符合了要求的数据才能提交
    这个验证是通过from表单的属性onsubmit来验证的
    我们会给onsubmit一个返回值，如果返回值为true，那验证通过，数据会顺利提交
    如果返回值为false，那么验证不通过，数据不会提交-->
    <form action="test01.html" onsubmit="return checkForm()">
        <table align="center">
            <tr>
                <td>用户名</td><td><input type="text" name="uname" id="uname" onblur="checkName()"></td>
                <td></td>
            </tr>
            <tr>
                <td>密码：</td><td><input type="password" name="pwd" id="pwd"></td>
                <td></td>
            </tr>
            <tr>
                <td>邮箱：</td>
                <td><input type="text" name="email" id="email"></td>
                <td><span id="emailMsg"></span></td>
            </tr>

            <tr>
                <td colspan="2"><input type="submit" value="登录"><input type="reset"></td>
            </tr>
        </table>
    </form>

    <script>
        function checkForm() {
            //用户名不能为空，且不能包含数字
            let uname = document.getElementById("uname").value;
            if (uname == "") {
                alert("用户名不能为空");
                return false;
            } else {
                for (let i = 0; i < uname.length; i++) {
                    if (!isNaN(uname[i])) {
                        alert("用户名不能包含数字");
                        return false;
                    }
                }
            }
            //密码不能为空，长度不能小于6位
            let pwd = document.getElementById("pwd").value;
            if (pwd == "") {
                alert("密码不能为空");
                return false;
            }  else if (pwd.length < 6) {
                alert("密码长度不能小于6位");
                return false;
            }
            //验证邮箱，必须包含@和.
            let email = document.getElementById("email").value;
            let emailMsg = document.getElementById("emailMsg");
            if (email.indexOf("@") == -1 || email.indexOf(".") == -1) {
                emailMsg.innerText = "邮箱必须包含@和."
                //获得光标-重点
                document.getElementById("email").focus();
                //选中文本域的内容
                document.getElementById("email").select();
                return false;
            } else {
                emailMsg.innerText = "";
            }
        }
        //填写完标签的内容就给一个验证，也就是失去焦点时验证
        function checkName() {
            let uname = document.getElementById("uname").value;
            if (uname == "") {
                alert("用户名不能为空");
                return false;
            } else {
                for (let i = 0; i < uname.length; i++) {
                    if (!isNaN(uname[i])) {
                        alert("用户名不能包含数字");
                        return false;
                    }
                }
            }
        }
    </script>
</body>
</html>

form表单
- 事件：onsubmit
```
<form action="test01.html" οnsubmit="return checkForm()">
```
  - 当checkForm()返回值为true时，数据顺利提交
  - 当checkForm()的返回值为false时，数据不会提交
表单元素的常用方法
- focus()：获得鼠标光标
- blur()：失去鼠标光标
- select()：选中文本域的内容
常用事件
- body相关
  - onload：页面加载
  - onresize：改变大小
  - onscroll：滚动条滚动
- 鼠标相关
  - onclick：点击
  - ondbclick：双击
  - onmousedown：按下鼠标
  - onmouseup：松开鼠标
  - onmouseover：移上鼠标
  - onmouseout：移开鼠标
  - onmousemove：移动鼠标
- 键盘相关
  - onkeydown：按下键盘
  - onkeyup：松开/释放键盘
  - onkeypress：敲击键盘
- form表单相关
  - onsubmit：提交表单
  - onfocus：获得焦点
  - onblur：失去焦点
  - onchange：文本域内容发生改变，注意：按钮没有这个事件
表单元素的属性
- id：为元素提供唯一的标识或标记，能够唯一定位一个元素
- value：返回标签的value属性值