jquery表单验证插件formValidator使用方法


Posted in Javascript onApril 01, 2016

本文实例为大家分享了jquery表单验证插件formValidator的使用方法,供大家参考,具体内容如下

使用步骤:

1.首先在项目中添加必备js与css

 jquery表单验证插件formValidator使用方法

2.代码中添加引用(必备引用)

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <!--jquery必须库-->
 <script src="formValidator1/formValidator-4.0.1.min.js" type="text/javascript"></script> <!--表单验证必须库-->
 <script src="formValidator1/formValidatorRegex.js" type="text/javascript"></script> <!--表单验证扩展库-->
 <link href="formValidator1/style/validator.css" rel="stylesheet" type="text/css" /><!--表单验证样式表-->

3.<body>中要验证的标签(做一些常用的演示)

<table border="0px" style="font-size:12px">
 <tr> 
  <td colpan="3"><input type="submit" name="button" id="button" value="提交" /></td>
 </tr>
 <tr> 
  <td align="right">身份证(正则表达式库):</td>
  <td><input name="sfz" type="text" id="sfz" /></td>
  <td><div id="sfzTip" style="width:300px"></div></td> <!--必须注意这里提示验证信息中的div的id值,跟要验证控件中的id值多了一个Tip,下面的都是这样。必须多的是Tip,也必须要多。-->
 </tr>
 <tr> 
  <td align="right">身份证(外部函数):</td>
  <td><input type="text" id="sfz1" style="width:120px" /></td>
  <td><div id="sfz1Tip" style="width:300px"></div></td>
 </tr>
 <tr> 
  <td align="right">整数:</td>
  <td><input type="text" id="zs" style="width:120px" /></td>
  <td><div id="zsTip" style="width:300px"></div></td>
 </tr>
 <tr> 
  <td align="right">正整数:</td>
  <td><input type="text" id="zzs" style="width:120px" /></td>
  <td><div id="zzsTip" style="width:300px"></div></td>
 </tr>
 <tr> 
  <td align="right">负整数:</td>
  <td><input type="text" id="fzs" style="width:120px" /></td>
  <td><div id="fzsTip" style="width:300px"></div></td>
 </tr>
 <tr> 
  <td align="right">数字:</td>
  <td><input type="text" id="sz" style="width:120px" /></td>
  <td><div id="szTip" style="width:300px"></div></td>
 </tr>
 <tr> 
  <td align="right">正数(正整数 + 0):</td>
  <td><input type="text" id="zs1" style="width:120px" /></td>
  <td><div id="zs1Tip" style="width:300px"></div></td>
 </tr>
 <tr> 
  <td align="right">负数(负整数 + 0):</td>
  <td><input type="text" id="fs" style="width:120px" /></td>
  <td><div id="fsTip" style="width:300px"></div></td>
 </tr>
 <tr> 
  <td align="right">浮点数:</td>
  <td><input type="text" id="fds" style="width:120px" /></td>
  <td><div id="fdsTip" style="width:300px"></div></td>
 </tr>
 <tr> 
  <td align="right">正浮点数:</td>
  <td><input type="text" id="zfds" style="width:120px" /></td>
  <td><div id="zfdsTip" style="width:300px"></div></td>
 </tr>
 <tr> 
  <td align="right">负浮点数:</td>
  <td><input type="text" id="ffds" style="width:120px" /></td>
  <td><div id="ffdsTip" style="width:300px"></div></td>
 </tr>
 <tr> 
  <td align="right">非负浮点数(正浮点数 + 0):</td>
  <td><input type="text" id="fffds" style="width:120px" /></td>
  <td><div id="fffdsTip" style="width:300px"></div></td>
 </tr>
 <tr> 
  <td align="right">非正浮点数(负浮点数 + 0):</td>
  <td><input type="text" id="fzfds" style="width:120px" /></td>
  <td><div id="fzfdsTip" style="width:300px"></div></td>
 </tr>
 <tr> 
  <td align="right">颜色:</td>
  <td><input type="text" id="ys" style="width:120px" /></td>
  <td><div id="ysTip" style="width:300px"></div></td>
 </tr>
 <tr> 
  <td align="right">你的EMAIL:</td>
  <td><input type="text" id="email" style="width:120px" /></td>
  <td><div id="emailTip" style="width:300px"></div></td>
 </tr>
 <tr> 
  <td align="right">手机:</td>
  <td><input type="text" id="sj" style="width:120px" /></td>
  <td><div id="sjTip" style="width:300px"></div></td>
 </tr>
 <tr> 
  <td align="right">邮编:</td>
  <td><input type="text" id="yb" style="width:120px" /></td>
  <td><div id="ybTip" style="width:300px"></div></td>
 </tr>
 <tr> 
  <td align="right">非空:</td>
  <td><input type="text" id="fk" style="width:120px" /></td>
  <td><div id="fkTip" style="width:300px"></div></td>
 </tr>
 <tr> 
  <td align="right">图片:</td>
  <td><input type="text" id="tp" style="width:120px" /></td>
  <td><div id="tpTip" style="width:300px"></div></td>
 </tr>
 <tr> 
  <td align="right">压缩文件:</td>
  <td><input type="text" id="rar" style="width:120px" /></td>
  <td><div id="rarTip" style="width:300px"></div></td>
 </tr>
 <tr> 
  <td align="right">ip4:</td>
  <td><input type="text" id="ip4" style="width:120px" /></td>
  <td><div id="ip4Tip" style="width:300px"></div></td>
 </tr>
 <tr> 
  <td align="right">QQ号码:</td>
  <td><input type="text" id="qq" style="width:120px" /></td>
  <td><div id="qqTip" style="width:300px"></div></td>
 </tr>
 <tr> 
  <td align="right">国内电话:</td>
  <td><input type="text" id="dh" style="width:120px" /></td>
  <td><div id="dhTip" style="width:300px"></div></td>
 </tr>
 <tr> 
  <td align="right">用户名:</td>
  <td><input type="text" id="yhm" style="width:120px" /></td>
  <td><div id="yhmTip" style="width:300px"></div></td>
 </tr>
 <tr> 
  <td align="right">字母:</td>
  <td><input type="text" id="zm" style="width:120px" /></td>
  <td><div id="zmTip" style="width:300px"></div></td>
 </tr>
 <tr> 
  <td align="right">大写字母:</td>
  <td><input type="text" id="dxzm" style="width:120px" /></td>
  <td><div id="dxzmTip" style="width:300px"></div></td>
 </tr>
 <tr> 
  <td align="right">小写字母:</td>
  <td><input type="text" id="xxzm" style="width:120px" /></td>
  <td><div id="xxzmTip" style="width:300px"></div></td>
 </tr>
 <tr> 
  <td align="right">身份证:</td>
  <td><input type="text" id="sfz" style="width:120px" /></td>
  <td><div id="sfzTip" style="width:300px"></div></td>
 </tr>
 </table>

4.<script>中的代码

<script type="text/javascript">
 $(document).ready(function () {
  $.formValidator.initConfig({ formID: "form1", onError: function () { alert("校验没有通过,具体错误请看错误提示") } });
  $("#sfz").formValidator({ onShow: "请输入15或18位的身份证", onfocus: "输入15或18位的身份证", onCorrect: "输入正确" }).regexValidator({ regExp: "idcard", dataType: "enum", onError: "你输入的身份证格式不正确" }); ;
  $("#sfz1").formValidator({ onShow: "请输入15或18位的身份证", onfocus: "输入15或18位的身份证", onCorrect: "输入正确" }).functionValidator({ fun: isCardID });

  $("#zs").formValidator({ onShow: "请输入整数", onCorrect: "谢谢你的合作,你的整数正确" }).regexValidator({ regExp: "intege", dataType: "enum", onError: "整数格式不正确" });
  $("#zzs").formValidator({ onShow: "请输入正整数", onCorrect: "谢谢你的合作,你的正整数正确" }).regexValidator({ regExp: "intege1", dataType: "enum", onError: "正整数格式不正确" });
  $("#fzs").formValidator({ onShow: "请输入负整数", onCorrect: "谢谢你的合作,你的负整数正确" }).regexValidator({ regExp: "intege2", dataType: "enum", onError: "负整数格式不正确" });
  $("#sz").formValidator({ onShow: "请输入数字", onCorrect: "谢谢你的合作,你的数字正确" }).regexValidator({ regExp: "num", dataType: "enum", onError: "数字格式不正确" });
  $("#zs1").formValidator({ onShow: "请输入正数", onCorrect: "谢谢你的合作,你的正数正确" }).regexValidator({ regExp: "num1", dataType: "enum", onError: "正数格式不正确" });
  $("#fs").formValidator({ onShow: "请输入负数", onCorrect: "谢谢你的合作,你的负数正确" }).regexValidator({ regExp: "num2", dataType: "enum", onError: "负数格式不正确" });

  $("#sj").formValidator({ onShow: "请输入你的手机号码", onfocus: "必须是13或15打头哦", onCorrect: "谢谢你的合作,你的手机号码正确" }).regexValidator({ regExp: "mobile", dataType: "enum", onError: "手机号码格式不正确" });
  //$("#").formValidator({onShow:"",onfocus:"请输入",onCorrect:"谢谢你的合作,你的正确"}).regexValidator({regExp:"",dataType:"enum",onError:"格式不正确"});
  $("#email").formValidator({ onShow: "请输入你的email", onfocus: "请注意你输入的email格式,例如:wzmaodong@126.com", onCorrect: "谢谢你的合作,你的email正确" }).regexValidator({ regExp: "email", dataType: "enum", onError: "email格式不正确" });
  $("#fds").formValidator({ onShow: "请输入浮点数", onCorrect: "谢谢你的合作,你的浮点数正确" }).regexValidator({ regExp: "decmal", dataType: "enum", onError: "浮点数格式不正确" });
  $("#zfds").formValidator({ onShow: "请输入正浮点数", onCorrect: "谢谢你的合作,你的正浮点数正确" }).regexValidator({ regExp: "decmal1", dataType: "enum", onError: "正浮点数格式不正确" });
  $("#ffds").formValidator({ onShow: "请输入负浮点数", onCorrect: "谢谢你的合作,你的负浮点数正确" }).regexValidator({ regExp: "decmal2", dataType: "enum", onError: "负浮点数格式不正确" });
  $("#fffds").formValidator({ onShow: "请输入非负浮点数", onCorrect: "谢谢你的合作,你的非负浮点数正确" }).regexValidator({ regExp: "decmal4", dataType: "enum", onError: "非负浮点数格式不正确" });
  $("#fzfds").formValidator({ onShow: "请输入非正浮点数", onCorrect: "谢谢你的合作,你的非正浮点数正确" }).regexValidator({ regExp: "decmal5", dataType: "enum", onError: "非正浮点数格式不正确" });
  $("#ys").formValidator({ onShow: "请输入16进制颜色", onCorrect: "谢谢你的合作,你的16进制颜色正确" }).regexValidator({ regExp: "color", dataType: "enum", onError: "16进制颜色格式不正确" });
  $("#yb").formValidator({ onShow: "请输入邮编", onfocus: "6位数字组成的哦", onCorrect: "谢谢你的合作,你的邮编正确" }).regexValidator({ regExp: "zipcode", dataType: "enum", onError: "邮编格式不正确" });
  $("#ip4").formValidator({ onShow: "请输入ip4", onfocus: "例如:172.16.201.18", onCorrect: "谢谢你的合作,你的ip4正确" }).regexValidator({ regExp: "ip4", dataType: "enum", onError: "ip4格式不正确" });
  $("#fk").formValidator({ onShow: "请输入非空字符", onCorrect: "谢谢你的合作,你的非空字符正确" }).regexValidator({ regExp: "notempty", dataType: "enum", onError: "非空字符格式不正确" });
  $("#tp").formValidator({ onShow: "请输入图片名", onCorrect: "谢谢你的合作,你的图片名正确" }).regexValidator({ regExp: "picture", dataType: "enum", onError: "图片名格式不正确" });
  $("#rar").formValidator({ onShow: "请输入压缩文件名", onCorrect: "谢谢你的合作,你的压缩文件名正确" }).regexValidator({ regExp: "rar", dataType: "enum", onError: "压缩文件名格式不正确" });
  $("#qq").formValidator({ onShow: "请输入QQ号码", onCorrect: "谢谢你的合作,你的QQ号码正确" }).regexValidator({ regExp: "qq", dataType: "enum", onError: "QQ号码格式不正确" });
  $("#dh").formValidator({ onShow: "请输入国内电话", onfocus: "例如:0577-88888888或省略区号88888888", onCorrect: "谢谢你的合作,你的国内电话正确" }).regexValidator({ regExp: "tel", dataType: "enum", onError: "国内电话格式不正确" });
  $("#yhm").formValidator({ onShow: "请输入用户名", onCorrect: "谢谢你的合作,你的用户名正确" }).regexValidator({ regExp: "username", dataType: "enum", onError: "用户名格式不正确" });
  $("#zm").formValidator({ onShow: "请输入字母", onCorrect: "谢谢你的合作,你的字母正确" }).regexValidator({ regExp: "letter", dataType: "enum", onError: "字母格式不正确" });
  $("#dxzm").formValidator({ onShow: "请输入大写字母", onCorrect: "谢谢你的合作,你的大写字母正确" }).regexValidator({ regExp: "letter_u", dataType: "enum", onError: "大写字母格式不正确" });
  $("#xxzm").formValidator({ onShow: "请输入小写字母", onCorrect: "谢谢你的合作,你的小写字母正确" }).regexValidator({ regExp: "letter_l", dataType: "enum", onError: "小写字母格式不正确" });
  $("#sfz").formValidator({ onShow: "请输入身份证", onCorrect: "谢谢你的合作,你的身份证正确" }).regexValidator({ regExp: "idcard", dataType: "enum", onError: "身份证格式不正确" });
 });
</script>

5.效果图:

jquery表单验证插件formValidator使用方法

6.添加修改说明:

$.formValidator.reloadAutoTip(); //重新加载表单验证样式
    if(!$.formValidator.pageIsValid('1')) return false; //如果不通过则不提交
 


  $(document).ready(function () {
   $.formValidator.initConfig({ formID: "form1", onError: function () { alert("校验没有通过,具体错误请看错误提示") } });
   $("#name").formValidator({ onShow: "请输入姓名!", onFocus: "输入一个到十个字符", onCorrect: "输入正确,谢谢您的合作!" }).inputValidator({ min: 1, max: 20, onError: "输入长度,不对!" });
   $("#timelong").formValidator({ onShow: "请输入路演时长!", onFocus: "输入格式为正整数!", onCorrect: "输入正确,谢谢您的合作!" }).regexValidator({ regExp:"intege1",dataType: "enum", onError: "您输入的时长格式不正确!" });
   $("#address").formValidator({ onShow: "请输入路演平台名称!", onFocus: "输入一个到五十个字符", onCorrect: "输入正确,谢谢您的合作!" }).inputValidator({ min: 1, max: 50, onError: "输入长度,不对!" });
   $("#urladdress").formValidator({ onShow: "请输入路演链接地址!", onFocus: "输入格式:http://www.baidu.com", onCorrect: "输入正确,谢谢您的合作!" }).regexValidator({ regExp:"^(http|https|ftp)\://([a-zA-Z0-9\.\-]+(\:[a-zA-Z0-9\.&%\$\-]+)*@)*((25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9])|localhost|([a-zA-Z0-9\-]+\.)*[a-zA-Z0-9\-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(\:[0-9]+)*(/($|[a-zA-Z0-9\.\,\?\'\\\+&%\$#\=~_\-]+))*$", onError: "输入格式不正确!" });
   $("#time").formValidator({ onCorrect: "格式正确" }).functionValidator({fun:isDateTime, onError: "输入格式,不对!" });
   $("#txtcontent").formValidator({ onShow: "请输入专家简介!", onFocus: "输入一个到一百个字符", onCorrect: "输入正确,谢谢您的合作!" }).inputValidator({ min: 1, max: 100, onError: "输入长度,不对!" });
  });

ajax验证用户是否存在

js代码 (html中一定要设置name值,否则动态是获取不到值的)

$("#userID").formValidator({ ajax:true,onShow: "请输入账号", onfocus: "最好以字母开头,只能由字母数字组成 ,不能少于6个字符。", onCorrect: "用户名可以使用,请完善下面信息。" }).regexValidator({ regExp: "username", dataType: "enum", onError: "你输入的格式不正确!" }).inputValidator({ min: 6, max: 16, onError: "输入长度不正确!" })
    .ajaxValidator({
     dataType: "text",
     async: true,
     url: "Tool/AddUser.ashx",
     success: function (data) {
      if (data == "0") { return true; }
      else if (data == "null") { return "注意:用户名不能少于6个字符。"; }
      else if (data == "false") { return "该用户名已被注册,请更换用户名。"; }
     },
     buttons: $("#button"),
     error: function (jqXHR, textStatus, errorThrown) { alert("服务器没有返回数据,可能服务器忙,请重试" + errorThrown); },
     onError: "该用户名不可用,请更换用户名",
     onWait: "正在对用户名进行合法性校验,请稍候..."
    }).defaultPassed(); //这里添加defaultPassed()的话,则默认验证通过。

一般处理程序代码

public void ProcessRequest(HttpContext context)
  {
   context.Response.ContentType = "text/plain";
   #region 判断用户是否被注册过
   string returnStr = "";
   //这里其实是context.Request.QueryString根据name获取的值 一定要设置空间的name值
   if (context.Request["userName"] != null && context.Request["userName"].ToString().Length > 0)
   {
    if (isExist(context.Request["userName"].ToString()))
    {
     returnStr = "false";
    }
    else
    {
     returnStr = "0";
    }    
   }
   else
   {
    returnStr = "null";
   }
   context.Response.Write(returnStr);
   context.Response.End();
   #endregion
  }

  #region 判断用户是否被注册过
  public bool isExist(string userName)
  {
   Snet.BLL.UserAccount bll = new BLL.UserAccount();
   return bll.Exists(userName);
  }
  #endregion

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
javascript对JSON数据排序的3个例子
Apr 12 Javascript
javascript解析json实例详解
Nov 05 Javascript
jQuery中:empty选择器用法实例
Dec 30 Javascript
Angularjs全局变量被作用域监听的正确姿势
Feb 06 Javascript
JS组件Bootstrap Table布局详解
May 27 Javascript
功能强大的Bootstrap组件(结合js)
Aug 03 Javascript
JS给swf传参数的实现方法
Sep 13 Javascript
BootStrap Validator使用注意事项(必看篇)
Sep 28 Javascript
移动端手指放大缩小插件与js源码
May 22 Javascript
基于JavaScript实现飘落星星特效
Aug 10 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
Aug 07 Javascript
JavaScript获取时区实现过程解析
Sep 24 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 #Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 #Javascript
jQuery实现下拉加载功能实例代码
Apr 01 #Javascript
Extjs实现下拉菜单效果
Apr 01 #Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 #Javascript
EasyUi combotree 实现动态加载树节点
Apr 01 #Javascript
如何在Linux上安装Node.js
Apr 01 #Javascript
You might like
评分9.0以上的动画电影,剧情除了经典还很燃
2020/03/04 日漫
php adodb介绍
2009/03/19 PHP
简单的PHP缓存设计实现代码
2011/09/30 PHP
PHP后期静态绑定实例浅析
2018/12/21 PHP
JS去除右边逗号的简单方法
2013/07/03 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
关于session和cookie的简单理解
2016/06/08 Javascript
JavaScript原生实现观察者模式的示例
2017/12/15 Javascript
jQuery实现鼠标移入移出事件切换功能示例
2018/09/06 jQuery
vue实现与安卓、IOS交互的方法
2018/11/02 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
2019/05/14 jQuery
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
微信公众号服务器验证Token步骤图解
2019/12/30 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
2020/09/22 Javascript
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
Python语法快速入门指南
2015/10/12 Python
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
python实现对求解最长回文子串的动态规划算法
2018/06/02 Python
python实现合并多个list及合并多个django QuerySet的方法示例
2019/06/11 Python
使用Python做垃圾分类的原理及实例代码附源码
2019/07/02 Python
基于python3的socket聊天编程
2020/02/17 Python
PyQt5高级界面控件之QTableWidget的具体使用方法
2020/02/23 Python
python爬虫请求头的使用
2020/12/01 Python
python压包的概念及实例详解
2021/02/17 Python
Pottery Barn阿联酋:购买家具、家居装饰及更多
2019/12/08 全球购物
编辑个人求职信范文
2013/09/21 职场文书
高级护理专业大学生求职信
2013/10/24 职场文书
国贸类专业毕业生的求职信分享
2013/12/08 职场文书
追悼会上的答谢词
2014/01/10 职场文书
总经理司机岗位职责
2014/02/06 职场文书
《自然之道》教学反思
2014/02/11 职场文书
成龙洗发水广告词
2014/03/14 职场文书
学校安全生产承诺书
2014/05/23 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
留守儿童工作方案
2014/06/02 职场文书
婚庆开业庆典主持词
2015/06/30 职场文书