jq表单验证

最新推荐文章于 2023-07-21 01:01:56 发布
最新推荐文章于 2023-07-21 01:01:56 发布
阅读量1.2k 收藏 5
点赞数 1
分类专栏： jquery 文章标签： 表单验证
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39703839/article/details/84790539
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>表单验证</title>
    <style type="text/css">
    body {
        font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
        font-size: 14px;
    }
    /*表单尺寸*/
    form {
        width: 400px;
        margin: 50px auto;
    }
    /*表单模块距离*/
    .form_child {
        margin: 10px;
    }
    /*输入框*/
    input {
        width: 230px;
        padding: 5px;
    }
    /*按钮*/
    .formBtn {
        width: 100px;
        margin: 0 auto;
        margin-left: 35px;
    }
    /*输入框前文字文字*/
    label {
        margin-right: 5px;
    }
    /*按钮前标签*/
    .btnLabel {
        margin-right: 36px;
    }
    /*提示内容*/
    .hint {
        font-size: 12px;
        color: #999;
        margin-left: 10px;
        margin-top: 10px;
        height: 20px;
    }
    .hint p,
    span,
    em {
        display: none;
        margin: 0;
    }
    .hint em {
        font-style: normal;
    }
    </style>
</head>
<body>
    <form id="register_form" action="" method="get">
        <fieldset>
            <legend>用户注册表单</legend>
            <div class="form_child">
                <label for="username">用 &nbsp;户 &nbsp;名:</label><input id="username" class="input_bar" type="text" name="username" placeholder="用户名">
                <div class="hint">
                    <p>&#10033; <span>字母开头，长度5-16字节，允许字母数字下划线</span><em>格式不符合规范</em></p>
                </div>
            </div>
            <div class="form_child">
                <label for="pswd">密 &nbsp; &nbsp; &nbsp; 码:</label><input id="pswd" class="input_bar" type="password" name="pswd" placeholder="密码">
                <div class="hint">
                    <p>&#10033; <span>字母开头，长度6~18之间，允许字母、数字和下划线</span><em>格式不符合规范</em></p>
                </div>
            </div>
            <div class="form_child">
                <label for="repswd">确认密码:</label><input id="repswd" class="input_bar" type="password" name="pswd" placeholder="确认密码">
                <div class="hint">
                    <p>&#10033; <span>请再次输入密码</span> <em>密码不一致</em></p>
                </div>
            </div>
            <div class="form_child">
                <label for="mEmail">邮 &nbsp; &nbsp; &nbsp; 箱:</label><input id="mEmail" class="input_bar" type="email" name="mEmail" placeholder="邮箱">
                <div class="hint">
                    <p>&#10033; <span>验证完成后你可以使用该邮箱登录和找回密码</span><em>格式不符合规范</em></p>
                </div>
            </div>
            <div class="form_child">
                <label for="mTel">电 &nbsp; &nbsp; &nbsp; 话:</label><input id="mTel" class="input_bar" type="tel" name="mTel" placeholder="电话">
                <div class="hint">
                    <p>&#10033; <span>验证完成后你可以使用该手机登录和找回密码</span><em>格式不符合规范</em></p>
                </div>
            </div>
            <div class="form_child">
                <label class="btnLabel" for=""></label><input id="submit_btn" class="formBtn" type="submit"><input class="formBtn" type="reset">
            </div>
        </fieldset>
    </form>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        var username = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/; //用户名
        var pswd = /^[a-zA-Z]\w{5,17}$/; //密码
        var email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; //邮箱
        var tel = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|17[0,6,7,8]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
        var isExist; //检测输入是否合法，用来判断是否提交

        // 如果输入框为空阻止提交
        if ($('.input_bar', '#register_form').val() == '') {
            isExist = false;
        }

        // 输入框焦点事件
        $('#register_form').on({
            focus: function() {
                // 获取焦点           
                $(this).siblings('.hint').find('p').css('color', '#999');
                $(this).siblings('.hint').find('em').hide();
                $(this).siblings('.hint').find('p,span').show();
            },
            blur: function() {
                // 失去焦点，通过id判断
                switch ($(this).attr('id')) {
                    case 'username':
                        if (!username.test($(this).val())) {
                            isExist = false;
                        } else {
                            isExist = true;
                        }
                        break;
                    case 'pswd':
                        if (!pswd.test($(this).val())) {
                            isExist = false;
                        } else {
                            isExist = true;
                        }
                        break;
                    case 'repswd':
                        if ($('#repswd').val() != $('#pswd').val()) {
                            isExist = false;
                        } else {
                            isExist = true;
                        }
                        break;
                    case 'mEmail':
                        if (!email.test($(this).val())) {
                            isExist = false;
                        } else {
                            isExist = true;
                        }
                        break;
                    case 'mTel':
                        if (!tel.test($(this).val())) {
                            isExist = false;
                        } else {
                            isExist = true;
                        }
                        break;
                    default:
                        console.log(isExist);
                        break;
                }

                // 失去焦点如果是空或者正确的样式
                if ($(this).val() == '' || isExist == true) {
                    $(this).siblings('.hint').find('p').hide();
                } else if (isExist == false) {
                    $(this).siblings('.hint').find('p').css('color', '#ff0000');
                    $(this).siblings('.hint').find('span').hide();
                    $(this).siblings('.hint').find('p,em').show();
                }
            }
        }, '.input_bar');

        /*提交前判断*/
        $('#submit_btn').on('click', function() {
            if (isExist == false) {
                return false;
            }
        })
    });
    </script>
</body>
</html>
木_艮
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQ 表单验证
04-26
NULL 博文链接：https://onestopweb.iteye.com/blog/2365652
JQ表单验证控件
05-19
一个开源的JQ表单验证控件。绝对好用，我连续用了1年多了。很多项目都在使用。
JQ的表单验证
weixin_33957648的博客
01-07 126
(function () { $("#but").click(function () { if ($("#name").val() == "" || $("#name").val() == "请输入您的真实姓名") { alert("请输入患者姓名");
jQuery插件 -- 表单验证插件jquery.validate.js
热门推荐
Channing
07-05 9万+
最常使用JavaScript的场合就是表单的验证，而jQuery作为一个优秀的JavaScript库，也提供了一个优秀的表单验证插件----Validation。Validation是历史最悠久的jQuery插件之一，经过了全球范围内不同项目的验证，并得到了许多Web开发者的好评。作为一个标准的验证方法库，Validation拥有如下特点： 1.内置验证规则： 拥有必填、数字、Email、URL
jq的form验证
weixin_33785108的博客
08-22 75
jQuery(document).ready(function(){ $('#cform img.contact-loader').hide(); $('#cform').submit(function(){ //验证信息 if($('#name').val() == ""){ $...
jQuery之简单的表单验证
weixin_33975951的博客
09-17 118
html部分： &lt;body&gt; &lt;form method="post" action=""&gt; &lt;div class="int"&gt; &lt;label for="username"&gt;用户名:&lt;/label&gt; &lt;!-- 为每个需要的
JQ表单验证插件
11-13
"JQ表单验证插件"，特别是jValidate，就是这样一个实用工具，它为开发者提供了一套强大的、易于使用的表单验证解决方案。 **1. jQuery与jQuery插件** jQuery是一个轻量级的JavaScript库，它的目标是使JavaScript...
JQ 表单验证精简版
08-13
《JQ 表单验证精简版》 在网页开发中，表单验证是一项不可或缺的功能，它能够确保用户输入的数据符合预设的规则，从而提高数据的准确性和系统的安全性。JQuery（简称JQ）作为一款强大的JavaScript库，提供了丰富的...
jQuery验证
zhejingyuan的专栏
10-12 2283
jQuery验证
jQuery 表单验证插件——Validation(基础)
dong_pongkk999的专栏
04-08 852
jQuery 表单验证插件——Validation(基础)   (2011-04-23 15:10:21) 转载▼ 标签：  杂谈 分类： javascript  jQuery 表单验证插件——Validation Validation插件式历史悠久的jQuery插件之一,经过了全球各种项目的验证,得到了很多WEB开发
JQuery实现表单验证
11-04
JQuery实现表单验证，注册验证，提供了五种不同的提示方式，符合各种开发需求，修改方便。
自己写的jq表单验证（自带正则）
12-08
自己写的jq表单验证（自带正则） 内部只有一个函数 配置简单 内容有四种模式的内容匹配： ruser：用户名称匹配 数字字母下划线 rpass：6-12位任意字符 rnum：数字验证 rdata：数据验证让数据不包含特殊字符 可让中日韩三国文字通过。
超简单的jq表单验证
02-28
超简单的jq表单验证超简单的jq表单验证超简单的jq表单验证
jq表单
u014582551的博客
03-14 96
jq 操作radio，设置选中、获取选中值 2012年12月29日 TAG: jq操作radio &lt;label&gt;&lt;input type="radio" name="sex" value="1"&gt;男&lt;/label&gt; &lt;label&gt;&lt;input type="radio" name="sex&quot
JQ验证表单
小猪奋斗
05-27 687
一、引入jq 二、示例代码jQuery(document).ready(function(){ $('#cform img.contact-loader').hide(); $('#cform').submit(function(){ //验证信息 if($('#name').val() == ""){ $("#name").pa
jq form表单验证
weixin_30273175的博客
11-28 124
<form action="" class="idxform1" onsubmit="return formyz('j_name','j_phone','j_em','j_content','j_code')"> <div class="ipt1 "><span>姓名</span><input type="text" class=...
jQ 表单验证插件
chen_enson的博客
01-21 287
/*** * 表单验证插件 * @author chenshuofeng * * use: * example 1 * ------- * HTML: * &amp;lt;div id=&quot;checkInput&quot;&amp;gt; * &amp;lt;input id=&quot;phone&quot; type=&quot;tel&quot;&amp;gt; *
JQuery-表单验证
最新发布
CSDN_WJW的博客
07-21 777
（2）文本输入提示特效 在输入框后面添加span标签用于提示输入内容是否合法。（2）元素控件的validity属性，获取到 validityState对象。（1）通过value属性值提示。（2）为什么需要正则表达式。（4）表达式匹配的模式。（8）正则表达式符号。
php jq 提交表单验证,jquery的表单验证提交
05-24
可以使用 jQuery Validation 插件来实现表单验证和提交功能。 首先，在 HTML 中引入 jQuery 和 jQuery Validation 插件的库文件： ```html <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值