jquery.validationEngine表单验证

最新推荐文章于 2020-02-25 17:27:11 发布

TinaTxt

最新推荐文章于 2020-02-25 17:27:11 发布

阅读量487

点赞数

分类专栏： js jquery html

本文链接：https://blog.csdn.net/TinaTxt/article/details/74530540

版权

js jquery 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

html

6 篇文章 0 订阅

订阅专栏

一、需要插件

<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="js/jquery.validationEngine.js" ></script>
<script type="text/javascript" src="js/jquery.validationEngine-zh_CN.js" ></script>
<link rel="stylesheet" href="css/jquery.validationEngine.css" />

二、demo

自定义验证可以在jquery.validationEngine-zh_CN.js中增加

<!DOCTYPE html>
<html>


	<head>
		<meta charset="utf-8" />
		<title>表单验证测试</title>
		<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
		<script type="text/javascript" src="js/jquery.validationEngine.js"></script>
		<script type="text/javascript" src="js/jquery.validationEngine-zh_CN.js"></script>
		<link rel="stylesheet" href="css/jquery.validationEngine.css" />
	</head>


	<body>
		<form id="signupForm" method="get" action="">
			<p>
				<label for="username">用户名</label>
				<input id="username" name="username" placeholder="请输入用户名..." class="validate[required,custom[userName],minSize[4],maxSize[20]]" />
			</p>
			<p>
				<label for="telephone">手机号</label>
				<input id="telephone" name="telephone" placeholder="请输入手机号码" class="validate[required,custom[telephone]]" />
			</p>
			<p>
				<label for="password">密码</label>
				<input id="password" name="password" type="password" placeholder="请输入密码" class="validate[required,custom[password],minSize[6],maxSize[20]]" />
			</p>
			<p>
				<label for="confirm_password">确认密码</label>
				<input id="confirm_password" name="confirm_password" type="password" placeholder="请确认密码" class="validate[required,equals[password]]" />
			</p>
			<button type="submit">提交</button>
		</form>
		<script>
			$().ready(function() {
				$("#signupForm").validationEngine({
					maxErrorsPerField: 1 ,   // 参数值为数值 
					showOneMessage: true ,  //提交测试后只显示第一个错误
					autoHidePrompt: true ,  //自动隐藏提示信息，以及设置延时多久自动隐藏。
    				autoHideDelay: 2000 ,   // 单位毫秒（ms） 
    				autoPositionUpdate: true //自动调整提示信息位置
				});
				$("#signupForm").submit(function(e) {
					var param = $("#signupForm").validationEngine("validate");
					if(param){
						alert("ok");
					}else{
						alert("no ok");
					}
				});
			});
		</script>
	</body>


</html>

三、验证类型

<!-- 
注：验证规则均写在 validate[] 中，如有多条规则，用英文逗号(,) 分割。 
例：validate[required,minSize[6],custom[onlyLetterNumber]] 
-->

名称	示例	说明
required	validate[required]	表示必填项
optional	validate[optional]	表示可选项。若不输入，不要求必填，若有输入，则验证其是否符合要求。
dateRange[name]	validate[dateRange[grp1]]	验证日期范围
dateTimeRange[name]	validate[dateTimeRange[grp1]]	验证日期及时间范围
minSize[int]	validate[minSize[6]]	最少输入字符数
maxSize[int]	validate[maxSize[20]]	最多输入字符数
groupRequired[name]	validate[groupRequired[grp2]]	群组中至少输入一项
min[int]	validate[min[1]]	最小值（该项为数字的最小值，注意与 minSize 的区分）
max[int]	validate[max[9999]]	最大值（该项为数字的最大值，注意与 maxSize 的区分）
past[date]	validate[past[2012/12/20]]	日期必需在 date 或 date 的未来。date 格式可写作 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D 或 now
future[date]	validate[future[now]]	日期必须在 data 或 date 的过去。date 格式可写作 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D 或 now
maxCheckbox[int]	validate[maxCheckbox[2]]	最多选取的项目数（用于Checkbox）
minCheckbox	validate[minCheckbox[2]]	最少选取的项目数（用于Checkbox）
equals	validate[equals[id]]	当前控件值需与 id 这个控件的值相同
phone	validate[custom[phone]]	验证电话号码
email	validate[custom[email]]	验证 Email 地址
integer	validate[custom[integer]]	验证整数
number	validate[custom[number]]	验证数字
date	validate[custom[date]]	验证日期，格式为 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D
dateFormat	validate[custom[dateFormat]]	验证日期格式，格式为 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D
dateTimeFormat	validate[custom[dateTimeFormat]]	验证日期及时间格式，格式为：YYYY/MM/DD hh:mm:ss AM\|PM
ipv4	validate[custom[ipv4]]	验证 ipv4 地址
url	validate[custom[url]]	验证 url 地址，需以 http://、https:// 或 ftp:// 开头
onlyNumberSp	validate[custom[onlyNumberSp]]	只接受填数字和空格
onlyLetterSp	validate[custom[onlyLetterSp]]	只接受填英文字母（大小写）和单引号(')
onlyLetterNumber	validate[custom[onlyLetterNumber]]	只接受数字和英文字母
ajax	validate[ajax[ajaxUserCallPhp]]	在验证规则中自定义 "ajaxUserCallPhp":{ "url":"phpajax/ajaxValidateFieldUser.PHP", "extraData":"name=eric", "alertTextOk":"* 此帐号名称可以使用", "alertText":"* 此名称已被其他人使用", "alertTextLoad":"* 正在确认帐号名称是否有其他人使用，请稍等。" }
funcCall	validate[funcCall[functionName]]	调用外部函数

四、api方法

名称	示例	说明
attach	$("#form_id").validationEngine("attach");	注册表单验证事件
detach	$("#form_id").validationEngine("detach");	取消注册表单验证事件
validate	alert($("#form_id").validationEngine("validate"));	验证表单，返回结果 true 或 false
validateField	alert($("#form_id").validationEngine("validateField","#element_id"));	验证单个控件，返回结果 true 或 false
showPrompt	$("#element_id").validationEngine("showPrompt","提示内容","load");	在该元素上创建一个提示内容，3 种状态："pass", "error", "load"
hidePrompt	$("#element_id").validationEngine("hidePrompt");	隐藏该元素的提示内容
hide	$("#form_id").validationEngine("hide");	关闭表单中的提示
hideAll	$("#form_id").validationEngine("hideAll");	关闭页面上得所有提示
updatePromptsPosition	$("#form_id").validationEngine("updatePromptsPosition")	更新提示层的位置

TinaTxt

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery.validationEngine表单验证

一、需要插件二、demo自定义验证可以在jquery.validationEngine-zh_CN.js中增加表单验证测试 Firstname email Password 确认密码
复制链接

扫一扫