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:正在处理提示消息
时间: 2024-12-22 21:25:51

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

自己动手丰衣足食之Easyform表单验证插件&amp;amp;validate.js实时验证

下载地址:http://download.csdn.net/detail/cometwo/9437671 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Easyform表单验证插件实现简易注册表单验证代码</title> <

拥有一个属于自己的javascript表单验证插件_javascript技巧

自己编写了一个表单验证插件,使用起来很简单,以后还可以扩展更多的功能,比如ajax验证. 每个需要验证的表单元素下面有一个span标签,这个标签的class有一个valid表示需要验证,如果有nullable则表示可为空:rule表示验证规则,msg表示错误提示信息:to表示要验证的元素的name值,如果元素是单个的,to可以不写.该插件会遍历每个有valid的span标签,找出它前面需要验证的元素,根据rule验证,如果验证不通过,则显示边框为红色,鼠标放在元素上时显示错误信息.  验证时机:

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

文章简介:很好用的JQuery表单验证插件--jquery.validate.js. jquery.validate.js是JQuery旗下的一个验证插件,借助JQuery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法.使用前请先下载必要的JQuery插件:jquery-1.4.2.min.js和jquery.validate.min.js. 下面演示如何使用jquery.validate.js插件进行表单的验证. 这是HTML表单:<form id="regFro

自己编写的支持Ajax验证的JS表单验证插件

 创建一个JavaScript表单验证插件,可以说是一个繁琐的过程,涉及到初期设计.开发与测试等等环节.实际上一个优秀的程序员不仅是技术高手,也应该是善假于外物的.本文介绍的这个不错的JavaScript表单验证插件,支持ajax验证,有需要的小伙伴可以参考下     自己编写了一个表单验证插件,支持ajax验证,使用起来很简单. 每个需要验证的表单元素下面有一个span标签,这个标签的class有一个valid表示需要验证,如果有nullable则表示可为空:rule表示验证规则,msg表示错

jquery表单验证插件(jquery.validate.js)的3种使用方式

这篇文章主要介绍了jquery表单验证插件(jquery.validate.js)的3种使用方式,本文用详细的代码实例讲解jquery表单验证插件的使用,需要的朋友可以参考下     jquery 验证非常简单,下面总结常用的三种方式: 第一种方式:也是比较标准的方式: 首先引入jquery 插件和 jquery 验证插件: 第一步:引入插件 代码如下: <script type="text/javascript" src="js/jquery-1.6.1.min.js

jquery表单验证插件(jquery.validate.js)的3种使用方式_jquery

jquery  验证非常简单,下面总结常用的三种方式: 第一种方式:也是比较标准的方式: 首先引入jquery  插件和 jquery 验证插件: 第一步:引入插件 复制代码 代码如下: <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="js/jq

快速学习jQuery插件 jquery.validate.js表单验证插件使用方法_jquery

最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评.作为一个标准的验证方法库,Validation拥有如下特点: 1.内置验证规则: 拥有必填.数字.Email.URL和信用卡号码等19类内置验证规则 2.自定义验证规则: 可以很方便地自定义验证规则 3.简单强大的验证

jquery.validate.js表单验证插件的用法和入门范例

网上介绍的jquery.validate大部门只是介绍它的api和用法,没有一个完整的入门范例,有时候看半天才知道该怎么下手.因此为了快速了解学习,我弄了一个快速入门范例,虽然用的知识点不多,写的也不是很好,但是可以快速的入手. 以下是参考源码(下面有源码网上可以下载到在此不再提供): <html> <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf

自己编写的支持Ajax验证的JS表单验证插件_javascript技巧

    自己编写了一个表单验证插件,支持ajax验证,使用起来很简单.     每个需要验证的表单元素下面有一个span标签,这个标签的class有一个valid表示需要验证,如果有nullable则表示可为空:rule表示验证规则,msg表示错误提示信息:to表示要验证的元素的name值,如果元素是单个的,to可以不写.该插件会遍历每个有valid的span标签,找出它前面需要验证的元素,根据rule验证,如果验证不通过,则显示边框为红色,鼠标放在元素上时显示错误信息.     验证时机:1.