表单验证详解-优快云博客

本文链接：https://blog.youkuaiyun.com/a530609250/article/details/87185949

本文深入探讨了表单验证的重要性，包括减轻服务器压力、确保数据合规等。覆盖常见验证类型如日期、邮箱、身份证号，介绍表单选择器、属性过滤器及正则表达式应用，演示如何使用HTML5新增验证属性提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单校验
为什么要表单验证？
1.减轻服务器的压力
2.保证输入的数据符合要求

常用的表单验证：
日期格式
表单元素是否为空
用户名和密码
E-mail地址
身份证号码

表单选择器：
:input 匹配所有input、textarea、select和button 元素
:text 匹配所有单行文本框
:password 匹配所有密码框
:radio 匹配所有单项按钮
:checkbox 匹配所有复选框
:submit 匹配所有提交按钮
:image 匹配所有图像域
:reset 匹配所有重置按钮
:button 匹配所有按钮
:file 匹配所有文件域
:hidden 匹配所有不可见元素，或者type 为hidden的元素

属性过滤选择器：
:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配所有被选中元素（复选框、单项按钮、select 中的option）
:selected 匹配所有选中的option 元素

使用String 对象验证邮箱
不能为空，格式正确
文本框内容的验证
密码不能为空，不少于6个字符，姓名不能为空，不能有数字

非空验证
if (mail == “”) {
alert(“Email不能为空”);
return false;
}

字符串查找：indexOf()：查找某个指定的字符串值在字符串中首次出现的位置
长度验证：if(pwd.length<6){
alert(“密码必须等于或大于6个字符”);
return false;
}
判断字符串是否有数字：使用for循环和substring()方法依次截断单个字符，再判断每个字符是否是数字

表单验证需要综合运用元素的事件和方法
事件：
onblur 失去焦点，当光标离开某个文本框时触发
onfocus 获得焦点，当光标进入某个文本框时触发

方法：
blur() 从文本域中移开焦点
focus() 在文本域中设置焦点，即获得鼠标光标
select() 选取文本域中的内容，突出显示输入区域的内容

正则表达式
为什么需要正则表达式
简洁的代码
严谨的验证文本框中的内容

普通方式：var reg=/表达式/附加参数

构造函数：var reg=new RegExp(“表达式”,“附加参数”)

简单模式：只能表示具体的匹配
复合模式：可以使用通配符表达更为抽象的规则模式

RegExp对象的方法：
exec 检索字符中是正则表达式的区配，返回找到的值，并确定其位置
test 检索字符串中指定的值，返回true或false
RegExp对象的属性：
global RegExp对象是否具有标志g
ignoreCase RegExp对象是否具有标志i
multiline RegExp对象是否具有标志m

String对象的方法：
match 找到一个或多个正则表达式的匹配
search 检索与正则表达式相匹配的值
replace 替换与正则表达式匹配的字符串
split 把字符串分割为字符串数组

HTML5新增验证属性
placeholder 提供一种提示（hint），输入域为空时显示，获得焦点输入内容后消失
required 规定输入域不能为空
pattern 规定验证input域的模式（正则表达式）

validityState对象
stepMismatch 输入的值不符合step特性所推算出的规则。用于填写数值的表单元素可能需要同时设置min、max和step特性，这就限制了输入的值必须是最小值与step特性值的倍数之和。例如范围从0到10，step特性值为2，因为合法值为该范围内的偶数，其他数值均无法通过验证。如果输入值不符合要求，则stepMismatch属性返回true，否则返回false

customError 使用自定义的验证错误提示信息。使用setCustomValidity( )方法自定义错误提示信息：setCustomValidity(message)会把错误提示信息自定义为message，此时customError属性值为true；setCustomValidity("")会清除自定义的错误信息，此时customError属性值为false。

相关代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        form td{
            text-align: right;
        }

    </style>
</head>
<body>
<center>
    <h3>注册</h3>
    <form action="" method="post">
    <table>
        <tr>
            <td>您的Email：<input type="text" /><span id="emailInfo"></span></td>
        </tr>
        <tr>
            <td>您的密码：<input type="password"/></td>
        </tr>
        <tr>
            <td>再输入一遍密码：<input type="password"/><span id="aaa"></span></td>
        </tr>
        <tr>
            <td>您的姓名：<input type="text"/></td>
        </tr>
        <tr>
            <td>性别：<input type="radio" name="sex"/>男<input type="radio" name="sex"/>女</td>
        </tr>
        <tr>
            <td>出生日期：
                <select>
                    <option>1111</option>
                    <option>2222</option>
                    <option>3333</option>
                    <option>4444</option>
                </select>年
                <select>
                    <option>1111</option>
                    <option>2222</option>
                    <option>3333</option>
                    <option>4444</option>
                </select>月
                <select>
                    <option>1111</option>
                    <option>2222</option>
                    <option>3333</option>
                    <option>4444</option>
                </select>日
            </td>
        </tr>
        <tr>
            <td>爱好：<input type="checkbox"/>运动<input type="checkbox"/>游戏<input type="checkbox"/>编程</td>
        </tr>
        <tr>
            <td>您的头像：<input type="file"/></td>
        </tr>
        <tr>
            <td style="text-align: center" colspan="2">
                <a href="#">关于我们</a>
                <a href="#">诚聘英才</a>
                <a href="#">联系方式</a>
                <a href="#">帮助中心</a>
                <a href="#">您的意见</a>
            </td>
        </tr>

    </table>
    <tr>
        <td><input type="submit" value="提交"/><input type="reset" value="重置"/></td>
    </tr>
    </form>


</center>

</body>
</html>

<script src="js/jquery-1.12.4.js"></script>
<script>
    $(function () {
        var obj = $("form :input").eq(0);
        $(obj).blur(function () {
            var val = $(this).val();
            var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
            if(!reg.test(val)){//sdasdasd@163.com
                $(this).val("");
                $("#emailInfo").html("&nbsp;&nbsp;&nbsp;邮箱格式不对!").css("color","red");
            }else{
                $("#emailInfo").html("")
            }
        })
        var mima=$("form :password").eq(1);
        var mima2=$("form :password").eq(0);
        $(mima).blur(function () {
        if (mima!=mima2){
                $(this).val("");
                $("#aaa").html("&nbsp;&nbsp;&nbsp;11111!").css("color","red");
            }
            else {
                $("#aaa").html("")
        }
        })



    })


</script>