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

所属分类:输入-验证

 44044  310  查看评论 (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),则匹配八.


相关插件-验证

修改绑定手机号Tab切换样式时间线样式

时间线形式切换修改绑定手机号,第一步第二步第三步
  验证
 26053  376

Modern Fms 表单验证插件

Modern Fms(精美的纯css3 html5表单框架) 表单验证插件
  验证
 8796  128

超炫的登录页面 login register

超炫的登录页面和注册页面 login register
  验证
 68309  373

jQuery图片拼图验证(隔壁借鉴过来的)

稳定的jQuery拖拽滑动拼图验证
  验证
 14741  190

讨论这个项目(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
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复