jQuery>> verify>> 返回
项目作者： liuqing2018

项目描述 ：
jquery验证表单的插件
高级语言： JavaScript
项目地址: git://github.com/liuqing2018/verify.git
创建时间： 2016-11-24T03:44:02Z
项目社区：https://github.com/liuqing2018/verify
开源协议：Mozilla Public License 2.0
下载


verify 验证表单的插件

实现功能(暂时只针对input和select,textarea需要单独加标记(textarea:true))

  • 支持失焦验证和提交表单两种验证方式
  • 支持二次验证，如密码和确认密码
  • 支持ajax验证，如检测用户名是否存在（同一个页面支持多个ajax验证）
  • 支持开始时间和结束时间比较（同一个页面支持多组时间比较）
  • 支持必填项和选填项校验
  • 支持验证全部和逐条验证（验证一条出错了，是否继续验证）
  • 支持在元素[上|右|下]面显示错误信息
  • 支持在同一个页面上，多组表单域单独验证

使用示例

  1. var vf = new VForm('frmId');    //简单的逻辑只要调用这一句话 把要验证的范围传入即可

使用方法

1.引入相关的文件jquery.js、verify.css和verify.js,本例为了布局引入了bootcss，实际项目可不引入

  1.     <link rel="stylesheet" href="css/bootstrap.min.css">
  2.     <link rel="stylesheet" href="css/verify.css">
  3.     <script src="js/jquery.js"></script>
  4.     <script src="js/verify.js"></script>

2.相关表单元元素要增加自定义元素

  1. <input type="text" datatype="" nullMsg="" errMsg="" rechecked="" reErrMsg="" ajaxUrl="" startDate="" endDate="">
  • datatype:可以是正则，也可以是内置的验证对象 ，也可以是正则表达式

    内置datatype：

    1.       "*":  验证空
    2.       "zh": 验证中文
    3.       "n":  验证数字
    4.       "r":   "验证数字的范围"   //例如 r1-100表示 取值的范围是1-100之间的数字
    5.       'str': "[!]只验证以字母开头 后面跟字母数字下划线"
    6.       "email":  验证邮箱
    7.       "phone":  验证手机号
    8.       "url": 验证url地址
    9.       "ip": 验证ip地址
    10.       "date": 简单验证日期 yyyy-MM-dd
    11.       "time": 简单验证时间  hh:ss:mm
    12.       "datetime": 简单验证日期时间 
    13.       其中 [*,zh n,r,str]都可以结合横杠来用 ，例如 *1-20 表示1-20位任意的字符  n1-20 表示1-20位的数字
    • nullMsg：string //验证项为空时候的提示信息
    • errMsg：strinig //验证项不符合规则的时候提示信息
    • ajaxUrl：url //验证对象的地址
    • ajaxErrMsg : string //验证失败提示信息 需要结合ajaxUrl使用
    • rechecked：eleName //要二次验证的数据 eleName为要验证元素的名称 name
    • reErrMsg : string //二次验证失败的提示信息，要结合rechecked使用，否则无效
    • startDate : eleName //eleName 要对应endDate元素的name
    • endDate : eleName //eleName 要对应startDate元素的name
    • ignore ： ignore // ignore有值表示必填否则为选填

3.javascript代码里的逻辑控制

  1. $(function () {
  2.     //初始化验证
  3.     var oForm = $('.form-inline');      //要验证的表单
  4.     var oBtn = $('#btnAdd');    //提交按钮
  6.     //方式一
  7.     var vf = VForm('frmId');    //frmId为要验证的表单id
  9.     //方式二 
  10.     var vf = VForm({
  11.         elem: oForm,         //要验证元素的区域 默认document
  12.         placement: 'bottom',    //错误提示显示的位置 [| right | bottom] 默认为top: 在元素上方显示错误信息
  13.         textarea:true,      //是否要验证textarea  默认不验证
  14.         skip : false    //选填 [true|false] 默认为false 表示验证全部  true：验证一条失败后不再继续
  15.     });
  17.     //方式三
  18.     var vf = new VForm();
  19.     vf.initVerify({
  20.         elem: oForm,         //要验证元素的区域 默认document
  21.         placement: 'bottom',    //错误提示显示的位置 [| right | bottom] 默认为top: 在元素上方显示错误信息
  22.         textarea:true,      //是否要验证textarea  默认不验证
  23.         skip : false    //选填 [true|false] 默认为false 表示验证全部  true：验证一条失败后不再继续
  24.     });
  27.     //提交表单时执行验证
  28.     oBtn.on('click',function(){
  29.         if(vf.isVerify()){     //vf.isVerify()返回一个boolean值，用来表示是否验证通过 true：通过，false：不通过  
  31.             //TODO put your code here
  33.             $('#myForm').submit();
  34.         }
  35.     })
  37.     /*
  39.     vf.isVerify({
  40.         elem: oForm,         //要验证元素的表单 不填为document
  41.         placement: true,     //错误提示显示的位置 [top| right | bottom] 默认为top: 在元素上方显示错误信息
  42.     })
  44.     */
  45. })

相关示例

1.提交时验证表单

  1.     var oBtn = $('#btnAdd');    //提交按钮
  3.     //首先要初始化表单
  4.     var vf = new Vform('myForm');   //给formElem表单下面的元绑事件   
  6.     oBtn.on('click',function(){
  7.         if(vf.isVerify()){
  8.           //通过验证
  9.             $('#myForm').submit();  //也可以走ajax请求
  10.         }else{
  11.             //验证没有通过
  12.         }
  13.     })

2.二次验证（以密码和确认密码为例）

  • 在相关元素（第二个）上添加 rechecked=”name” // name为你要二次校验的元素
  • 添加reErrMsg=”错误信息” // reErrMsg为校验失败的提示信息
  1. <!-- 密码 -->
  2. <input type="password" name="password1"  datatype="*5-6" nullMsg="密码不能为空!" errMsg="输入的密码格式不正确">
  4. <!-- 确认密码 -->
  5. <input type="password" datatype="*5-6" reErrMsg="确认密码必须和密码一致" nullMsg="确认密码不能为空!" errMsg="" rechecked="password1">

3.ajax回调验证（以验证用户名是否存在为例）

  • 在元素上添加ajaxUrl属性
  • 服务器返回值的格式为
    1.   {
    2.     "status": 1,      //1：表示验证失败  0表示验证成功
    3.     "msg": "用户已经存在",   //错误信息
    4.     "data": []    //可以不传，暂时无用
    5.   }
  1. <input class="form-control" type="text" placeholder="请输入用户名" name="username" datatype="/^\d{5,19}$/" nullMsg="用户名不能为空!" errMsg="输入的用户名格式不正确" ajaxErrMsg="用户已经存在了" ajaxUrl="data/user.json">

4.日期比较

  • startDate=”name” name为startDate文本框的name //在开始日期上加startDate属性
  • endDate=”name” name为endDate文本框的name //在结束日期上加endDate属性
  • 验证的时候会比较：
    —开始日期是否早于结束日期
    —开始日期是否早于今日
    —结束日期是否早于今日
  1. <!-- 开始日期 -->
  2. <input type="text" datatype="date" startDate="myenddate" name="mystartdate" nullMsg="开始日期不能为空!" errMsg="输入的开始日期格式不正确">
  3. <!-- 结束日期 -->
  4. <input type="text" datatype="date" endDate="mystartdate" name="myenddate" nullMsg="结束日期不能为空!" errMsg="输入的结束日期格式不正确">

5.必选验证和可选验证

  • 有些数据，比如用户的兴趣爱好，可以不用做必填验证，但是填了就要符合一定的规则，这个此处称作为选填项*
  • 如果元素上加ignore属性，则表示为选填项，否则为必填项
    1. <input type="text" placeholder="请输入员工编号" datatype="^\d{5,6}$" ignore="ignore" nullMsg="员工编号不能为空!" errMsg="输入的员工编号格式不正确">

6 内置对象和自定义正则表达式

  2. //使用内置日期时间对象
  4. <input class="form-control"  type="text" placeholder="日期时间" datatype="datetime"  nullMsg="日期时间不能为空!" errMsg="输入的日期时间格式不正确">
  6. // 任意区间的数字
  7. <input type="text" placeholder="请输入5-6位的数字" datatype="n5-6" />
  9. // 验证数字范围 5-65536之间
  10. <input type="text" placeholder="请输入5-6位的数字" datatype="r5-65536" />
  12. // 任意区间的中文
  13. <input type="text" placeholder="请输入5-6位的中文" datatype="zh5-6" />
  15. // 任意区间的字符
  16. <input type="text" placeholder="请输入5-6位的任意字符" datatype="*5-6" />
  19. //使用正则表达式
  20. <input type="text" placeholder="请输入3-16位的小写字母、数字、-或则下划线" datatype="/^[a-z0-9_-]{3,16}$/" />