表单验证


重要说明

ajax提交表单时,如果input type为submit,则会无限进入error回调函数

原生表单提交时,如果表单内出现id或name为submit,则无法提交

要实现验证,必须没有兄弟元素,也就是相对于父级来说,它是独子。如果他存在兄弟元素,你只需要给它套一层<span></span>之类的即可

表单提交验证演示
*

登录账号

性别

兴趣

  • 吃饭
  • 睡觉
  • 打豆豆

学历

注册时间

简介

请填写个人简介。简介中不得包含令人反感的信息,且长度应在10到255个字符之间。

标签

代码
<!--全部主体内容-->
<div class="list-content">
	<!--块元素-->
	<div class="block">
		<!--修饰块元素名称-->
		<div class="banner">
			<p class="tab fixed">表单提交</p>
		</div>
	
		<!--正文内容-->
		<div class="main">
			<form id="form">
				<!--文本框-->
				<div class="unit clear">
					<div class="left"><span class="required">*</span><p class="subtitle">登录账号</p></div>
					<div class="right">
						<input type="text" class="text" data-type="手机号|邮箱" error-msg="手机号或邮箱格式错误" error-pos="42" placeholder="请输入手机号或邮箱" />
					</div>
				</div>
				
				<!--单选框-->
				<div class="unit clear">
					<div class="left"><p class="subtitle">性别</p></div>
					<div class="right">
						<ul class="equal-8 clear">
							<li><input type="radio" class="fill" name="sex" checked/>男</li>
							<li><input type="radio" class="fill" name="sex" />女</li>
						</ul>
					</div>
				</div>
				
				<!--复选框-->
				<div class="unit clear">
					<div class="left"><p class="subtitle">兴趣</p></div>
					<div class="right">
						<ul class="equal-8 clear">
							<li><input type="checkbox" class="fill" name="interest" />吃饭</li>
							<li><input type="checkbox" class="fill" name="interest" />睡觉</li>
							<li><input type="checkbox" class="fill" name="interest" />打豆豆</li>
						</ul>
					</div>
				</div>
				
				<!--下拉选择框-->
				<div class="unit clear">
					<div class="left"><p class="subtitle">学历</p></div>
					<div class="right">
						<select id="select">
							<option value="">请选择</option>
							<option value="1">大专</option>
							<option value="2">本科</option>
							<option value="3">硕士</option>
							<option value="4">博士</option>
							<option value="5">博士后</option>
						</select>
					</div>
				</div>
				
				<!--日期选择框-->
				<div class="unit clear">
					<div class="left"><p class="subtitle">注册时间</p></div>
					<div class="right">
						<input type="text" id="date" class="date" style="width: 200px;" value="" readonly/>
					</div>
				</div>
				
				<!--文本域-->
				<div class="unit clear">
					<div class="left"><p class="subtitle">简介</p></div>
					<div class="right">
						<textarea class="desc" placeholder="请填写简介"></textarea>
						<!--提示说明-->
						<p class="hint">请填写个人简介。简介中不得包含令人反感的信息,且长度应在10到255个字符之间。</p>
					</div>
				</div>
				
				<!--标签-->
				<div class="unit clear">
					<div class="left"><p class="subtitle">标签</p></div>
					<div class="right">
						<div class="tagbox"></div>
						<input type="hidden" id="tag" name="tag" value="" />
					</div>
				</div>
				
				<!--提交按钮-->
				<div class="unit clear" style="width: 800px;">
					<div style="text-align: center;">
						<!--表单提交时,必须是input元素,并指定type类型为button,否则ajax提交时,会返回error回调函数-->
						<input type="button" id="return" class="button no" value="返回" />
						<input type="button" id="save" class="button yes" value="保存" />
					</div>
				</div>
			</form>
		</div>
	</div>
</div>

<script>
	javaex.select({
		id : "select",
		isSearch : false
	});
	
	javaex.date({
		id : "date",	// 承载日期组件的id
		isTime : true,
		date : "2018-04-15 01:01:01",	// 选择的日期
		// 重新选择日期之后返回一个时间对象
		callback : function(rtn) {
			alert(rtn.date);
		}
	});
	
	javaex.tag({
		id : "tag"
	});
	
	// 监听点击保存按钮事件
	$("#save").click(function() {
		// 表单验证函数
		if (javaexVerify()) {
			// 返回错误信息时,可以添加自定义异常提示。参数为元素id和提示
			// addErrorMsg("username", "用户名不存在");
			// 提交
			// $("#form").submit();
			alert("验证通过");
		}
	});

	// 监听点击返回按钮事件
	$("#return").click(function() {
		alert("返回");
		// window.location.href = document.referrer;
	});
</script>

表单验证说明
data-type:验证类型(必填)
error-msg:错误提示
error-pos:错误提示距离(默认缺省值为42,根据实际情况调整)

示例:
<input type="text" data-type="金额" error-msg="金额格式错误" />

满足多个验证类型中的一个即通过验证,示例:
<input type="text" data-type="手机号|邮箱" error-msg="手机号或邮箱格式错误" />

如果你想允许该项为空,但是一旦有值,又要验证其类型,可以这样写:
<input type="text" data-type="空|非负整数" error-msg="数字格式不正确" />

如果仅仅是验证必填,则只需要 data-type="必填" 即可,不需要 error-msg 属性,示例:
<input type="text" data-type="必填" />

调用javaexVerify()函数进行表单验证,返回true时,代表验证通过

验证通过后,如果你想添加异常信息,如用户名已存在。可以调用 addErrorMsg(参数1, 参数2) 函数添加
参数1:元素的id (input之类的id)
参数2:自定义提示

框架内置验证类型
序号 验证类型名称 说明
1 金额 0 + 正整数 + 最多2位小数(正数)
2 整数 整数
3 正整数 正整数
4 负整数 负整数
5 非负整数 正整数 + 0
6 非正整数 负整数 + 0
7 正小数 正小数
8 负小数 负小数
9 非负小数 0 + 正小数
10 非正小数 0 + 负小数
11 邮箱 邮箱
12 手机号 手机号
13 身份证号 身份证号
14 中文 中文
15 英文字母 英文字母
16 英文字母或数字 英文字母或数字
17 QQ QQ号
18 车牌号 车牌号
19 登录名 只能输入5-10个以字母开头,可带数字的字符串
20 密码 6到16位字母或数字或它们的组合
21 密码强 字母+数字+特殊字符组合 这个正则表达式没写好,长度需要自己做限制判断
22 必填 必填