jQuery之简单的表单验证

2023-10-26

点击打开链接

html部分:

<body>

<form method="post" action="">
    <div class="int">
        <label for="username">用户名:</label>
        <!-- 为每个需要的元素添加required -->
        <input type="text" id="username" class="required" />
    </div>
    <div class="int">
        <label for="email">邮箱:</label>
        <input type="text" id="email" class="required" />
    </div>
    <div class="int">
        <label for="personinfo">个人资料:</label>
        <input type="text" id="personinfo" />
    </div>
    <div class="sub">
        <input type="submit" value="提交" id="send"/><input type="reset" id="res"/>
    </div>
</form>

</body>

jQuery部分:

<script type="text/javascript">
//<![CDATA[
$(function(){
        /*
        *思路大概是先为每一个required添加必填的标记,用each()方法来实现。
        *在each()方法中先是创建一个元素。然后通过append()方法将创建的元素加入到父元素后面。
        *这里面的this用的很精髓,每一次的this都对应着相应的input元素,然后获取相应的父元素。
        *然后为input元素添加失去焦点事件。然后进行用户名、邮件的验证。
        *这里用了一个判断is(),如果是用户名,做相应的处理,如果是邮件做相应的验证。
        *在jQuery框架中,也可以适当的穿插一写原汁原味的javascript代码。比如验证用户名中就有this.value,和this.value.length。对内容进行判断。
        *然后进行的是邮件的验证,貌似用到了正则表达式。
        *然后为input元素添加keyup事件与focus事件。就是在keyup时也要做一下验证,调用blur事件就行了。用triggerHandler()触发器,触发相应的事件。
        *最后提交表单时做统一验证
        *做好整体与细节的处理
        */
        //如果是必填的,则加红星标识.
        $("form :input.required").each(function(){
            var $required = $("<strong class='high'> *</strong>"); //创建元素
            $(this).parent().append($required); //然后将它追加到文档中
        });
         //文本框失去焦点后
        $('form :input').blur(function(){
             var $parent = $(this).parent();
             $parent.find(".formtips").remove();
             //验证用户名
             if( $(this).is('#username') ){
                    if( this.value=="" || this.value.length < 6 ){
                        var errorMsg = '请输入至少6位的用户名.';
                        $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
                    }else{
                        var okMsg = '输入正确.';
                        $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
                    }
             }
             //验证邮件
             if( $(this).is('#email') ){
                if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){
                      var errorMsg = '请输入正确的E-Mail地址.';
                      $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
                }else{
                      var okMsg = '输入正确.';
                      $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
                }
             }
        }).keyup(function(){
           $(this).triggerHandler("blur");
        }).focus(function(){
             $(this).triggerHandler("blur");
        });//end blur

        
        //提交,最终验证。
         $('#send').click(function(){
                $("form :input.required").trigger('blur');
                var numError = $('form .onError').length;
                if(numError){
                    return false;
                } 
                alert("注册成功,密码已发到你的邮箱,请查收.");
         });

        //重置
         $('#res').click(function(){
                $(".formtips").remove(); 
         });
})
//]]>
</script>

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery之简单的表单验证 的相关文章

随机推荐

  • STS & 开发异常

    1 Failed to start component 情景 本地 tomcat 部署了两个项目 一个provider 一个 server 前台通过server访问 provider 在开发的时候 将tomcat部署的服务 Clean 或者
  • Android-模块化-项目实践和探索分享

    文章目录 前言 一 gradle统一配置 1 多模块项目的构建 2 根项目的构建配置 3 常用公用的构建配置 二 nexus与maven publish 1 安装nexus 2 仓库 3 maven publish 三 动态依赖 1 依赖的
  • 在IDEA中使用Maven将项目打包成jar包

    1 在pom xml文件中添加代码
  • [Python图像处理] 二十九.MoviePy视频编辑库实现抖音短视频剪切合并操作

    该系列文章是讲解Python OpenCV图像处理知识 前期主要讲解图像入门 OpenCV基础用法 中期讲解图像处理的各种算法 包括图像锐化算子 图像增强技术 图像分割等 后期结合深度学习研究图像识别 图像分类应用 希望文章对您有所帮助 如
  • 【质量】代码质量评价标准

    今天来思考下如何评价代码质量 业界公认比较认可的七大标准 可维护性 maintainability 可读性 readability 可扩展性 extensibility 灵活性 flexibility 简洁性 simplicity 可复用性
  • ReentrantReadWriteLock

    一ReentrantReadWriteLock 是Lock的另一种实现方式 我们知道ReentrantLock是一个排他锁 同一时间只允许一个线程访问 而ReentrantReadWriteLock允许多个读线程同时访问 但不允许写线程和读
  • RuntimeError: Address already in use

    Pytorch用多张GPU训练时 会报地址已被占用的错误 其实是端口号冲突了 因此解决方法要么kill原来的进程 要么修改端口号 在代码里重新配置 torch distributed init process group dist init
  • ajax异步加载jqgrid之动态创建

    2019独角兽企业重金招聘Python工程师标准 gt gt gt 之前写过一篇过于ajax异步加载jqgrid的文章 那个只是一个特殊的情况 如果创建不同数据库表的jqgrid 必须分别写servlet dao层和连接池 很麻烦 今天我写
  • Hive insert overwrite 问题

    微信公众号 苏言论 理论联系实际 畅言技术与生活 文章目录 1 测试的版本 2 insert overwrite使用说明 3 示例 4 建议的操作 5 参考链接 1 测试的版本 Apache hive 1 1 0 2 3 1 3 1 0 2
  • vue3 全局批量注册组件

    思路 1 使用 require 提供的函数 context 加载某一个目录下的所有 vue 后缀的文件 2 context 函数会返回一个导入函数 importFn 3 它有一个方法 keys 获取所有的文件路径 4 通过文件路径数组 通过
  • Ubuntu20.04 + 3090 安装nvidia驱动,附加解决重启黑屏卡在 /dev/***: clean, **files,***blocks的问题

    目录 准备 禁用nouveau 解决黑屏问题并安装驱动 参考 准备 首先需要知道当前电脑 服务器的显卡型号 这个自行查找自己电脑配置 查找显卡对应的驱动版本 通过命令ubuntu drivers devices查看当前设备所支持的驱动 带有
  • Android 监控SD卡的插拔状态

    http blog csdn net pasterzhang article details 8151877 我们是以DV6300 T的平台来做测试的 发现有2种方式来检测Android中external media 包括SD卡 USB 的
  • Spring Cloud Feign nested exception is java.lang.IllegalStateException

    Spring Cloud Feign 使用时抛出异常 nested exception is java lang IllegalStateException RequestParam value was empty on parameter
  • 数据结构——广度优先遍历(队列)

    队列的基本操作 include
  • 单片机C语言零基础入门05 - 逻辑运算

    硬件家园单片机C语言零基础入门资料汇总链接 https mp weixin qq com s hMTreNUX V90461tvALjJA 一 逻辑与或非 基础理论 逻辑与或非 运算对象是布尔值 1或0 真或假 类似于数字电路的与门 或门
  • Qt 快速读写Excel指南

    Qt Windows 下快速读写Excel指南 很多人搜如何读写excel都会看到用QAxObject来进行操作 很多人试了之后都会发现一个问题 就是慢 非常缓慢 因此很多人得出结论是QAxObject读写excel方法不可取 效率低 后来
  • c#——简易的客车售票系统

    制作一个简单的客车售票系统 假设客车的座位数是9行4列 使用一个二维数组记录客车售票系统中的所有座位号 并在每个座位号上都显示 有票 然后用户输入一个坐标位置 按回车键 即可将该座位号显示为 已售 程序运行结果如下所示 using Syst
  • Redis的安装与Linux下查看服务安装情况

    Redis的安装 移步到大神博客https www cnblogs com hunanzp p 12304622 html Linux下服务的安装情况 移步到大神博客 https www cnblogs com zyh0430 p 1187
  • SpringMVC ssm 接收 List对象

    ssm接收参数不能为接口类型 因此可以使用ArrayList对象接受前端传来的list对象 RequestMapping list public PageVO
  • jQuery之简单的表单验证

    点击打开链接 html部分