表单验证


代码
<div class="list-content-0">
	<!--块元素-->
	<div class="block">
		<!--正文内容-->
		<div class="main">
			<!--表单-->
			<form id="form">
				<!--输入框-->
				<div class="unit clear">
					<div class="left">
						<p class="subtitle">用户名</p>
					</div>
					<div class="right">
						<input type="text" name="username" error-label="用户名" data-type="手机号|邮箱" error-msg="手机号或邮箱格式错误" placeholder="请输入手机号或邮箱" />
					</div>
				</div>
				<!--分割线-->
				<p class="divider"></p>

				<!--单选框-->
				<div class="unit clear">
					<div class="left">
						<p class="subtitle">性别</p>
					</div>
					<div class="right">
						<input type="radio" class="fill" name="sex" checked/>男
						<input type="radio" class="fill" name="sex" />女<br>
					</div>
				</div>
				<!--分割线-->
				<p class="divider"></p>

				<!--复选框-->
				<div class="unit clear">
					<div class="left">
						<p class="subtitle">兴趣</p>
					</div>
					<div class="right">
						<input type="checkbox" class="fill" name="interest" />吃饭
						<input type="checkbox" class="fill" name="interest" />睡觉
					</div>
				</div>
				<!--分割线-->
				<p class="divider"></p>

				<!--文本域-->
				<div class="unit clear">
					<div class="left">
						<p class="subtitle">文本域</p>
					</div>
					<div class="right">
						<textarea class="desc" placeholder="请填写简介"></textarea>
					</div>
				</div>
				<!--分割线-->
				<p class="divider"></p>

				<!--提交按钮-->
				<div class="unit clear">
					<!--表单提交时,必须是input元素,并指定type类型为button,否则ajax提交时,会返回error回调函数-->
					<input type="button" id="return" class="button red full" value="返回" />
					<input type="button" id="save" class="button green full" value="保存" />
				</div>
			</form>
		</div>
	</div>
</div>

<script>
	// 监听点击保存按钮事件
	$("#save").click(function() {
		// 表单验证函数
		if (javaexVerify()==true) {
			// 返回错误信息时,可以添加自定义异常提示
			// addErrorMsg("用户名不存在");
			// 提交
			// $("#form").submit();
			alert("验证通过");
		} else {
			return false;
		}
	});

	// 监听点击返回按钮事件
	$("#return").click(function() {
		alert("返回");
		return false;
	});
</script>
演示

表单验证说明
框架会自动识别验证项的标签

error-label:验证主体(必填,用于提示用户是哪一项)
data-type:验证类型(必填)
error-msg:错误提示

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

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

如果仅仅是验证必填的话,如判断select下拉选择框有没有选。则只需要 data-type="必填" 即可,不需要 error-msg 属性,示例:
<input type="text" error-label="学历" data-type="必填" />

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

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

框架内置验证类型
序号 验证类型名称 说明
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 必填 必填