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:正在处理提示消息



目录
相关文章
|
2月前
|
移动开发 JavaScript 前端开发
JavaScript:验证输入
【9月更文挑战第02天】
45 6
|
21天前
|
JavaScript 前端开发
javascript开发的简单的弹幕插件
这是一个原生javascript开发的简单的弹幕插件,具有美观、易用,占用的资源较低等特点,可以给弹幕设置内容、颜色、头像、链接地址等属性,鼠标悬停等,简单实用,欢迎下载!
37 5
|
22天前
|
JavaScript 定位技术
jQuery鹰眼视图小地图定位预览插件minimap.js
这是一个jQuery小地图定位预览视图,默认左侧是页面主要内容,minimap.js的好处就是在它的右侧形成一个快速定位通道,产生一个缩小版的页面,即预览效果,可以点击并快速定位到页面的某个位置。简单实用,欢迎下载!
30 0
|
1月前
|
存储 JSON JavaScript
Vue.js开发中基于localStorage与sessionStorage的本地存储利器:Vue-ls插件使用详解
Vue.js开发中基于localStorage与sessionStorage的本地存储利器:Vue-ls插件使用详解
47 0
|
2月前
|
JavaScript 前端开发 API
JavaScript 验证 API
JavaScript 验证 API
28 2
|
3月前
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
107 1
|
3月前
|
前端开发 微服务 API
微服务浪潮下的JSF革新:如何在分散式架构中构建统一而强大的Web界面
【8月更文挑战第31天】随着微服务架构的兴起,企业将应用拆分成小型、独立的服务以提高系统可维护性和可扩展性。本文探讨如何在微服务架构下构建和部署JavaServer Faces (JSF) 应用,通过RESTful服务实现前后端分离,提升灵活性和适应性。
59 0
|
3月前
|
JavaScript 前端开发 测试技术
[译] 用 Vue.js 3 Composition API 创建 i18n 插件
[译] 用 Vue.js 3 Composition API 创建 i18n 插件
|
4月前
|
JavaScript 前端开发 API
Chrome插件实现问题之 content_script.js能做什么
Chrome插件实现问题之 content_script.js能做什么
|
3月前
|
存储 JavaScript 前端开发
js登陆验证
js登陆验证
36 0