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

jQuery插件formValidator实现表单验证

Posted in Javascript onMay 23, 2016

本文实例为大家分享了formValidator实现表单验证的具体代码，供大家参考，具体内容如下

测试效果：

jQuery插件formValidator实现表单验证

所需的库文件：

jQuery插件formValidator实现表单验证

实现代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表单校验测试</title>
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/bootstrap.min.css">
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/formValidator-4.1.3.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/formValidatorRegex.js"></script>
<script language="javascript" src="<%=request.getContextPath()%>/js/DateTimeMask.js" type="text/javascript"></script>
</head>
<body>
<!-- 
   【注】表单验证的参数中的方法区分大小写，采用骆驼命名法。如文档中的onerror: 应写成 onError:
 -->
<!-- 验证表单之文本输入框 -->
<div class="col-xs-offset-2 col-xs-8">
  <form id="inputTest" action="/test.do" method="post">
    <table class="table table-bordered table-striped">
      <caption style="font-size: 30px;font-weight: bold;color:#894502;">验证表单之文本输入框</caption>
      <tr>
        <td width="100px"><label for="username">用户名:</label></td>
        <td width="100px"><input type="text" id="username"></td>
        <td width="100px"><span id="usernameTip"></span></td>
      </tr>
      <tr>
        <td width="100px"><label for="sex">性别:</label></td>
        <td width="100px"><input type="radio" id="sex" name="sex" value="男">男<input type="radio" id="sex1" name="sex" value="女">女</td>
        <td width="100px"><span id="sexTip"></span></td>
      </tr>
      <tr>
        <td width="100px"><label for="sex">出生年月:</label></td>
        <td width="100px"><input type="text" id="birthday" name="birthday" value="2015-08-09"></td>
        <td width="100px"><span id="birthdayTip"></span></td>
      </tr>
      <tr>
        <td width="100px"><label for="idcard">身份证号</label></td>
        <td width="100px"><input type="text" id="idcard" name="idcard"></td>
        <td width="100px"><span id="idcardTip"></span></td>
      </tr>
      <tr>
        <td width="100px"><label for="email">邮箱</label></td>
        <td width="100px"><input type="email" id="email" name="email"></td>
        <td width="150px"><span id="emailTip"></span></td>
      </tr>
      <tr> 
       <td width="100px"><label for="degree">学历</label></td>
       <td width="100px"><select name="degree" id="degree">
         <option value="">－－请选择－－</option>
         <option value="a">专科</option>
         <option value="b">本科</option>
         <option value="c">研究生</option>
         <option value="e">硕士</option>
         <option value="d">博士</option>
        </select> 
       </td>
       <td width="150px"><div id="degreeTip"></div></td>
      </tr>
       <tr> 
       <td width="100px"><label for="degree">国家区号</label></td>
       <td width="200px">
        <input id="Tel_country" name="Tel_country" style="width: 20px;" value="" />
        -地区区号 
        <input id="Tel_area" name="Tel_area" style="width: 35px;" />
        -电话号码 
        <input id="Tel_number" name="Tel_number" style="width: 60px;" />
        -分机号码 
        <input id="Tel_ext" name="Tel_ext" style="width: 30px;" />
       </td>
       <td width="150px"><div id="telTip"></div></td>
      </tr>
      <tr> 
       <td width="100px"><label for="qq1">兴趣爱好</label></td>
       <td width="200px"> <input type="checkbox" name="xqah_one" id="qq1"/>
          乒乓球 
        <input type="checkbox" name="xqah_one" id="qq2" value="1" />
          羽毛球 
        <input type="checkbox" name="xqah_one" id="qq3" value="2" />
          上网 
        <input type="checkbox" name="xqah_one" id="qq4" value="3" />
           旅游 
        <input type="checkbox" name="xqah_one" id="qq5" value="4" />
           购物 
       </td>
       <td width="150px"><div id="test3Tip"></div></td>
      </tr>
      <tr> 
       <td width="100px"><label for="shouji">手机号码</label></td>
       <td width="200px"><input type="text" id="shouji" name="shouji"/></td>
       <td width="150px"><div id="shoujiTip"></div></td>
      </tr>
      <tr> 
       <td width="100px"><label for="selectmore">多选select控件</label></td>
       <td width="200px">
        <select name="selectmore" size="3" id="selectmore" multiple="true" style="width: 100px;">
         <option value="0">多选1</option>
         <option value="1">多选2</option>
         <option value="2">多选3</option>
        </select>(按住ctrl键多选)
       </td>
       <td width="150px"><div id="selectmoreTip"></div></td>
      </tr>
      <tr> 
       <td width="100px"><label for="ms">你的描述</label></td>
       <td width="100px"><textarea id="ms" name="ms" cols="50" rows="3">仅支持中文并且要求在10个字以上</textarea></td>
       <td width="150px"><div id="msTip"></div></td>
      </tr>
       <tr> 
       <td width="100px"><label for="password1">密码</label></td>
       <td><input type="password" id="password1" name="password1"/></td>
       <td width="150px"><div id="password1Tip"></div></td>
      </tr>
      <tr> 
       <td width="100px"><label for="password2">重复密码</label></td>
       <td><input type="password" id="password2" name="password2"/></td>
       <td width="150px"><div id="password2Tip"></div></td>
      </tr>
      <tr>
        <td colspan="3" align="center"><input class="btn btn-primary" type="submit" value="提交"></td>
      </tr>
    </table>
  </form>
</div>
<script type="text/javascript">
$(function(){
  //初始化表单验证
  $.formValidator.initConfig({formID:"inputTest",debug:true,onSuccess:function(){
    alert("验证通过");
  },onError:function(){
    alert("验证有误")
  }});
  //验证表单中的姓名  【注】测试表明 如果设置了onErrorMin 则结果会调用onErrorMin的方法 而屏蔽onError的方法 onErrorMax同理
  $("#username").formValidator({onShow:"请输入姓名",onFocus:"请注意填入正确姓名",onCorrect:"姓名有效"})
         .inputValidator({min:4,max:10,onErrorMin:"姓名长度太短",onError:"输入姓名有误"});
  //验证单选按钮 【注】多选按钮时,id不可相同 否则表单验证的过程中会执行两次并且第二次会报错 因为有多个标签 故需要制定tipID来显示提示信息 
  //利用defaultValue确定默认的选项
  $(":radio[name='sex']").formValidator({tipID:"sexTip",onShow:"请选择性别",onFocus:"别选择错了哦",onCorrect:"bingo，性别对了",defaultValue:['女']})
       .inputValidator({min:1,max:1,onError:"性别忘记选了,请确认"});
  //验证出生日期 使用inputValidator进行输入框内容验证 使用functionValidator进行正则验证
  $("#birthday").formValidator({onShow:"请输入你的出生日期",onFocus:"出生日期不能全为0",onCorrect:"日期选择有效"})
         .inputValidator({type:"string",min:"2000-01-01",onErrorMin:"日期不能早期2000-01-01"})
         .functionValidator({fun:isDate});
  //验证身份证号 使用正则验证是否是身份证号码
  $("#idcard").formValidator({onShow:"请输入身份证号",onFocus:"输入15或18位的身份证",onCorrect:"身份证有效"})
        .functionValidator({fun:isCardID});
  //验证邮箱
  $("#email").formValidator({onShow:"请输入邮箱",onFocus:"邮箱6-100个字符,输入正确了才能离开焦点",onCorrect:"恭喜你,你输对了",defaultValue:"@"})
        //.inputValidator({min:6,max:100,onError:"你输入的邮箱长度非法,请确认"})
        .regexValidator({regExp:"^([\\w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([\\w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$",onError:"你输入的邮箱格式不正确"});
  //验证学历信息 【注】即是验证下拉列表框
  $("#degree").formValidator({onShow:"请选择你的学历",onFocus:"学历必须选择",onCorrect:"谢谢你的配合",defaultValue:"b"})
        .inputValidator({min:1,onError: "你是不是忘记选择学历了!"})
        .defaultPassed();
  //验证国家区号
  $("#Tel_country").formValidator({tipID:"telTip",onShow:"请输入国家区号",onFocus:"国家区号2位数字",onCorrect:"恭喜你,你输对了",defaultValue:"86"})
        .regexValidator({regExp:"^\\d{2}$",onError:"国家区号不正确"});
  $("#Tel_area").formValidator({tipID:"telTip",onShow:"请输入地区区号",onFocus:"地区区号3位或4位数字",onCorrect:"恭喜你,你输对了"})
        .regexValidator({regExp:"^\\d{3,4}$",onError:"地区区号不正确"});
  $("#Tel_number").formValidator({tipID:"telTip",onShow:"请输入电话号码",onFocus:"电话号码7到8位数字",onCorrect:"恭喜你,你输对了"})
        .regexValidator({regExp:"^\\d{7,8}$",onError:"电话号码不正确"});
  $("#Tel_ext").formValidator({tipID:"telTip",onShow:"请输入分机号码",onFocus:"分机号码1到5位数字",onCorrect:"恭喜你,你输对了"})
        .regexValidator({regExp:"^\\d{1,5}$",onError:"分机号码不正确"});
  //验证多选框 【注】多选框的使用情况
  $(":checkbox[name='xqah_one']").formValidator({tipID:"test3Tip",onShow:"请选择你的兴趣爱好（至少选一个）",onFocus:"你至少选择1个",onCorrect:"恭喜你,你选对了"})
        .inputValidator({min:1,onError:"你选的个数不对"});
  //验证手机号码  【注】注意 functionValidator 和 regexValidator的区别 empty:true表示允许为空
  $("#shouji").formValidator({empty:true,onShow:"请输入你的手机号码，可以为空哦",onFocus:"你要是输入了，必须输入正确",onCorrect:"谢谢你的合作",onEmpty:"你真的不想留手机号码啊？"})
        .inputValidator({min:11,max:11,onError:"手机号码必须是11位的,请确认"})
        .regexValidator({regExp:"mobile",dataType:"enum",onError:"你输入的手机号码格式不正确"});;
  //验证多选框
  $("#selectmore").formValidator({onShow:"按住CTRL可以多选",onFocus:"按住CTRL可以多选,至少选择2个",onCorrect:"谢谢你的合作",defaultValue:["0","2"]})
        .inputValidator({min:2,onError:"至少选择2个"});
  //输入中文 仅支持中文并且要求在10个字以上
  $("#ms").formValidator({onShowText:"这家伙很懒，什么都没有留下。",onShow:"请输入你的描述",onFocus:"描述至少要输入10个汉字",onCorrect:"恭喜你,你输对了",defaultValue:"这家伙很懒，什么都没有留下。"})
        .inputValidator({min:20,onError:"你输入的描述长度不正确,请确认"})
        .regexValidator({regExp:"chinese",dataType:"enum",onError:"仅支持中文"});
  //验证密码 compareValidator 【注】 desID operateor 
  $("#password1").formValidator({onShow:"请输入密码",onFocus:"至少1个长度",onCorrect:"密码合法"})
        .inputValidator({min:1,empty:{leftEmpty:false,rightEmpty:false,emptyError:"密码两边不能有空符号"},onError:"密码不能为空,请确认"});
  $("#password2").formValidator({onShow:"输再次输入密码",onFocus:"至少1个长度",onCorrect:"密码一致"})
        .inputValidator({min:1,empty:{leftEmpty:false,rightEmpty:false,emptyError:"重复密码两边不能有空符号"},onError:"重复密码不能为空,请确认"})
        .compareValidator({desID:"password1",operateor:"=",onError:"2次密码不一致,请确认"});

});

</script>
</body>
</html>

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

jQuery插件formValidator实现表单验证

- Author -

HiveDark

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

Javascript 相关文章推荐
理解JavaScript中的对象 推荐
Jan 09 Javascript
JavaScript中的16进制字符(改进)
Nov 21 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
Dec 30 Javascript
JS控制日期显示的小例子
Nov 23 Javascript
js加载读取内容及显示与隐藏div示例
Feb 13 Javascript
AngularJS内置指令
Feb 04 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
Nov 10 Javascript
详解React Native顶|底部导航使用小技巧
Sep 14 Javascript
Vue中使用Sortable的示例代码
Apr 07 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
vue+高德地图实现地图搜索及点击定位操作
Sep 09 Javascript
超链接怎么正确调用javascript函数
May 23 #Javascript
以WordPress为例讲解jQuery美化页面Title的方法
May 23 #Javascript
jQuery中选择器的基础使用教程
May 23 #Javascript
基于BootStrap的图片轮播效果展示实例代码
May 23 #Javascript
AngularJS上拉加载问题解决方法
May 23 #Javascript
在IE8上JS实现combobox支持拼音检索功能
May 23 #Javascript
浅析JavaScript 箭头函数 generator Date JSON
May 23 #Javascript
摩纳哥购物网站(1) 秘鲁购物网站(1) 缅甸购物网站(1) 越南购物网站(9) 匈牙利购物网站(11) 亚洲购物网站(6) 巴基斯坦购物网站(2) 菲律宾购物网站(13) 乌克兰购物网站(27) 北美洲购物网站(1)
You might like
php pcntl_fork和pcntl_fork 的用法
2009/04/13 PHP
Session服务器配置指南与使用经验的深入解析
2013/06/17 PHP
php中{}大括号是什么意思
2013/12/01 PHP
PHP ignore_user_abort函数详细介绍和使用实例
2014/07/15 PHP
php获取图片信息的方法详解
2015/12/10 PHP
PHP中trait使用方法详细介绍
2017/05/21 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
javascript this用法小结
2008/12/19 Javascript
jquery实现显示已选用户
2014/07/21 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
jQuery实现下拉框选择图片功能实例
2015/08/08 Javascript
js对字符串进行编码的方法总结(推荐)
2016/11/10 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
使用BootStrap实现标签切换原理解析
2017/03/14 Javascript
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
2018/01/22 jQuery
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
2018/01/24 Javascript
解决vue单页面应用中动态修改title问题
2019/06/09 Javascript
uni-app使用微信小程序云函数的步骤示例
2020/05/22 Javascript
详解Python中的array数组模块相关使用
2016/07/05 Python
Python 实现删除某路径下文件及文件夹的实例讲解
2018/04/24 Python
解决Python2.7中IDLE启动没有反应的问题
2018/11/30 Python
python利用itertools生成密码字典并多线程撞库破解rar密码
2019/08/12 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
你应该知道的Python3.6、3.7、3.8新特性小结
2020/05/12 Python
python 实现围棋游戏(纯tkinter gui)
2020/11/13 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
Html5中的桌面通知Notification的实现
2018/09/25 HTML / CSS
Java中的异常处理机制的简单原理和应用
2013/04/27 面试题
大二学期个人自我评价
2014/01/13 职场文书
希特勒经典演讲稿
2014/05/19 职场文书
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书
鼋头渚导游词
2015/02/05 职场文书
师德师风主题教育活动总结
2015/05/07 职场文书
网聊搭讪开场白
2015/05/28 职场文书
MySQL中rank() over、dense_rank() over、row_number() over用法介绍
2022/03/23 MySQL