Scala.js jQuery：从 html 输入中获取文本

Question

我是 "somewhat" Scala 的新手，正在学习一些 Scala.js。我有一个 html 表单，我正在尝试从字段中获取字符串并进行一些模式匹配以查看它们是否符合基本条件。

我遇到的问题是指从每个字段获取字符串的方法，使用 jQuery("#id").value。我注意到，无论我在字段中输入什么字符串，每个字段都会收到相同的 "Success" 警报。当我将 jQuery().value 方法的结果打印到 javascript 控制台时，我总是得到 "undefined"，所以我认为这是问题所在。

据我所知，值方法returns一个scalajs.Dynamic，不是字符串。因此，我不确定如何简单地从这些文本字段中获取文本，并且确信我遗漏了一些东西。这是我的代码：

index.html 文件：

<html>
<head>
    <title>Learning JQuery</title>
    <meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <style>
        ...CSS...
    </style>
</head>
<body>

<script type="text/javascript" src="./target/scala-2.11/scala-js-tutorial-jsdeps.js"></script>
<script type="text/javascript" src="./target/scala-2.11/scala-js-tutorial-fastopt.js"></script>

<script type="text/javascript">
    Script().main();
</script>
<div id="wrapper">
    <div id="error"></div>

    <form id="validationForm">

        <label for="email">Email</label>
        <input name="email" id="email">

        <label for="phone">Telephone</label>
        <input name="phone" id="phone">

        <label for="pass">Password</label>
        <input name="pass" type="password" id="pass1">

        <label for="pass">Confirm Password</label>
        <input name="pass" type="password" id="pass2">
        <input id="submitButton" type="submit" value="submit">
    </form>
</div>
</body>
</html>

Script.scala:

import scalajs.js
import org.scalajs.jquery.jQuery

import js.annotation.JSExport
import js.{Dynamic, JSApp}
import js.Dynamic.{ global => g }
/**
  * Created by pslagle12 on 6/21/16.
  */

@JSExport
object Script extends JSApp {

  implicit def dynamicToString(d: Dynamic): String =
    d.toString

  private val fieldsAndErrors = Map(
    ("email" -> "Please enter a valid email address"),
    ("phone" -> "Please enter a valid phone number"),
    ("pass1" -> "Please enter a matching password")
  )

  private val regexTest =
    """/^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|
  (\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])
      |(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/""".r

  lazy val email = jQuery("email").value
  lazy val phone = jQuery("phone").value
  lazy val pass1 = jQuery("pass1").value
  lazy val pass2 = jQuery("pass2").value

  @JSExport
  def main(): Unit = {

    jQuery("#validationForm").submit(
      fieldsAndErrors.keys foreach (x => {
        if (errorChecker(x) == "")
          g.alert("Success")
        else
          g.alert(errorChecker(x))
         }
      )
    )
  }

  def isValidEmailAddress(address: String): String =
    if (!regexTest
      .pattern
      .matcher(address)
      .matches()) {
      fieldsAndErrors("email")
    } else ""

  def isValidPhone(number: String): String =
    if (!number.isInstanceOf[Int]) 
      fieldsAndErrors("phone")
    else ""

  def isValidPass(pass1: String): String =
    if (pass1 != pass2) 
      fieldsAndErrors("pass1")
    else ""

  def errorChecker(key: String): String =

    key match {
      case "email" => isValidEmailAddress(email)
      case "phone" => isValidPhone(phone)
      case "pass1" => isValidPass(pass1)
      case _ => isValidPass(pass1)
    }
}

PS：我知道这段代码中还有其他一些错误。我主要关心如何从 Scala.js 的 JQuery api.

的文本输入中获取字符串

Answer 1

啊，等一下 -- 我看到了可能的问题。您的 jQuery 调用中的标识符不正确。你不能说 jQuery("pass1")，它必须是 jQuery("#pass1")，就像你对 validationForm 所做的一样。 # 告诉 jQuery 寻找一个名为 "pass1" 的 ID——事实上，我不确定什么它试图查找，但它可能返回一组空对象，因此 .value 没有产生任何东西。

这是 jQuery...

中最常见（也容易犯）的错误之一

Scala.js jQuery：从 html 输入中获取文本

Scala.js jQuery: Getting the text from a html input

jquery

scala

scala.js