表单验证插件jQuery Validation Engine使用介绍
jQuery Validation Engine是一款非常好用的表单验证工具,对常见的验证如:非空、长度、数字验证等,都有非常好的支持。详细可参考:http://code.ciaoca.com/jquery/validation-engine/
下面在一个jsp页面举了一个简单的例子,如要使用jQuery Validation Engine插件,可参考下面的例子并结合官网介绍使用。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>新增用户</title>
<script src="js/jquery.js"></script>
<script src="js/jquery.validationEngine-zh_CN.js"></script>
<script src="js/jquery.validationEngine.js"></script>
<!-- jquery.validationEngine-zh_CN.js 为配置文件,可根据需求自行调整或增加,也可以更换为其他语言配置文件 -->
</head>
<script type="text/javascript">
$(function(){//页面加载完成后就设置表单自动验证的规则//userForm为表单的id$("#userForm").validationEngine({autoHidePrompt:false,//自动隐藏showOnMouseOver:false,//当鼠标移出时触发//autoHideDelay:2, //自动隐藏延迟时间promptPosition:'bottomLeft',//提示信息的位置inlineValidation: true,//是否即时验证,false为提交表单时验证,默认true failure : function() {layer.message("验证失败,请检查");return false; },//验证失败时调用的函数ajaxFormValidation: true,//开始AJAX验证success : function() {// $("#addForm").submit();}//验证通过时调用的函数 //onAjaxFormComplete: ajaxValidationCallback});$("#submit").click(function(){//在表单提交时,先验证字段是否满足要求,如不满足要求,则$("userForm").validationEngine("validate")返回false//不能提交并在字段位置提示错误信息。if(!$("#userForm").validationEngine("validate")){return;}var options = {dataType:"json",data:{},success:function(json){layer.msg("提交成功");},error:function(json){layer.msg("系统错误,请联系管理员");}};$('#userForm').ajaxSubmit(options);})
})//将select选中内容赋给对应的字段
function setName(select){$("#"+select.id.replace("Id","Name")).val(select.selectedOptions[0].label);
}//关闭
function closeWindow(){parent.closeWin();
}
</script>
<body>
<form action="${_baseUrl}/userController/insertUser" id="userForm" name="userForm" method="post" enctype="multipart/form-data">
<input type="hidden" name="token" value="${token}" />
<table class="table table-bordered layout_table" style="margin-bottom: 20px"><tbody ><tr><td height="50" width="15%" align="center"><span style="color: #f00">*</span>用户名称</td><td width="35%" valign="middle" align="left" ><div><input type="text" class="validate[required,maxSize[100]] text_placeholder" name="userName" id="userName" value="" placeholder="请输入..."/></div></td><td height="50" width="15%" align="center"><span style="color: #f00">*</span>用户性别</td><td width="35%" valign="middle"><select class="validate[required]" name="sexId" id="sexId" onchange="setName(this)"><option value ="">请选择</option><option value ="1">男</option><option value ="0">女</option></select><input type="hidden" id="sexName" name="sexName" value="" /></td></tr><tr> <td height="50" width="15%" align="center"><span style="color: #f00">*</span>用户年龄</td><td width="35%" valign="middle"><input type="text" class="validate[custom[integer]] text_placeholder" name="age" id="age" value="" placeholder="请输入..."/></td> <td height="50" width="15%" align="center"><span style="color: #f00">*</span>用户功能</td><td width="35%" valign="middle" align="left"><input class='validate[required]' type='checkbox' name='softwareTestGrade' value='1'/>首页<input class='validate[required]' type='checkbox' name='softwareTestGrade' value='2'/>菜单<input class='validate[required]' type='checkbox' name='softwareTestGrade' value='3'/>后台</td></tr></tbody>
</table>
</form>
<div class="submit_group"><a href="javascript:;" class="submit" id="submit">提交</a><a href="javascript:;" class="cancel" onclick="closeWindow();">取消</a>
</div>
</body>
</html>
表单验证插件jQuery Validation Engine使用介绍相关推荐
- jQuery 表单验证插件 jQuery Validation Engine 使用
jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...
- jQuery 表单验证插件jQuery Validation Engine用法详解
功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身拥有丰富的验证规则外,还可以添加自定义的验证规则. jQuery Validation ...
- 表单验证插件:jQuery Validation Engine
maxErrorsPerField 在老版本中,如果我们设置验证规则为:validate[required,minSize[6],maxSize[20],如果什么都没有填,就会出现 3 个提示有木有! ...
- 轻量级的jQuery表单验证插件 - HAPPY.js
为什么80%的码农都做不了架构师?>>> 日期:2012-9-14 来源:GBin1.com 在线演示 本地下载 功能强大的表单验证插件很多,以前我们介绍过validati ...
- jQuery 表单验证插件,jQuery Validation Engine用法详解
jQuery 表单验证插件,jQuery Validation Engine用法详解 功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身 ...
- 基于jQuery的表单验证插件Validation Engine
Validation Engine是一款基于Jquery的js表单验证插件.相对于之前的传统表单验证工具,其优点是自定义验证内容更广泛以及与AJAX的方便整合. 附件提供了该插件,解压密码为:im48 ...
- jQuery学习之:Validation表单验证插件
http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...
- 12个方便易用的jquery表单验证插件
绝大部分网站都是开放注册的,而注册就需要使用表单验证,因为网站都需要对注册用户的信息安全性和合理性做出判断,表单的注册都应该具备完善的验证方式,比如注册使用的手机号是否是真实的?用户填写的验证码是否正 ...
- jQuery框架学习第十一天:实战jQuery表单验证及jQuery自动完成提示插件
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQ ...
最新文章
- for 循环里调用ajax,for循环中ajax异步问题如何解决?
- Golang学习之GOROOT、PATH、GOPATH及go get
- rabbitmq延迟队列实现
- [转载]oracle常用经典SQL查询
- 05 Django REST Framework 分页
- async-http java_使用Java和async-http-client通过基本身份验证获取URL内容 - java
- 【洛谷1640】[SCOI2010]连续攻击游戏
- PC服务器实现海量数据存取的方法
- js延时函数setTimeout
- 【Pix4d精品教程】Pix4d模型成果导出OSGB并加载OSGB到EPS进行三维测图完美案例教程
- Basler相机开发流程
- hdu6070 Dirt Ratio(二分+线段树)
- 记录帖-电脑版微信多开
- 抖音拍摄脚本怎么写,掌握这几点快速拍摄爆款视频丨国仁网络资讯
- echarts中自定义图片的矢量路径设置
- vue实现ToDoList待办事项/清单
- 慕课作业互评(使用脚本自动互评)
- 数据中心与云数据中心
- 解决servers警告source did not find amatching property
- 群晖DSM-配置Gotify短信通知方式