📅 最后修改于: 2023-12-03 15:32:21.293000 🧑 作者: Mango
jqxValidator 是一个用于表单验证的 jQuery 插件，它提供了多种验证规则和可自定义的错误信息。其中，animationDuration 属性用于配置错误提示消息的动画持续时间。
$('#validator').jqxValidator({
animationDuration: 200 // 默认值为 250
});
animationDuration（可选）：动画持续时间，单位为毫秒，默认值为 250。<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQWidgets jqxValidator animationDuration 属性示例</title>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" type="text/css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqxcore.js" type="text/javascript"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqxvalidator.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#form').jqxValidator({
rules: [
{ input: '#usernameInput', message: '用户名不能为空！', action: 'keyup, blur', rule: 'required' },
{ input: '#passwordInput', message: '密码不能为空！', action: 'keyup, blur', rule: 'required' }
],
animationDuration: 500
});
});
</script>
</head>
<body>
<form id="form">
<table>
<tr>
<td>
<input id="usernameInput" type="text" placeholder="请输入用户名" />
</td>
</tr>
<tr>
<td>
<input id="passwordInput" type="password" placeholder="请输入密码" />
</td>
</tr>
<tr>
<td>
<input type="submit" value="提交" />
</td>
</tr>
</table>
</form>
</body>
</html>
上面的例子中，我们定义了一个带有两个文本框和一个提交按钮的表单。使用 jqxValidator 插件，我们为这两个文本框添加了必填验证规则，并且将 animationDuration 属性设为 500 毫秒。当用户输入不合法时，将会出现动画效果的错误提示消息。
messageMode: 'default' 或 messageMode: 'tooltip' 时才会生效。