将动态javascript变量添加到脚本中

时间:2012-04-17 05:35:24

标签: php javascript jquery validation

后台:我有一个jQuery验证脚本,几乎在我的所有网页上使用,允许客户端验证(我也做服务器端验证)。除了每个表单的特定“规则”之外,我的所有页面的javascript都是相同的。

在呈现HTML页面之前,每个页面的规则都会从我的控制器插入到php变量$ jquery_validation中。这意味着我可以动态生成每个html页面&表单,具有适当的客户端验证规则。

以下是我目前在所有html网页上加载的javascript代码:

$(document).ready(function(){
      $('#signupform').validate({
           wrapper: 'span class="error"',
           meta: 'validate', 
           highlight: function(element, errorClass, validClass) {
               if (element.type === 'radio') {
                      this.findByName(element.name).addClass(errorClass).removeClass(validClass);
              } else {
                      $(element).addClass(errorClass).removeClass(validClass);
               }

              var error = $(element).parent().find('span.error');       
                error.show();     
            },

             unhighlight: function(element, errorClass, validClass) {
              if (element.type === 'radio') {
                this.findByName(element.name).removeClass(errorClass).addClass(validClass);
              } else {
                $(element).removeClass(errorClass).addClass(validClass);
              }

              $(element).parent().find('span.error').hide(0, function() {
                $(element).parent().find('span.valid').fadeIn(200);
              });
            },
            <?=$jquery_validation?>);});

</script>

最后的$ jquery_validation变量包含每个页面的“规则”,根据表单的不同,这些规则明显不同。它给出的输出示例是:

 "rules":{"username":{"required":true,"remote":{"url":"http:\/\/localhost\/mytest\/public_html\/welcome\/remote","type":"post"}},"onkeyup":false});});

该功能现在正在运行,一切都很好。

问题:有没有办法在我的.js文件中使用我的验证javascript函数(因此它可以被压缩等) - 并且仍然动态加载每个验证的“规则”部分网页?

我可以改变'输出'&amp;如果需要,$ jquery_validation的语法 - 但关键是我需要能够动态地输出每个页面的规则

5 个答案:

答案 0 :(得分:2)

或者你可以这样做:

var _pageValidationRules = <?php echo $jquery_validation; ?>

// Code below can be compressed
$(function() {
    $('#signupform').validate({
        wrapper: 'span class="error"',
        meta: 'validate',
        highlight: function(element, errorClass, validClass) {
            // ...
        },
        unhighlight: function(element, errorClass, validClass) {
            // ...
        }
        rules: _pageValidationRules
    });
});​

答案 1 :(得分:1)

您可以将javascript代码放在任何.js文件中,然后将其压缩,然后就可以对HTML页面中的数据进行操作。这两个不在同一个文件中。如果您的代码在加载时执行,您只需要确保它在页面中定义代码后首先运行,或者在代码进入页面后通过物理定位或者在执行代码之前等待页面加载代码。

答案 2 :(得分:1)

是的,您可以创建一个对象并将其保存到变量中并保存构造函数中的详细信息(不记得它在JS中调用的内容)。

以下是我在其中一个脚本中使用的示例。

var rmlsSearch = function(searchEndpoint) {

  this.fname = '';
  this.lname = '';
  this.searchEndpoint = searchEndpoint;
  this.resultTemplate = $('#rmls-search-result-template').html();

  //Preform inital search
  this.searchAgent();

  //Bind search function to search button
  $('#rmls-search-button').one('click', $.proxy(this.searchAgent, this));

};

通过定义,您可以随时将其实例化,并传递您需要的任何细节。

var rmlsHandle = rmlsSearch("some endpoint I'm planning on using");

搜索Agent函数,原型到对象中:

rmlsSearch.prototype.searchAgent = function(){

  //Get the agent details from the form on the page
  this.getAgentDetails();

  //... Whatever else you'd need to do in the function
};

答案 3 :(得分:1)

PHP需要由浏览器呈现才能执行动态内容。因此,尝试将PHP放入外部js文件将无法读取。

答案 4 :(得分:1)

  • 创建一个PHP脚本,它将返回JSON格式的验证规则。
  • 使用脚本标记加载该脚本,它可能是PHP文件(为了提高性能设置正确的HTTP缓存设置,所以它将保留在浏览器缓存中)
  • 从外部JS静态文件加载验证逻辑