表单验证(失去焦点)

最新推荐文章于 2024-04-01 11:07:05 发布

Honey_fag

最新推荐文章于 2024-04-01 11:07:05 发布

阅读量2.5k

点赞数 1

本文链接：https://blog.csdn.net/Honey_fag/article/details/77936939

版权

这是一个HTML页面，实现了表单验证功能。当用户失去焦点时，会检查邮箱是否符合正则表达式、用户名长度是否在4到20个字符之间、密码长度是否在6到20个字符之间，以及两次输入的密码是否一致。通过jQuery进行事件监听和验证操作，错误提示会实时显示给用户。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="jquery-1.12.0.min.js"></script>
    <script>
        $(function () {

            // 全局变量用来接收判断二次密码
            var PASS = "";
            // 提交判断是否输入合法
            var k = 0;

            /*正则验证邮箱*/
            $(".email").blur(function () {
                // 接收输入的邮箱
                var $email = $(this).val();
                var ret = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
                // 进行判断
                if(ret.test($email)){
                    //alert("符合");
                    $("span[class = 'email_error']").show();
                    $("span[class = 'email_error2']").hide();
                    k++;
                }else{
                    //alert("不符合");
                    // 右边弹出错误提示及图片
                    $("span[class = 'email_error']").hide();
                    $("span[class = 'email_erro