jQuery之简单的表单验证实例


Posted in Javascript onJuly 07, 2016

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>

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

Javascript 相关文章推荐
js 编程笔记 无名函数
Jun 28 Javascript
angular.element方法汇总
Jan 07 Javascript
javascript实现简单查找与替换的方法
Jul 22 Javascript
原生JS实现图片轮播与淡入效果的简单实例
Aug 21 Javascript
jQuery版AJAX简易封装代码
Sep 14 Javascript
详解如何使用Vue2做服务端渲染
Mar 29 Javascript
微信小程序progress组件使用详解
Jan 31 Javascript
原生javascript AJAX 三级联动的实现代码
May 04 Javascript
React styled-components设置组件属性的方法
Aug 07 Javascript
Vue路由模块化配置的完整步骤
Aug 14 Javascript
Vue组件跨层级获取组件操作
Jul 27 Javascript
vue-cli —— 如何局部修改Element样式
Oct 22 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
Jul 07 #Javascript
Bootstrap3使用typeahead插件实现自动补全功能
Jul 07 #Javascript
Node.js DES加密的简单实现
Jul 07 #Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
Jul 07 #Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
Jul 07 #Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 #Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
Jul 07 #Javascript
You might like
php字符串函数学习之strstr()
2015/03/27 PHP
浅谈使用PHP开发微信支付的流程
2015/10/04 PHP
php实现可运算的验证码
2015/11/10 PHP
PHP静态延迟绑定和普通静态效率的对比
2017/10/20 PHP
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
JavaScript中的property和attribute介绍
2011/12/26 Javascript
JavaScript调用后台的三种方法实例
2013/10/17 Javascript
js创建一个input数组并绑定click事件的方法
2014/06/12 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
2015/03/18 Javascript
11种ASP连接数据库的方法
2015/09/18 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
2015/11/17 Javascript
javascript实现拖放效果
2015/12/16 Javascript
Javascript6中字符串的四个新用法分享
2016/09/11 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
2016/10/17 Javascript
JS出现失效的情况总结
2017/01/20 Javascript
关于Stream和Buffer的相互转换详解
2017/07/26 Javascript
vue2实现可复用的轮播图carousel组件详解
2017/11/27 Javascript
vue 弹框产生的滚动穿透问题的解决
2018/09/21 Javascript
深入理解Puppeteer的入门教程和实践
2019/03/05 Javascript
redux.js详解及基本使用
2019/05/24 Javascript
django实现分页的方法
2015/05/26 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
python实现微信打飞机游戏
2020/03/24 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
详解HTML5新增标签
2017/11/27 HTML / CSS
大学毕业感言
2014/01/10 职场文书
大学生咖啡店创业计划书
2014/01/21 职场文书
小学生评语集锦
2014/04/18 职场文书
设计师求职信
2014/07/01 职场文书
微信早安问候语
2015/11/10 职场文书
导游词之藏龙百瀑景区
2019/12/30 职场文书
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL