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

easyui源码翻译1.32--ValidateBox（验证框）

2014-01-01 23:12 381 查看

前言

使用$.fn.validatebox.defaults重写默认值对象。下载该插件翻译源码

validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效。如果用户输入了无效的值，它将会更改输入框的背景颜色，并且显示警告图标和提示信息。该验证框可以结合form(表单)插件并防止表单重复提交。

源码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic ValidateBox - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
<script src="../../plugins2/jquery.parser.js"></script>
<script src="../../plugins2/jquery.validatebox.js"></script>
</head>
<body>
<h2>Basic ValidateBox</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>It's easy to add validate logic to a input box.</div>
</div>
<div style="margin:10px 0;"></div>
<div class="easyui-panel" title="Register" style="width:400px;padding:10px">
<table>
<tr>
<td>User Name:</td>
<td><input class="easyui-validatebox" data-options="required:true,validType:'length[3,10]'"></td>
</tr>
<tr>
<td>Email:</td>
<td><input class="easyui-validatebox" data-options="required:true,validType:'email'"></td>
</tr>
<tr>
<td>Birthday:</td>
<td><input class="easyui-datebox"></td>
</tr>
<tr>
<td>URL:</td>
<td><input class="easyui-validatebox" data-options="required:true,validType:'url'"></td>
</tr>
<tr>
<td>Phone:</td>
<td><input class="easyui-validatebox" data-options="required:true"></td>
</tr>
</table>
</div>

</body>
</html>

View Code

插件效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航