github:https://github.com/52fhy/verify.js

首先引入js,最好拷贝verify整个目录,因为里面有图标。

<script src="verify/verify.js"></script>

d:默认提示信息,v:正则,c:正确提示信息,e:错误提示信息

使用:

在需要验证的的输入框里输入下面类似内容:

<input type="text" verifys="{d:'请输入账户信息(邮箱或用户名)',v:{r:/^[0-9A-Za-z-\._]+@\w+(\.(\w){1,3}){1,3}$|^[0-9A-Za-z-_]{3,16}$/,c:'账户信息格式正确',e:'账户信息格式不正确'}}" name="email" class=""><span id="emailTip" class="error"></span>

注意:name="email"和id="emailTip"对应关系

在公共CSS里加上一句,注意路径

.error{
height: 25px;
line-height: 25px;
margin: 0px 0px 0px 3px;
padding: 0px 0px 0px 25px;
color: rgb(153, 153, 153);
background: url(../verify/error.gif) no-repeat scroll 0px 6px transparent;
}

完成。

常见验证规则:

邮箱:

<input type="text" class="field" name="user_email" verifys="{d:'请填写Email帐号!',v:{r:/^[0-9A-Za-z-\._]+@\w+(\.(\w){1,3}){1,3}$/,c:'恭喜,您的Email帐号可用!',e:'填写的Email帐号格式不正确!'},a:{u:'do.php?act=user_check_useremail',a:'',c:'恭喜,您的Email帐号可用!',e:'很抱歉,您的Email帐号已被使用!'}}" /><span id="user_emailTip"></span>

用户名:

<input type="text" class="field" name="user_name"
verifys="{d:'用户名由3-16位字母、数字与下划线组成',
v:{r:/^[0-9A-Za-z-_]{3,16}$/,c:'恭喜,您的用户名可用!',e:'填写的会员用户名格式不正确!'},
a:{u:'do.php?act=user_check_username',a:'',c:'恭喜,您的用户名可用!',e:'很抱歉,您的用户名已被使用!'}}"
/>
<span id="user_nameTip"></span>

密码:

<input type="password" class="field" name="user_password" verifys="{d:'请填写6-20位密码!',v:{r:/^.{6,20}$/,c:'密码格式正确!',e:'填写的密码格式不正确!'}}" /><span id="user_passwordTip"></span>

确认密码:

<input type="password" class="field" name="user_repassword" verifys="{d:'请填写确认密码!',v:{r:/^.{6,20}$/,c:'确认密码格式正确!',e:'确认密码格式不正确!'},c:{m:'=',w:'user_password',c:'确认密码格式正确!',e:'两次填写的密码不一致!'}}" /><span id="user_repasswordTip"></span>

验证码:

<input type="text" class="field" name="vericode" verifys="{d:'请填写验证码!',v:{r:/^[0-9a-zA-Z]{5}$/,c:'验证码格式正确!',e:'验证码格式错误!'}}" /><span id="vericodeTip"></span>

单选框:

<input type="checkbox" checked="checked" name="servitems" verifys="{d:'注册协议',s:{r:'1'}}"/>我已阅读并同意注册协议
<span id="servitemsTip" class="error"/>注册协议</span>
* v:base verify function,c:compare verify function,f:function compare verify function,a:Ajax verify function,s:radio and checkbox input verify function

 v:基本验证方法
c:比较验证方法
f:比较验证回调
a:ajax验证方法
s:单选和多选验证方法 *
* d:default notice information
* d:默认提示信息
*
* c:success notice information,e:failure notice information
* c:验证成功提示消息
* e:验证失败提示消息
*
* r:regular expression(can not add quotation marks)
* r:正则(不能加引号)
*
* m:compare model,w:the name which compare with the object
* m:比较模型
* w:将要进行比较的对象
*
* u:URL,a:arguments,w:processing notice information
* u:url
* a:参数
* w:正在处理提示消息

verify.js使用验证插件使用的更多相关文章

  1. 表单验证插件之jquery.validate.js

    提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...

  2. JS表单验证插件(支持Ajax验证)

    自己编写了一个表单验证插件,支持ajax验证,使用起来很简单. 每个需要验证的表单元素下面有一个span标签,这个标签的class有一个valid表示需要验证,如果有nullable则表示可为空:ru ...

  3. 表单验证代码实例:jquery.validate.js表单验证插件

    jquery.validate.js是JQuery旗下的一个验证插件,借助JQuery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法.使用前请先下载必要的JQuery插件:jq ...

  4. jQuery Validate 表单验证插件----通过name属性来关联字段来验证,改变默认的提示信息,将校验规则写到 js 代码中

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.validate.messages_cn.js. ...

  5. jQuery Validate 表单验证插件----利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面 ...

  6. Jquery.validate.js表单验证插件的使用

    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...

  7. jQuery插件 -- 表单验证插件jquery.validate.js, jquery.metadata.js

    原文地址:http://blog.csdn.net/zzq58157383/article/details/7718352   最常使用JavaScript的场合就是表单的验证,而jQuery作为一个 ...

  8. mwValidate.js验证插件

    这段时间在公司一直做项目的同时,也学了下js,感觉有必要做一些什么东西出来.思来想去就做了最简单的一个验证插件.我很清楚这个东西市面上已经很多了,但我的目的也很清楚,检验我的学习成果.所以也就无所谓了 ...

  9. 一款非常好用的boostrap的验证插件、再也不用自己手写正则表达式和js了

    基于jquery.bootstrap数据验证插件bootstrapValidator教程 bootstrap:能够增加兼容性的强大框架. 因为项目需要数据验证,看bootstrapValidator ...

随机推荐

  1. URL Parsing

    [URL Parsing] urllib.parse.urlparse(urlstring, scheme='', allow_fragments=True) Parse a URL into six ...

  2. mysql 数据库导入 导出,解决 导入 错误问题

    mysqldump -uxxxx -pxxxx -hrds2383jse53pi6ipwmf.mysql.rds.aliyuncs.com legaokao > /root/legaokaodu ...

  3. NLPP-03-Exercises

    <PYTHON自然语言处理>第3章 处理原始文本 更多更复杂有关处理HTML内容 http://www.crummy.com/software/BeautifulSoup/ 3.11 深入 ...

  4. Windows 下, SetTimer 定时器的研究.

    一直很困惑一个问题: 我设置了一个10秒的定时器,可是被调用的函数要花费30秒, 那待调用的函数第二次是什么时候调用的呢? 20秒, 40秒, 还是50秒呢.... 所以我进行了实验. 我写了一个类  ...

  5. sql语句 关于日期时间、类型转换的东西

    (一) 1, select update_date, CONVERT(VARCHAR(30),update_date,111) jj ,CONVERT(VARCHAR(30),update_date, ...

  6. NSPredicate谓词

    NSPredicate——谓词(is) 作用:判断条件表达式的求值返回真或假的过程 使用步骤: . 定义NSPredicate对象并指定条件 . 调用谓词的evaluateWithObject方法判断 ...

  7. linux学习之——数据操作:添加与查询

    说明: 在linux系统中,利用搭建的服务器,编写两个页面,一个添加信息,一个展现信息: 主要涉及到:php+mysql的操作: 数据添加页面: <html> <head> & ...

  8. sql server多数据库查询 远程数据库查询

    --创建链接服务器 exec sp_addlinkedserver 'srv_lnk','','SQLOLEDB','服务器地址' exec sp_addlinkedsrvlogin 'srv_lnk ...

  9. dede列表页分页地址优化(不同url相同内容问题解决)<转自http://www.966266.com>

    <注明,完全转自http://www.966266.com/seoblog/?p=75> 存在问题 DEDE默认分类分页地址存在不同URL相同内容问题,导致内容重复,对SEO非常不利.情况 ...

  10. 今天想用jquery来实现div的拖放功能

    html5标签.拖放(Drag 和 drop)是 HTML5 标准的组成部分. 步骤一:首先设置标签可以被拖 draggable="true" 步骤二:选取被拖的标签,和要放置被拖 ...