jquery实现一个简单的表单验证实例


Posted in Javascript onMarch 30, 2016

表单验证在网站开发过程中经常遇到,我们可以使用服务器端语言验证,也可以使用客户端语言来验证。本文章向大家介绍jquery客户端验证表单的一个简单实例。实例仅作参考。

<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>
<script src="/Public/js/jquery-1.7.1.min.js"></script>
<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>

以上这篇jquery实现一个简单的表单验证实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
浅析Node在构建超媒体API中的作用
Jul 30 Javascript
js实现精确到毫秒的倒计时效果
Aug 05 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
Dec 14 Javascript
使用jQuery操作DOM的方法小结
Feb 27 Javascript
关于TypeScript中import JSON的正确姿势详解
Jul 25 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
May 31 Javascript
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 Javascript
一起写一个即插即用的Vue Loading插件实现
Oct 31 Javascript
vue 解决addRoutes多次添加路由重复的操作
Aug 04 Javascript
vue中可编辑树状表格的实现代码
Oct 31 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 Javascript
Vue如何实现变量表达式选择器
Feb 18 Vue.js
js实现密码强度检测【附示例】
Mar 30 #Javascript
原生javascript实现的一个简单动画效果
Mar 30 #Javascript
纯js代码制作的网页时钟特效【附实例】
Mar 30 #Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 #Javascript
详解JavaScript for循环中发送AJAX请求问题
Jun 23 #Javascript
Jquery判断form表单数据是否变化
Mar 30 #Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 #Javascript
You might like
PHP 高手之路(一)
2006/10/09 PHP
yii中widget的用法
2014/12/03 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
2011/11/30 Javascript
jquery 获取标签名(tagName)示例代码
2013/07/11 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
2014/03/26 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
2015/04/15 Javascript
javascript中一些util方法汇总
2015/06/10 Javascript
jQuery实现微信长按识别二维码功能
2016/08/26 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
JS实现移动端判断上拉和下滑功能
2017/08/07 Javascript
webpack热模块替换(HMR)/热更新的方法
2018/04/05 Javascript
vue中keep-alive的用法及问题描述
2018/05/15 Javascript
详解webpack4之splitchunksPlugin代码包分拆
2018/12/04 Javascript
layui-table表复选框勾选的所有行数据获取的例子
2019/09/13 Javascript
pymongo为mongodb数据库添加索引的方法
2015/05/11 Python
Python实现数通设备端口使用情况监控实例
2015/07/15 Python
Python实现的多进程拷贝文件并显示百分比功能示例
2019/04/09 Python
Python基础知识点 初识Python.md
2019/05/14 Python
Python shelve模块实现解析
2019/08/28 Python
Matplotlib使用Cursor实现UI定位的示例代码
2020/03/12 Python
如何向scrapy中的spider传递参数的几种方法
2020/11/18 Python
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
英国门销售网站:Green Tree Doors
2020/01/07 全球购物
Linux的主要特性
2014/10/06 面试题
《伯牙绝弦》教学反思
2014/03/02 职场文书
服务承诺书格式
2014/05/21 职场文书
财务管理专业求职信
2014/06/11 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
电台广播稿范文
2015/08/19 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书
原来闭幕词是这样写的呀!
2019/07/01 职场文书
李清照的诗词赏析(20首)
2019/08/22 职场文书
《西游记》读后感(3篇)
2019/09/20 职场文书
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers
MySQL数据库安装方法与图形化管理工具介绍
2022/05/30 MySQL