首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

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

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

- Author -

张龙豪

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript定义函数的方法
Dec 06 Javascript
深入理解JavaScript系列（16） 闭包（Closures）
Apr 12 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
May 14 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
Sep 19 Javascript
js读写json文件实例代码
Oct 21 Javascript
javascript实现计时器的简单方法
Feb 21 Javascript
利用JS轻松实现获取表单数据
Dec 06 Javascript
详解Javascript几种跨域方式总结
Feb 27 Javascript
微信小程序实现省市区三级地址选择
Jun 21 Javascript
微信小程序实现保存图片到相册功能
Nov 30 Javascript
Vue 动态添加路由及生成菜单的方法示例
Jun 20 Javascript
javascript实现评分功能
Jun 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
Slice(1) linux(15) MapReduce(1) Qlabel(1) JSON(10) pycharm(6) DFA(1) pygame(3) pyqt5(3) css3 (2)
You might like
一组PHP可逆加密解密算法实例代码
2014/01/21 PHP
PHP的curl函数的用法总结
2019/02/14 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
JavaScript高级程序设计（第3版）学习笔记12 js正则表达式
2012/10/11 Javascript
IE下使用cloneNode注意事项分享
2012/11/22 Javascript
jQuery中获取checkbox选中项等操作及注意事项
2013/11/24 Javascript
js获取元素相对窗口位置的实现代码
2014/09/28 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
jQuery.datatables.js插件用法及api实例详解
2016/10/28 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
Ajax实现不刷新取最新商品
2017/03/01 Javascript
vue-router 路由基础的详解
2017/10/17 Javascript
详解vue组件基础
2018/05/04 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
2018/12/24 Javascript
Vue-input框checkbox强制刷新问题
2019/04/18 Javascript
vue实现中部导航栏布局功能
2019/07/30 Javascript
JS中的算法与数据结构之集合(Set)实例详解
2019/08/20 Javascript
JS 事件机制完整示例分析
2020/01/15 Javascript
Python中Django框架下的staticfiles使用简介
2015/05/30 Python
python选择排序算法实例总结
2015/07/01 Python
Python的Django框架中的表单处理示例
2015/07/17 Python
python绘制条形图方法代码详解
2017/12/19 Python
Python字典操作详细介绍及字典内建方法分享
2018/01/04 Python
Flask框架Flask-Login用法分析
2018/07/23 Python
Django模型修改及数据迁移实现解析
2019/08/01 Python
Django实现微信小程序支付的示例代码
2020/09/03 Python
详解Python中list[::-1]的几种用法
2020/11/16 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
学雷锋献爱心活动总结
2015/05/11 职场文书
使用python+pygame开发消消乐游戏附完整源码
2021/06/10 Python
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记
frg-100简单操作(设置）说明
2022/04/05 无线电