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 相关文章推荐
js function使用心得
May 10 Javascript
javascript中节点的最近的相关节点访问方法
Mar 20 Javascript
实现动画效果核心方式的js代码
Sep 27 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
Jul 02 Javascript
Javascript基础教程之数据类型转换
Jan 18 Javascript
JavaScript DOM 学习总结(五)
Nov 24 Javascript
聊一聊Vue.js过渡效果
Sep 07 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
Feb 19 Javascript
vue中SPA单页面应用程序详解
Nov 07 Javascript
浅谈React深度编程之受控组件与非受控组件
Dec 26 Javascript
小试SVG之新手小白入门教程
Jan 08 Javascript
微信小程序实现顶部导航特效
Jan 28 Javascript
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
ninety plus是什么?ninety plus咖啡好吗?
2021/03/04 新手入门
php动态生成JavaScript代码
2009/03/09 PHP
PHP XML备份Mysql数据库
2009/05/27 PHP
WordPress中创建用户角色的相关PHP函数使用详解
2015/12/25 PHP
PHP实现QQ快速登录的方法
2016/09/28 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
2010/03/02 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
javascript常用函数归纳整理
2014/10/31 Javascript
$.extend 的一个小问题
2015/06/18 Javascript
livereload工具实现前端可视化开发【推荐】
2016/12/23 Javascript
webpack 单独打包指定JS文件的方法
2018/02/22 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
Vue核心概念Action的总结
2019/01/18 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
2019/05/28 Javascript
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
javascript中可能用得到的全部的排序算法
2020/03/05 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
2020/12/23 Javascript
Python 通过pip安装Django详细介绍
2017/04/28 Python
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
2017/07/06 Python
Python 文本文件内容批量抽取实例
2018/12/10 Python
Python二叉搜索树与双向链表转换算法示例
2019/03/02 Python
Python3监控windows,linux系统的CPU、硬盘、内存使用率和各个端口的开启情况详细代码实例
2020/03/18 Python
OpenCV实现机器人对物体进行移动跟随的方法实例
2020/11/09 Python
基于css3仿造window7的开始菜单
2010/06/17 HTML / CSS
HTML5操作WebSQL数据库的实例代码
2017/08/26 HTML / CSS
印度尼西亚综合购物网站:Lazada印尼
2016/09/07 全球购物
波兰家居和花园家具专家:4Home
2019/05/26 全球购物
幼儿教师自我鉴定
2013/11/02 职场文书
住宅使用说明书
2014/05/09 职场文书
五好关工委申报材料
2014/05/31 职场文书
环卫工人先进事迹材料
2014/06/02 职场文书
2014年质量管理工作总结
2014/12/01 职场文书
2015年秋季运动会前导词
2015/07/20 职场文书