(注意:我的原始问题未链接到我的 openid - 我在此处重新发布以便能够相应地编辑/更新/响应 - 如果任何有权访问的人可以删除原始问题:/questions/1554916/how-to-use-the -livevalidation-javascript-library-custom-validate-function 会很棒!!)
嘿,伙计们,
我对这一切都很陌生,所以请多多包涵!
我已经设法创建了一个表单,对字段进行实时验证检查,并使用 ajax/json 检查来查看用户名是否有效。我似乎与标准的实时验证相处得很好。
这是我目前所拥有的演示:链接文本
对 ajax 用户名检查做出响应的方法只是将 a 更改为带有消息以使其可见,因此我想使用 livevalidation 检查来管理 ajax 响应 - 所以我可以将它们链接在一起(检查空白,然后在使用,然后无效,然后通过 ok)并以相同的方式输出我的响应。
我目前有这个表单代码:
<?php
$script = "
$('uname').addEvent('blur', function(e) {
e = new Event(e).stop();
// Show the spinning indicator when pressing the submit button...
$('indicator1').setStyle('display', 'block');
var username = $('uname').value;
if ( username != '' ) {
var url = 'index.php?option=com_chronocontact&chronoformname=custom_livevalidation_test&task=extra&format=raw';
var jSonRequest = new Json.Remote(url, {
onComplete: function(r) {
$('indicator1').setStyle('display','none');
if ( r.username_ok ) {
$('username_msg').setHTML(\"<span style='color:green;'>Username '\"+username+\"' is OK</span>\");
} else {
$('username_msg').setHTML(\"<span style='color:red;'>Sorry, username '\"+username+\"' is already taken</span>\");
}
}
}).send({'username': username});
}
});
";
global $mainframe;
if ($mainframe->isSite())
{
$doc =& JFactory::getDocument();
$script = "
window.addEvent('domready', function() {
$script
});
";
$doc->addScriptDeclaration($script);
};
$script = "
var uname = new LiveValidation('uname', {
validMessage: 'This is a valid username',
wait: 500
});
uname.add(Validate.Presence, {
failureMessage: 'Username must not be blank!'
});
uname.add(Validate.Format, {
pattern: /^[a-zA-Z\-_]{4,16}$/,
failureMessage: 'Username must be between 4 and 16 characters'
});
";
global $mainframe;
if ($mainframe->isSite())
{
$doc =& JFactory::getDocument();
$script = "
window.addEvent('domready', function() {
$script
});
";
$doc->addScriptDeclaration($script);
};
?>
<div>
<span class="cf_label">Username: </span>
<input style="" id="uname" name="uname" class="" title="" value="" type="text">
<span id="indicator1" style="display: none"><img src="/images/hourglass.gif" alt="checking..." /></span>
<div id='username_msg'></div>
</div>
<br />
<input type='submit' name='submit' value='submit' />
这是在后台运行的 json 部分:
<?php
$json = stripslashes($_POST['json']);
$json = json_decode($json);
if ( $json->username ){
$db =& JFactory::getDBO();
$query = "
SELECT COUNT(*)
FROM `jos_users`
WHERE `username` = ".$db->quote($json->username).";";
$db->setQuery($query);
$response = (bool) !$database->loadResult();
$response = array('username_ok' => $response );
echo json_encode($response);
}
?>
因此,查看 livevalidation 文档,您可以以这种方式使用自定义验证:
// Pass a function that checks if a number is divisible by one that you pass it in args object
// In this case, 5 is passed, so should return true and validation will pass
Validate.Custom( 55, { against: function(value,args){ return !(value % args.divisibleBy) }, args: {divisibleBy: 5} } );
我发现这非常神秘 - 我认为我应该能够指出'function(r)' 那里已经准备好了 - 但我怀疑我这样做的方式是否正确,
任何人都可以阐明任何观点,我(希望!)理解它并找到解决方案!
* 更新 *
我现在被引导相信 validate.custom 部分的这段代码应该可以工作:
var uname = new LiveValidation('uname', {
validMessage: 'This is a valid username',
wait: 500
});
uname.add(Validate.Presence, {
failureMessage: 'Username must not be blank!'
});
uname.add(Validate.Custom('uname', { against: function(r){
return !(r.username_ok) }, args: {} } ),
failureMessage: 'This username is already taken'
});
uname.add(Validate.Format, {
pattern: /^[a-zA-Z\-_]{4,16}$/,
failureMessage: 'Username must be between 4 and 16 characters'
});
";
然而,我似乎有一个架构问题——实时验证需要一个即时的答案,而 ajax 发生在后台。我有一个建议来调查“观察者模式”,这对我来说是一个全新的概念——我通常在玩 cms 的图形设计和结构方面!
任何进一步的帮助/澄清表示赞赏,因为我将不得不回到这个并让它工作!