JQuery表单验证插件EasyValidator,超级简单易用!

所属分类:输入-验证

 51147  356  查看评论 (8)
分享到微信朋友圈
X
JQuery表单验证插件EasyValidator,超级简单易用! ie兼容6

使用非常简单,样式什么的可以自己修改,代码也不多

在页面中引入js文件:

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/easy_validator.pack.js"></script>
<script type="text/javascript" src="js/jquery.bgiframe.min.js"></script>
<link  href="css/validate.css" rel="stylesheet" type="text/css" />

1.提示功能(在表单或者其他标签中加入tip="想提示的文字")

<input name="name" tip="请输入你的名字哟~">
/*或者*/
<a href="http://www.jq22.com" tip="欢迎到jQuery插件酷" target="_blank">有疑惑可以到这里提问</a>


2. 普通表单验证(在表单中加入reg="正则表达式")

<input name="username" reg="正则" />


3. AJAX表单验证(在表单中加入url="验证系统地址")

 <input name="username" url="地址" />

AJAX验证DEMO:没有在线演示,请在本地运行ajax_demo.html,请求远程的PHP文件,当然可以为JSP或者ASP,我这里在程序里预设了一些已存在的数据,用户可以自行参考。


4. 普通表单验证 +  AJAX表单验证 (普通验证通过以后,再进行AJAX验证)

<input name="username" reg="正则" url="地址" />


5. 扩展函数表单验证(某些业务特殊需求):

    这些特殊需求都是根据业务来的,这里列举一下这样的情况:

    1.checkbox选择框数量验证,如限制别人至少选择1个,最多选择5个checkbox。

    2.多个表单之间进行比较,如【开始时间表单】一定小于等于【结束时间表单】或者两个密码表单要相等,用于注册的时候,等等。

由于这种情况的特殊性,所以用户得自己写业务逻辑代码,官方已经提供了extendsValidate扩展函数,在里面写自己的逻辑代码即可。


各式各样的正则表达式参考大全(访问正则表达式实例库): 

^\d+$  //匹配非负整数(正整数 + 0)  
//匹配整数 ^\d+(\.\d+)?$  //匹配非负浮点数(正浮点数 + 0) 
^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$  //匹配正浮点数 
^((-\d+(\.\d+)?)|(0+(\.0+)?))$  //匹配非正浮点数(负浮点数 + 0) 
^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$  //匹配负浮点数 
^(-?\d+)(\.\d+)?$  //匹配浮点数 
^[A-Za-z]+$          //匹配由26个英文字母组成的字符串 
^[A-Z]+$     //匹配由26个英文字母的大写组成的字符串 
^[a-z]+$  //匹配由26个英文字母的小写组成的字符串 
^[A-Za-z0-9]+$  //匹配由数字和26个英文字母组成的字符串 
^\w+$  //匹配由数字、26个英文字母或者下划线组成的字符串 
^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$    //匹配email地址 
^[a-zA-z]+://匹配(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\?\S*)?$  //匹配url 
匹配中文字符的正则表达式: [\u4e00-\u9fa5] 
匹配双字节字符(包括汉字在内):[^\x00-\xff] 
匹配空行的正则表达式:\n[\s| ]*\r 
匹配HTML标记的正则表达式:/<(.*)>.*<\/>|<(.*) \/>/ 
匹配首尾空格的正则表达式:(^\s*)|(\s*$) 
匹配Email地址的正则表达式:\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)* 
匹配网址URL的正则表达式:^[a-zA-z]+://(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\?\S*)?$ 
匹配帐号是否合法(字母开头,允许5-16字节,允许字母数字下划线):^[a-zA-Z][a-zA-Z0-9_]{4,15}$ 
匹配国内电话号码:(\d{3}-|\d{4}-)?(\d{8}|\d{7})? 
匹配腾讯QQ号:^[1-9]*[1-9][0-9]*$ 
下表是元字符及其在正则表达式上下文中的行为的一个完整列表,具体到每个正则表达式符号: 
\ 将下一个字符标记为一个特殊字符、或一个原义字符、或一个后向引用、或一个八进制转义符。 
^ 匹配输入字符串的开始位置。如果设置了 RegExp 对象的Multiline 属性,^ 也匹配 ’\n’ 或 ’\r’ 之后的位置。 
$ 匹配输入字符串的结束位置。如果设置了 RegExp 对象的Multiline 属性,$ 也匹配 ’\n’ 或 ’\r’ 之前的位置。 
* 匹配前面的子表达式零次或多次。 
+ 匹配前面的子表达式一次或多次。+ 等价于 {1,}。 
? 匹配前面的子表达式零次或一次。? 等价于 {0,1}。 
{n} n 是一个非负整数,匹配确定的n 次。 
{n,} n 是一个非负整数,至少匹配n 次。 
{n,m} m 和 n 均为非负整数,其中n <= m。最少匹配 n 次且最多匹配 m 次。在逗号和两个数之间不能有空格。 
? 当该字符紧跟在任何一个其他限制符 (*, +, ?, {n}, {n,}, {n,m}) 后面时,匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串,而默认的贪婪模式则尽可能多的匹配所搜索的字符串。 
. 匹配除 "\n" 之外的任何单个字符。要匹配包括 ’\n’ 在内的任何字符,请使用象 ’[.\n]’ 的模式。 
(pattern) 匹配pattern 并获取这一匹配。 (?:pattern) 匹配pattern 但不获取匹配结果,也就是说这是一个非获取匹配,不进行存储供以后使用。 (?=pattern) 正向预查,在任何匹配 pattern 的字符串开始处匹配查找字符串。这是一个非获取匹配,也就是说,该匹配不需要获取供以后使用。 (?!pattern) 负向预查,与(?=pattern)作用相反 x|y 匹配 x 或 y。 
[xyz] 字符集合。 
[^xyz] 负值字符集合。 
[a-z] 字符范围,匹配指定范围内的任意字符。
[^a-z] 负值字符范围,匹配任何不在指定范围内的任意字符。 
\b 匹配一个单词边界,也就是指单词和空格间的位置。 
\B 匹配非单词边界。 
\cx 匹配由x指明的控制字符。 
\d 匹配一个数字字符。等价于 [0-9]。 
\D 匹配一个非数字字符。等价于 [^0-9]。
 \f 匹配一个换页符。等价于 \x0c 和 \cL。 
\n 匹配一个换行符。等价于 \x0a 和 \cJ。 
\r 匹配一个回车符。等价于 \x0d 和 \cM。 
\s 匹配任何空白字符,包括空格、制表符、换页符等等。等价于[ \f\n\r\t\v]。 
\S 匹配任何非空白字符。等价于 [^ \f\n\r\t\v]。 
\t 匹配一个制表符。等价于 \x09 和 \cI。
\v 匹配一个垂直制表符。等价于 \x0b 和 \cK。 
\w 匹配包括下划线的任何单词字符。等价于’[A-Za-z0-9_]’。
\W 匹配任何非单词字符。等价于 ’[^A-Za-z0-9_]’。
\xn 匹配 n,其中 n 为十六进制转义值。十六进制转义值必须为确定的两个数字长。 
\num 匹配 num,其中num是一个正整数。对所获取的匹配的引用。 
\n 标识一个八进制转义值或一个后向引用。如果 \n 之前至少 n 个获取的子表达式,则 n 为后向引用。否则,如果 n 为八进制数字 (0-7),则 n 为一个八进制转义值。 
\nm 标识一个八进制转义值或一个后向引用。如果 \nm 之前至少有is preceded by at least nm 个获取得子表达式,则 nm 为后向引用。如果 \nm 之前至少有 n 个获取,则 n 为一个后跟文字 m 的后向引用。如果前面的条件都不满足,若 n 和 m 均为八进制数字 (0-7),则 \nm 将匹配八进制转义值 nm。 \nml 如果 n 为八进制数字 (0-3),且 m 和 l 均为八进制数字 (0-7),则匹配八.


相关插件-验证

JQUERY form表单验证

easy将是一个系列的库 目前只有一个文件easyform,包含3个类,easytip : tooltip控件,支持灵活的配置。easyinput : 单个input验证控件easyform :表单验证控件
  验证
 186864  654

移动端拼图验证登录

移动端拼图验证登录界面(手机端,不兼容pc)
  验证
 42268  331

滑动验证登录

用户滑动拖拽图片验证登录加注册
  验证
 58800  423

超炫的登录页面 login register

超炫的登录页面和注册页面 login register
  验证
 85867  429

讨论这个项目(8)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    zrhcslgxy 0
    2018/3/27 16:41:37
    一克(老杨) 0
    2017/11/3 13:28:09
    九指神丐 0
    2017/7/27 12:44:58

    但是jquery的版本越高,就不能验证了好像,我用的是jquery.1.10.2.js,验证不了,总是红框子,怎么办

        骑着蜗牛追导弹??0
        2017/9/8 10:22:57

        我也是这样,找到解决办法了吗

        ㄆ始于初见、止于终老0
        2017/9/25 14:04:33
        解决了吗
        西瓜0
        2017/10/22 21:47:40

        是引用的jQuery版本后面加上jQuery

        <script src="http://www.jq22.com/jquery/jquery-migrate-1.2.1.min.js"></script>
    回复
    在水一方 0
    2016/11/9 22:11:39
    唉,,有人推荐用这个,可是下载要jq币,心塞 回复
    冲刺的滑翔翼 0
    2016/9/7 9:09:02
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复