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 相关文章推荐
利用JQuery和Servlet实现跨域提交请求示例分享
Feb 12 Javascript
JavaScript获取flash对象与网上的有所不同
Apr 21 Javascript
绑定回车enter事件代码
May 18 Javascript
js实现拖拽效果(构造函数)
Dec 14 Javascript
AngularJS实践之使用NgModelController进行数据绑定
Oct 08 Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 Javascript
微信小程序 scroll-view实现锚点滑动的示例
Dec 06 Javascript
Vue表单及表单绑定方法
Sep 04 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
May 03 Javascript
vue2.0 实现富文本编辑器功能
May 26 Javascript
微信小程序使用npm包的方法步骤
Aug 13 Javascript
Node.js API详解之 console模块用法详解
May 12 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中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
解析wamp5下虚拟机配置文档
2013/06/27 PHP
php 类自动载入的方法
2015/06/03 PHP
PHP屏蔽关键字实现方法
2016/11/17 PHP
浅谈PHP的反射API
2017/02/26 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
js技巧--转义符&quot;\&quot;的妙用
2007/01/09 Javascript
jQuery的.live()和.die() 使用介绍
2011/09/10 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
2014/08/10 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
2015/11/07 Javascript
js实现动态创建的元素绑定事件
2016/07/19 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
2016/09/27 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
2017/01/20 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
详解webpack自定义loader初探
2018/08/29 Javascript
PHP读取远程txt文档到数组并实现遍历
2020/08/25 Javascript
解决removeEventListener 无法清除监听的问题
2020/10/30 Javascript
tornado捕获和处理404错误的方法
2014/02/26 Python
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
修复CentOS7升级Python到3.6版本后yum不能正确使用的解决方法
2018/01/26 Python
深入分析python数据挖掘 Json结构分析
2018/04/21 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
Python如何在DataFrame增加数值
2020/02/14 Python
python图形开发GUI库wxpython使用方法详解
2020/02/14 Python
Keras搭建自编码器操作
2020/07/03 Python
Python3交互式shell ipython3安装及使用详解
2020/07/11 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
英国定做窗帘和纺织品面料一站式商店:Dekoria
2018/08/29 全球购物
《第一次抱母亲》教学反思
2014/04/16 职场文书
读书活动总结
2014/04/28 职场文书
购房个人委托书范本
2014/10/11 职场文书
总经理司机岗位职责
2015/04/10 职场文书