最常用的jQuery表单验证(简单)


Posted in jQuery onMay 23, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<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表单验证(简单),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery实现的背景颜色渐变动画效果示例
Mar 24 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
jQuery代码优化方法总结
Jan 29 jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
jquery实现点击弹出对话框
Feb 08 jQuery
jquery实现简单实用的轮播器
May 23 #jQuery
jquery实现图片轮播器
May 23 #jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 #jQuery
jQuery滑动到底部加载下一页数据的实例代码
May 22 #jQuery
jQuery表单验证之密码确认
May 22 #jQuery
JQuery 封装 Ajax 常用方法(推荐)
May 21 #jQuery
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 #jQuery
You might like
PHP身份证校验码计算方法
2016/08/10 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
yii框架redis结合php实现秒杀效果(实例代码)
2017/10/26 PHP
php生成复杂验证码(倾斜,正弦干扰线,黏贴,旋转)
2018/03/12 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
JQuery中根据属性或属性值获得元素(6种情况获取方法)
2013/01/17 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
2013/11/25 Javascript
使用mini-define实现前端代码的模块化管理
2014/12/25 Javascript
kindeditor修复会替换script内容的问题
2015/04/03 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
详解Vue 非父子组件通信方法(非Vuex)
2017/05/24 Javascript
Bootstrap模态框插入视频的实现代码
2017/06/25 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
2017/08/23 Javascript
angular1配合gulp和bower的使用教程
2018/01/19 Javascript
用p5.js制作烟花特效的示例代码
2018/03/21 Javascript
JavaScript获取时区实现过程解析
2020/09/24 Javascript
[51:53]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第二场 1月24日
2021/03/11 DOTA
python常用web框架简单性能测试结果分享(包含django、flask、bottle、tornado)
2014/08/25 Python
Python实现批量修改文件名实例
2015/07/08 Python
python实现windows下文件备份脚本
2018/05/27 Python
对Python中数组的几种使用方法总结
2018/06/28 Python
python使用tornado实现登录和登出
2018/07/28 Python
Python神奇的内置函数locals的实例讲解
2019/02/22 Python
Matplotlib使用Cursor实现UI定位的示例代码
2020/03/12 Python
python 实现两个npy档案合并
2020/07/01 Python
详解python算法常用技巧与内置库
2020/10/17 Python
python 基于selectors库实现文件上传与下载
2020/12/31 Python
俄罗斯儿童和青少年服装、鞋子及配件的在线商店:Orby
2020/02/20 全球购物
WEB控件及HTML服务端控件能否调用客户端方法?如果能,请解释如何调用?
2015/08/25 面试题
关于人生的感言
2014/01/17 职场文书
国企干部对照检查材料
2014/08/22 职场文书
公务员党员评议表自我鉴定
2014/09/14 职场文书
2014年学校团委工作总结
2014/12/20 职场文书
前端JavaScript大管家 package.json
2021/11/02 Javascript