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

所属分类:输入-验证

 34289  315  查看评论 (8)
分享到微信朋友圈
X
基于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

相关插件-验证

js正则表达式(原创)

js正则表达式表单验证,多种常用验证方式
  验证
 25351  342

jQueryCSS3分步骤注册表单切换动画在线演示

jQueryCSS3分步骤注册表单切换动画在线演示
  验证
 43641  478

jQuery随机验证码插件

点击图片进行更换验证密码
  验证
 33400  356

jQuery随机验证码

19,AZ随机生成验证码,且颜色及形状随机改变
  验证
 33465  321

讨论这个项目(8)回答他人问题或分享插件使用方法奖励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

        ?

        休息休息0
        2017/6/3 10:19:35

        +1

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复