Validation 如何销毁AUI表单验证程序，使我只有一个实例
我使用的是Alloy UI和YUI3，并且有一个表单，根据用户从select下拉列表中选择的选项，向服务器发出ajax调用。服务器返回我发送给AUI表单验证模块的新验证规则。规则正在更改，但表单正在输出重复的规则。也就是说，不替换表单验证实例，而是将其附加到旧实例，以便在broswer中有重复的错误字段字符串。 我认为我需要销毁所有实例，但最近的实例除外，但似乎无法实现这一点。如何销毁/更新旧表单验证，以便在DOM中只显示最新的表单验证 以下是我在.failure上使用的代码，因为我正在本地测试：Validation 如何销毁AUI表单验证程序，使我只有一个实例,validation,yui,destroy,alloy-ui,Validation,Yui,Destroy,Alloy Ui,我使用的是Alloy UI和YUI3，并且有一个表单，根据用户从select下拉列表中选择的选项，向服务器发出ajax调用。服务器返回我发送给AUI表单验证模块的新验证规则。规则正在更改，但表单正在输出重复的规则。也就是说，不替换表单验证实例，而是将其附加到旧实例，以便在broswer中有重复的错误字段字符串。 我认为我需要销毁所有实例，但最近的实例除外，但似乎无法实现这一点。如何销毁/更新旧表单验证，以便在DOM中只显示最新的表单验证 以下是我在.failure上使用的代码，因为我正在本地测试
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://cdn.alloyui.com/2.5.0/aui-css/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<form id="myForm">
<select id="card-type" name="card-type" class="select_card_type">
<option value="7" selected="selected" label="Seven"></option>
<option value="2" label="Two"></option>
<option value="5" label="Five"></option>
</select>
<div class="control-group card_number">
<label class="control-label" for="cardNumber">Card number</label>
<div class="controls">
<input name="cardNumber" id="cardNumber" type="text" />
</div>
</div>
<div class="control-group csc">
<label class="control-label" for="picture">Card security code</label>
<div class="controls">
<input name="csc" id="csc" type="text">
</div>
</div>
<input class="btn btn-info" type="submit" value="Submit">
</form>
</div><!--/span-->
</div><!--/row-->
<hr>
<footer>
<p>© Company 2013</p>
</footer>
</div><!--/.fluid-container-->
<script src="http://cdn.alloyui.com/2.5.0/aui/aui-min.js"></script>
<script>
YUI().use('node', 'node-base', 'event', 'transition', 'aui-io-request', 'json-parse', 'aui-form-validator', function(Y) {
var rules;
function Validator(rules) {
this.rules = rules;
this.fieldStrings = {
cardNumber: {
required: 'Type your card number in this field.'
},
csc: {
required: 'Please provide your csc.'
}
};
this.val = new Y.FormValidator(
{
boundingBox: '#myForm',
fieldStrings: this.fieldStrings,
validateOnInput: true,
rules: this.rules
}
);
}
Y.one('.select_card_type').on('change', function(e) {
var len = Y.one('#card-type option:checked').get('value');
Y.io.request('<%= selectProductTypeResource.toString() %>', {
method: 'post',
on: {
failure: function() {
rules = {
cardNumber: {
required: true,
digits: true,
minLength: len,
maxLength: len
},
csc: {
required: true,
digits: true,
minLength: len,
maxLength: len
}
};
if (typeof (validator) === 'object') {
validator.val.destroy(true); // not working
}
validator = new Validator(rules);
}
}
});
});
});</script>
</body>
</html>
您没有附加规则，而是绑定多个验证器。即使您能够清除这些规则，旧的验证器仍然会被绑定，并且不会根据任何规则进行验证 为了避免破坏它，您可以创建一次验证器，然后相应地修改规则 AlloyUI使用get/set方法修改属性 要修改规则，请调用getter-var rules=validator.get'rules'，然后修改。 要设置新规则，请调用setter:validator.set'rules'，{cardNumber:{required:true} 我已经准备好演示了。如果单击Createnevalidator并提交，您将看到与前面描述的相同的行为
github上的应用程序。感谢您的回复，我已经实现了您提到的内容，并使其正常工作。我使用setAttrs重置了新规则，现在一切都正常工作。以下是我的完整工作代码：
YUI().use('node', 'node-base', 'event', 'transition', 'aui-io-request', 'json-parse', 'aui-form-validator', function(Y) {
var validator = new Y.FormValidator(
{
boundingBox: '#myForm',
validateOnInput: true
});
Y.one('.select_card_type').on('change', function(e) {
var len = Y.one('#card-type option:checked').get('value');
validator.resetAllFields();
Y.io.request('<%= selectProductTypeResource.toString() %>', {
method: 'post',
on: {
failure: function() {
var rules = {
cardNumber: {
required: true,
digits: true,
minLength: len,
maxLength: len
},
csc: {
required: true,
digits: true,
minLength: len,
maxLength: len
}
};
validator.setAttrs({rules: rules});
}
}
});
});
});
谢谢你的回复，我已经尝试了你提到的，并且成功了。我使用setAttrs重置了新规则，现在一切都正常工作。非常感谢。以下是我的完整工作代码：