easyUI入门《十六、validatebox基础：校验框》

最新推荐文章于 2020-06-03 11:31:11 发布

leijiahui

最新推荐文章于 2020-06-03 11:31:11 发布

阅读量171

点赞数

分类专栏： easyUI

本文链接：https://blog.csdn.net/leijiahui/article/details/82431044

版权

easyUI 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<!--引入基本库-->
		<script type="text/javascript" src="jquery-easyui-1.5.5.4/jquery.min.js"></script>
		<script type="text/javascript" src="jquery-easyui-1.5.5.4/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="jquery-easyui-1.5.5.4/locale/easyui-lang-zh_CN.js"></script>
		<link rel="stylesheet" href="jquery-easyui-1.5.5.4/themes/default/easyui.css" />
		<link rel="stylesheet" href="jquery-easyui-1.5.5.4/themes/icon.css" />
	</head>

	<body>
		<form action="#" method="post">
			<p>必填<input class="easyui-validatebox" data-options="required:true,validType:'length[3,10]'" name="username" /></p>
			<p>邮件<input class="easyui-validatebox" data-options="required:true,validType:'email',validateOnCreate:false" name="email" /></p>
			<p>网址<input class="easyui-validatebox" data-options="required:true,validType:'url'" name="url" /></p>
			<p>
				js<input id="vv" />
			</p>
			<script type="text/javascript">
				$(function() {
					$("#vv").validatebox({
						required: true,
						validType: 'email'
					})
				})
			</script>

		</form>

		<p>
			密码<input class="easyui-validatebox" id="pwd" data-options="required:true" />
		</p>
		<p>
			确认密码<input class="easyui-validatebox" data-options="required:true" validType="equals['#pwd']" />
		</p>
		<script type="text/javascript">
			$.extend($.fn.validatebox.defaults.rules, {
				equals: {
					validator: function(value, param) {
						return value == $(param[0]).val();
					},
					message: 'Field do not match'
				}
			});
		</script>
	</body>

</html>