2016-06-23 2 views
0

저는 Scala에 대해 다소 익숙하며 일부 Scala.js를 배우고 있습니다. html 양식을 가지고 있으며 필드에서 문자열을 가져 와서 패턴 일치를 통해 기본 기준을 충족하는지 확인하려고합니다.Scala.js jQuery : html 입력에서 텍스트 얻기

내가 겪고있는 문제는 jQuery ("# id"). value를 사용하여 각 필드에서 문자열을 가져 오는 방법을 나타냅니다. 나는 필드에 어떤 문자열을 입력했는지에 상관없이 각 필드에 대해 동일한 "성공"알림을 받았다는 것을 알았습니다. jQuery(). value 메소드의 결과를 javascript 콘솔에 출력 할 때 나는 항상 "undefined"를 얻었으므로 그 문제가 있다고 가정합니다.

내가 알 수있는 한 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 = 
    """/^(([^<>()[\]\\.,;:\[email protected]\"]+(\.[^<>()[\]\\.,;:\[email protected]\"]+)*)| 
    (\".+\"))@((\[[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를 사용하여 텍스트 입력에서 문자열을 가져 오는 방법을 아는 것에 관심이 있습니다.

+0

는 맹세, 대신 값 ''의') ('값을 시도 할 수 없습니다 - 난 그들이 정면 수준에서 교환 할 수 있는지 확실하지 않습니다. 비록 내가 컴파일하는 것에 조금 놀랐다 고 고백하지만,''String''을'email' 등에 넣으면 어떻게됩니까? –

+0

컴파일됩니다. 그것은 사용하지 않았지만 동적 객체를 문자열로 변경하기 위해 파일의 맨 위에 암시 적 변환을 추가했습니다. 그것이 "최선"일 수 있는지 나는 모른다. 그러나 나는 스칼라에게 아주 초록색이다. 제 자신의 시간에 튜토리얼을 끝내고 나서 첫 번째 코드입니다. 게으른 값 끝 부분에()를 추가했지만 이상하게 암호 필드를 변경하면 변경 사항이 적용되지 않습니다. 나는 원래의 게시물에서 오해되었다 : 그들은 모두 "성공"을 보낸다는 것을 제외하고는 모두 오류 메시지를 보낸다. –

+0

나는 과거에 자바 스크립트로 프로그래밍하지는 않았지만 텍스트에서 텍스트를 가져 오는 것이 일반적인 작업이라고 생각한다. 들. 이 고통은 놀랍습니다. Scala.js가 JQuery를 처리하는 방법과 관련이있다. –

답변

1

아, 잠깐만 기다려주세요. jQuery 호출의 식별자가 잘못되었습니다. jQuery("pass1")이라고 말하면 안됩니다. validationForm과 같은 방식으로 jQuery("#pass1")이어야합니다. #은 "pass1"이라는 ID를 찾기 위해 jQuery에 지시합니다. - 확실하지 않습니다. 무엇을으로 보려고합니다.하지만 빈 집합을 반환 할 가능성이 있습니다. .value은 아무것도 생성하지 않습니다. .

이 jQuery를에서 가장 흔한 (그리고 쉽게 만들 수) 실수 중 하나입니다 ...

+0

고마워요! 나는 그 문제를 일찍부터 배웠다. 그러나 나는 게으른 값을 치고 불행하게도 그 당시 그들을 결코 변경하지 않았다. –

관련 문제