jQuery插件formValidator实现表单验证
本文实例为大家分享了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表单验证插件开源了 含API帮助、源码、示例
2008-07-22 14:47 bug描述:ajaxValidator函数在提交后发生错误,停留在本页面后,再次触发校验会让提示内容一直处于onload状态. 这个bug已经修复,请重新下载. 2008/7/17 14:12:00 jQuery formValidator 3.1ver 1.为inputValidator增加empty属性.用于设置控件文本值是否允许两边为空.具体请看demo1里的密码的校验代码. 该属性是个对象,默认值{leftempty:true,rightempty:tr
-
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
query formValidator插件非常好用,但是有一个严重的Bug,在使用ajax验证的时候,如果输入框的内容已经存在,把鼠标放到输入框,不做任何修改再离开,则会提示错误, 这是这个插件犯的一个很愚蠢的错误 复制代码 代码如下: oneIsValid: function(id, index) { var returnObj = new Object(); returnObj.id = id; returnObj.ajax = -1; returnObj.errormsg = ""
-
jQuery表单验证插件formValidator(改进版)
枚举对象的使用: 复制代码 代码如下: //各种验证方式支持的标签类型 sustainType: function (elem, setting) { var srcTag = elem.tagName; var stype = elem.type; switch (setting.validatetype) { case _validTypeEnum.InitValidator: return true; case _validTypeEnum.InputValidator: if (srcT
-
jquery表单验证使用插件formValidator
1.首先在项目中添加必备js与css 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=&quo
-
jQuery插件formValidator自定义函数扩展功能实例详解
本文实例讲述了jQuery插件formValidator自定义函数扩展功能的方法.分享给大家供大家参考,具体如下: jQuery formValidator表单验证插件是什么?感兴趣的读者可参考<jQuery formValidator表单验证插件>以及本站其他相关文档 此处省略若干文字. 实际项目中的表单应用是多种多样的,随之而来的验证也是多变的,但Jquery formValidator为我们提供了自定义函数接口,个人认为是其最主要的强大之处.废话不多说,直接实例. 例一:座机和手机,至少
-
Jquery表单验证插件formValidator使用方法
使用步骤: 1.首先在项目中添加必备js与css 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
-
formvalidator验证插件中有关ajax验证问题
jquery formvalidator插件是不错的国产验证插件了,做点普通的校验也是很方便的,但最近遇到个问题,发现如果表单整个表单是AJAX提交时,就不能按传统的做法了,比如: 复制代码 代码如下: $ajax.post("...............") $.formValidator.initConfig({formID:"applyForm",onError:function(msg){alert(msg)}}); $("#reason&quo
-
jQuery formValidator表单验证
作为一名程序员,在解决工作中遇到问题之后,做一些总结是有必要的,既方便总结温习相关知识点,也为广大的程序员提供了一些工作经历,给予同行一面明鉴. html部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>formValidator</title> <script src="js/jq
-
formValidator3.3的ajaxValidator一些异常分析
ajaxvalidator是大家问的最多的问题,修正一个bug(感谢网友"じ龍峸√"),并把大家最关心的问题,再做一次阐述. bug现象:无论校验有没有校验通过,当控件再次得到焦点而再次失去焦点的时候tip里的提示就会停滞在得到焦点的提示 历次升级的相关记录: a.为AjaxValidator添加一个addidvalue属性(是否自动添加id和值到url参数后面) 为了修复AjaxValidator在配置信息的时候,取不到运行时候值的bug,插件将自动在url后面自动添加,形式为&qu
-
jQuery插件formValidator实现表单验证
本文实例为大家分享了formValidator实现表单验证的具体代码,供大家参考,具体内容如下 测试效果: 所需的库文件: 实现代码: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitiona
-
轻松学习jQuery插件EasyUI EasyUI表单验证
一.EasyUI创建异步提交表单 本文向您展示如何通过 easyui 提交一个表单(Form).我们创建一个带有 name.email 和 phone 字段的表单.通过使用 easyui 表单(form)插件来改变表单(form)为 ajax 表单(form).表单(form)提交所有字段到后台服务器,服务器处理和发送一些数据返回到前端页面.我们接收返回数据,并将它显示出来. 创建表单(Form) <div style="padding:3px 2px;border-bottom:1px
-
Jquery插件easyUi实现表单验证示例
要实现的功能:在做添加学生信息的时候,利用easyui的验证功能判断 学号是否重复和学号只能为数字 最终效果如下图: 但在做这个的过程中,遇到了一系列的问题: 扩展validatebox的验证方法,最开始的验证代码如下: //学号格式只能为数字 ****//这里没有问题**** number: {//value值为文本框中的值 validator: function (value) { var reg = /^[0-9]*$/; return reg.test(value); }, messag
-
jQuery基于正则表达式的表单验证功能示例
本文实例讲述了jQuery基于正则表达式的表单验证功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l
-
jQuery扩展+xml实现表单验证功能的方法
本文实例讲述了jQuery扩展+xml实现表单验证功能的方法.分享给大家供大家参考,具体如下: 此处表单验证jQuery 引用jquery.1.8.2.js,md5.js 扩展提示信息,扩展验证方法(如果有正则表达式的话可以用默认方法) String.prototype.trim=function(){return this.replace(/(^\s*)|(\s*$)/g,"");};//ie下解决trim 方法问题 (function($) { $.elementVal = new
-
基于Bootstrap 3 JQuery及RegExp的表单验证功能
昨天小编在研究regexp,今天小编抽空给大家分享表单验证. 主要功能: 用户名必须在5-25个字符之内,而且只能使用字母.数字或下划线,否则不让通过. 密码必须在5-25个字符之内,而且只能使用字母或数字(大小写敏感),否则不让通过. 根据不同密码程度,下面的low.medium和high会改变背景颜色. 确认密码就不说啦. 验证码只是做了个样子,反正就是设成必须是5个数字. checkbox必须打勾啦,不然不让通过. 点击注册按钮,会有相应的提示框(可关闭)弹出. HTML: <body>
-
jquery实现简单的表单验证
jquery如何实现简单的表单验证,我们先跟大家分享一下实现思路. 大概思路: 先为每一个required添加必填的标记,用each()方法来实现. 在each()方法中先是创建一个元素,然后通过append()方法将创建的元素加入到父元素后面. 这里面的this用的很精髓,每一次的this都对应着相应的input元素,然后获取相应的父元素. 然后为input元素添加失去焦点事件.然后进行用户名.邮件的验证. 这里用了一个判断is(),如果是用户名,做相应的处理,如果是邮件做相应的验证. 在jQ
-
jQuery之简单的表单验证实例
html部分: <body> <form method="post" action=""> <div class="int"> <label for="username">用户名:</label> <!-- 为每个需要的元素添加required --> <input type="text" id="username&qu
-
基于Bootstrap+jQuery.validate实现Form表单验证
基于Bootstrap jQuery.validate Form表单验证实践项目结构 : github 上源码地址:https://github.com/starzou/front-end-example 1.form 表单代码[html] 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>Bootstrap Form Template</title>
-
Jquery组件easyUi实现表单验证示例
本文实例为大家分享了Jquery easyUi表单验证实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic Form - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" hr