【问题标题】:how to bind input type= 'email' in knockoutjs如何在 knockoutjs 中绑定输入类型 = 'email'
【发布时间】:2016-07-28 06:25:48
【问题描述】:

我正在使用带有 MVC 的 KnockoutJS。

我想知道 emailId 是有效还是无效,基于它我必须启用/禁用按钮并为文本框设置错误标题。

这是我的 .cshtml

<div class="nmc-righttab" style="width:265px;">
    <input class="nmc-text" type="email" maxlength="50" id="txtEmail" data-bind="value: emailAddress, valueUpdate: 'input'",css: { faultyBrush: (checkValidEmail() },attr: {title: InvalidEmailTitle } style="width:245px;" />
 </div> 

 <input type="submit" class="btn nmc-button" data-bind="click: searchUsers,enable: canSearchUsers,css: { 'btn-primary': (canSearchUsers() == true) }" id="searchUser" value="@Res.CommonStrings.Search" />

这是我的 JS 代码:

 this.emailAddress = ko.observable('');
 this.invalidEmailTitle = ko.observable('');
 this.canSearchUsers = ko.computed(function () {
     try {
         if (this.emailAddress().trim().length!==0)
             return true;
         else
              return false;
     } catch (error) {
         NMCApp.showNMCExceptionWindow('Jquery Error:' + error);
     }
}, this);

this.checkValidEmail(input) {

}

请让我知道如何知道电子邮件类型文本框的有效性以及在 Knockout JS 中无效的情况下如何更改相同的标题。

如何获取输入类型为“email”的文本框的有效性

【问题讨论】:

  • 您可以使用淘汰赛验证插件。 github.com/Knockout-Contrib/Knockout-Validation/wiki/….
  • 感谢您的链接。但我愿意使用输入类型“电子邮件”。如果有任何与电子邮件相关的内容,请提出建议
  • 您希望何时验证电子邮件?当用户正在输入或一旦用户点击提交按钮?
  • 一边打字会更好

标签: javascript jquery html knockout.js knockout-mvc


【解决方案1】:

如果您不想使用验证插件,可以根据自己的正则表达式测试输入:

HTML

<input data-bind="textInput: emailAddress, css: { 'faultyBrush': !checkValidEmail()}" class="nmc-text" type="email" maxlength="50" id="txtEmail" />

JS

var self = this;
self.emailAddress = ko.observable('');
self.checkValidEmail = ko.pureComputed(function () {
    if (!self.emailAddress()) return false;
    var pattern = /REGEX-GOES-HERE/i;
    return pattern.test(self.emailAddress());
});

有几种模式here

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-02-23
    • 1970-01-01
    • 1970-01-01
    • 2012-02-13
    • 1970-01-01
    • 2012-06-24
    • 2016-03-19
    相关资源
    最近更新 更多