Question

我有点＆＃34; Scala的新手，我正在学习一些Scala.js。我有一个html表单，我试图从字段中取出字符串并进行一些模式匹配，看看它们是否符合基本标准。

我遇到的问题是使用jQuery（＆＃34;＃id＆＃34;）。值来引用从每个字段获取字符串的方法。我注意到，无论我在字段中输入什么字符串，我都会得到相同的＆＃34;成功＆＃34;提醒每个领域。当我将jQuery（）。value方法的结果打印到javascript控制台时，我总是得到＆＃34; undefined＆＃34;，所以我假设有一些问题就是这个问题。

据我所知，value方法返回一个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输入中获取文本

1 个答案: