在敲除 js 中单击按钮时触发验证

Question

我有一个使用 KOJs 进行计算的表格，我需要在那里实施 kojs 验证，这样用户就不会在表格中提交空白字段..

我已经尝试了各种资源，但它们不是很有帮助。

请大家解决这个问题。任何帮助将不胜感激。

下面是我的代码

function ViewModel() {

                this.fullname = ko.observable().extend({ required: true, minLength: 2, maxLength: 10 });

                this.startDate = ko.observable(new Date());

                this.companyname = ko.observable().extend({ required: true });

                this.loanAmount = ko.observable();

                this.email = ko.observable();

                this.phoneNumber = ko.observable();

                this.sellerName = ko.observable();

                this.propertyAddress = ko.observable();

                this.propertyCity = ko.observable();

                this.mortgagePayoff = ko.observable();

                this.realtorCommission = ko.observable('6');

                this.termitePolicy = ko.observable();

                this.closingCosts = ko.observable();

                this.additionalNote = ko.observable();

                this.PropertyCity = ko.observable();

                this.selectedcounty = ko.observable();

                this.no_documents = ko.observable();
                this.fileInput =  ko.observable();
                this.fileName = ko.observable();




                this.submitForm = function()

                {

                    var data = JSON.stringify(

                        {

                            fullname : this.fullname(), 

                            companyname : this.companyname(),

                            email: this.email(), 

                            phoneNumber: this.phoneNumber(),

                            sellername: this.sellerName(),

                            propertyAddress: this.propertyAddress(),

                            propertycity: this.propertyCity(),

                            county: this.selectedcounty(),

                            contractSalesPrice: this.contractSalesPrice(),

                            selectedPropertyType: this.selectedPropertyType(),

                            loanAmount : this.loanAmount(),

                            wireFee : this.wireFee(),

                            mortgagePayoff: this.mortgagePayoff(),

                            realtorCommission: this.realtorCommission(),

                            revenueStamps: this.revenueStamps(),

                            termitePolicy: this.termitePolicy(),

                            closing_fee : this.closing_fee(),

                            title_service_fee: this.title_service_fee(),

                            titleInsurance: this.titleInsurance(),

                            ownersPremium: this.ownersPremium(),

                            loanPremium: this.loanPremium(),

                            comboPrice: this.comboPrice(),


                            no_documents: this.no_documents(),

                            courierFee: this.courierFee(),

                            homeWarranty: this.HomeWarranty(),

                            priorYear: this.PriorYear(),

                            startDate: this.dateformate(),

                            proRatedTaxes: this.ProRatedTaxes(),
                            insured_closing: this.insured_closing(),
                            RecordingFees: this.RecordingFees(),
                            closingCosts: this.closingCosts(),
                            additionalNote: this.additionalNote(),
                            fileName: this.fileName(),
                            fileInput: this.fileInput()


                        });


                    jQuery.post("../view.php", {json:data}, function(response)

                    {
                        //alert(response);
                    window.location.href = 'http://realtytitle.madeby.ws/result/';
                       // on success callback
                        //this.response(response);

                    })

                } 
            }

            ko.applyBindings(new ViewModel());

Answer 1

首先，您不需要生成数据对象。 Knockout 对此有一个很好的函数：ko.toJSON()。在 ViewModel 的第一行添加一个这样的变量：

var self = this;

这样您就可以从任何函数访问 viewModel 对象。然后，在 submitForm 上设置

var data = ko.toJS(self);

关于验证，一个简单但不太优雅的解决方案是创建一个验证数据的函数，例如：

    this.isValid = function() {
     return self.fullname().length > 0 && 
            self.email().length > 0 &&
            ... && the validations you want.
    }

此函数可用于验证 submitForm 上的对象。另一种方法是使用 customHandler 来验证每个 observable，比如

this.email = ko.observable(); 
this.email.valid = ko.computed() { 
  if (self.email())
    return self.email().length > 0;
  return false;
}

其余元素相同。然后，您只需要在 submitForm 函数上验证 self.email.valid() 。另外，这允许您在用户界面上显示元素是否有效。最后，您可以使用一个 knockout validation 插件。如您所见，有很多可能性！！！

在敲除 js 中单击按钮时触发验证

Trigger validation on click on a button in knockout js

javascript

knockout.js

knockout-validation