基于jQuery验证输入框简单实用

所属分类:输入-验证

 4302  19  查看评论 (7)
基于jQuery验证输入框简单实用 ie兼容8

使用方法

引入jq,在jq之后进行验证,页面一打开就执行代码!

验证form表单内的所有input是否为空

$('.tijiao').cbInput('tijiao');

两个自定义的名称都是提交按钮的class名称

验证指定class是否为空

$('.tijiaoe').cbNull('inpeeut','tijiaoe');

cbNull中第一个的名称是你需要验证的class的名称,第二个是提交按钮的class名称

验证是否是数字,字母,大写字母????

这些对应的是键盘按下事件,当按下键盘就会执行

$('.num').cbNum();
$('.let').cbLet();
$('.cbLetBig').cbLetBig();
$('.cbLetSmall').cbLetSmall();
$('.cbSpecialCharacter').cbSpecialCharacter();
$('.len').cbLen(2, 6);

需要验证的class名称对应的方法!

最后一个.cbLen是限制输入长度的,需注意的是,第一个参数是最小个数,第二个是最大,当超过最大的时候多余的会被裁掉。最小限制暂为进行任何处理,但两个参数都必须要填,不然要报错!

验证是否是中文,身份证号,电话号码,邮箱,如果不对则给出提示

这是失去焦点事件!

.cbChina()、cbCard()、cbPhone(),cbEmail()

用法和上面相同,对应的class对应的方法

自定义键盘验证事件

$('.ziji').cbFreeKeyup( { regExp:/^[0-9]$/g, regExpNo:/[^\d]/g });
  • regExp:只能输入数字正则

  • regExpNo:只能输入除数字所有别的字符正则

自定义失去焦点验证事件

$('.blurshijian').cbFreeBlur( { regExp:/^[0-9]$/, msg:"只能输入数字!" });
  • regregExp:只能输入数字正则

  • msg:输入错误后的提示语句!

备注:

可多个方法连续调用!如:

$('.num').cbNum().cbLen(2,6);

改含义为只能输入数字且数字的最多只能输入6个!

讨论群:490287349

相关插件-验证

级联依赖/验证

用于angularjs实现
  验证
 6292  23

简单易懂的jQuery表单验证插件

这是一款简单易懂的表单验证插件,没用使用任何多余的代码,使用时仅需引用jquery和jquery.validate.js
  验证
 4878  28

jQuery微信开放平台注册表单

jQuery微信开放平台注册表单是一款仿微信开放平台的选项卡带步骤的注册表单验证jQuery代码。
  验证
 13129  109

jquery表单验证插件Bootstrap Validator(推荐)

Bootstrap验证是一个jQuery插件来验证表单域,设计采用Bootstrap 3.
  验证
 158702  136

讨论这个项目(7)回答他人问题或分享插件使用方法奖励jQ币

    €-*「奈何」〜# 0
    2016/12/24 21:12:14
    洛叶 0
    2016/12/21 11:12:59

    如果正则有什么问题!麻烦各位看官,根据自己需求,自行修改!写的只是一个样式,给你提供我理解的一个思路。

    回复
    LicV587 0
    2016/12/21 11:12:24

    身份验证,18个1都通过,虽然不接公安部接口的身份验证基本上都是伪验证,但你好歹装的像一点啊,大哥

        洛叶0
        2016/12/21 11:12:30
        正则你改就好了,只是给你写的一个样式而已!     如果什么都不能修改的话   我直接压缩了   不写   可以自定义的!   这个时候你抱怨   还可以  但现在  我只能说你够懒!
        喵咪老师1
        2017/1/1 23:01:29
        @LicV587  遇到这种问题时,就是锻炼你学习jquery的成果,我特别希望有的作者插件有问题和BUG,然后自己琢磨下,奋力一搏,全力以赴的去解决插件中存在的问题。  毕竟作者已经为我们节约了开发世间,应该感谢他。 下载了,我要学习下了,一直对验证这块的代码不怎么熟练。多谢作者。
    回复
    Lai~ Gema& 0
    2016/12/17 0:12:44

    良心好评~

        洛叶0
        2016/12/17 0:12:31

        ?

    回复
取消回复