您的位置：首页 > 产品设计 > UI/UE

easyui表单验证

2014-12-05 09:39 302 查看
html：

<body>
	<div id="panel" style="width:500px;height:400px;" class="easyui-panel" title="表单验证">
		<form action="" method="post">
				用户名 ： <input type="text" required="true" name="username" class="easyui-validatebox" validType="midLength[3,10]" missingMessage="不许为空" /><br />
		
				密   码 : <input type="password" name="pwd" class="easyui-validatebox" validType="pwdLength[3]" />	<br /><br />
				<a href="#" class="easyui-linkbutton">提交</a>
		</form>
	</div>
</body>


js：

<script>

		//自定义表单验证
		$.extend($.fn.validatebox.defaults.rules, {   
			  midLength : {   	
				  validator: function(value, param){   	
					  return value.length >= param[0] && value.length <= param[1];   
				  },   
				  message: '长度必须在3-10个之间'  
			  },
			  pwdLength : {
			  	  validator: function(value, param){   	
					  return value.length == param[0];   
				  },   
				  message: '长度必须为3'
			  }   
 	   });

</script>


说明：自定义校验

value表示：页面输入的值

param表示：validType传入的参数值

easyui实现的校验有：

email：匹配 email 正则表达式规则
url：匹配 URL 正则表达式规则
length[0,100]：允许从 x 到 y 个字符
remote['http://.../action.do','paramName']：发送 ajax 请求来验证值，成功时返回 'true' 。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航