Question

我正在使用ZK7，HTML5，CSS3，如果它是有效的电子邮件，我正在尝试验证zk文本框元素：

<form id="validation-form">
    <fieldset>
        <div class="form-group">
            <label class="block clearfix" for="email">
                <span class="block input-icon input-icon-right">
                    <z:textbox id="emailInput" type="email" class="form-control" placeholder="${labels.login.email}"/>
                    <i class="icon-envelope"></i>
                </span>
            </label>
        </div>
        <div class="clearfix">
            <button id="forgotPassword" type="button" class="width-35 pull-right btn btn-sm btn-danger">
                <i class="icon-lightbulb"></i>
                ${labels.send}
            </button>
        </div>
    </fieldset>
</form>

这是脚本：

<script type="text/javascript">
    jQuery(function($) {

        $('[data-rel=tooltip]').tooltip();

        $(".select2").css('width','200px').select2({allowClear:true})
        .on('change', function(){
            $(this).closest('form').validate().element($(this));
        }); 


        var $validation = false;

        //documentation : http://docs.jquery.com/Plugins/Validation/validate

        $('#validation-form').validate({

            errorElement: 'div',
            errorClass: 'help-block',
            focusInvalid: false,
            rules: {
                email: {
                    required: true,
                    email:true
                }
            },

            messages: {
                email: {
                    required: "Please provide a valid email.",
                    email: "Please provide a valid email."
                }
            },

            invalidHandler: function (event, validator) { //display error alert on form submit   
                $('.alert-danger', $('.login-form')).show();
            },

            highlight: function (e) {
                $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
            },

            success: function (e) {
                $(e).closest('.form-group').removeClass('has-error').addClass('has-info');
                $(e).remove();
            },

            errorPlacement: function (error, element) {
                if(element.is(':checkbox') || element.is(':radio')) {
                    var controls = element.closest('div[class*="col-"]');
                    if(controls.find(':checkbox,:radio').length > 1) controls.append(error);
                    else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
                }
                else if(element.is('.select2')) {
                    error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
                }
                else if(element.is('.chosen-select')) {
                    error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
                }
                else error.insertAfter(element.parent());
            },

            submitHandler: function (form) {
            },
            invalidHandler: function (form) {
            }
        });




        $('#modal-wizard .modal-header').ace_wizard();
        $('#modal-wizard .wizard-actions .btn[data-dismiss=modal]').removeAttr('disabled');
    })
</script>

当我将z：textbox更改为html输入时，它正在工作：

<input id="emailInput" type="email" class="form-control" placeholder="${labels.login.email}"/>

如何使用zk文本框执行相同的操作？

Answer 1

我不是100％确定这是否是你想要的，因为你的问题有很多javascript，jquery和第一个代码看起来不像zk（只有你的国际化很熟悉）。如果您使用zk，则可以执行以下操作：

<textbox value="@bind(vm.email)" id="email" 
   constraint="/.+@(.+\.[a-z]+|)/: Please enter a valid e-mail address" 
   type="email" placeholder="enter email" />

我确实在那里设置了一个简单的电子邮件约束，但您可以将约束更改为您想要的。
希望这对你有帮助。

Answer 2

将zqu整合jquery蒙版有很好的example 对于客户端验证，这应该没问题此外，ZK还提供form validation以及constraints for InputElements

如何使用HTML5 + CSS3验证验证ZK Textbox？

2 个答案: