1

我正在使用 Phonegap 2.9.0 和 Xcode 4.6.3。我正在使用 jquery mobile 1.3.2 和 html 5 制作注册表单。

我面临一个奇怪的问题，如果我在浏览器中运行 html 文件，它的行为应该是完美的，但是在 iPhone 模拟器上运行时，验证脚本都不起作用。我已经尝试过 safari web 控制台来调试问题，但无法弄清楚任何问题。

编辑

尝试在不同的 html 文件中导航时，cordova 存在 DOM 问题。所以我修改了我的代码。我没有导航到一个完全不同的 html 文件，而是尝试更改 div 的内部 html 内容。

这是我尝试过的：

索引.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

        <link rel="stylesheet" href="js/jquery.mobile-1.3.2.css" />
        <link rel="stylesheet" href="js/jquery.mobile.structure-1.3.2.css" />
        <link rel="stylesheet" href="js/jquery.mobile.theme-1.3.2.css" />
        <link rel="stylesheet" href="js/jquery.ui.datepicker.mobile.css" />

        <title>Bookstore</title>
    </head>
    <body onload="onBodyLoad()">

        <div id="main_content">
        </div>

        <script type="text/javascript" src="cordova.js"></script>

        <script>
          //reset type=date inputs to text
          $( document ).bind( "mobileinit", function(){
            $.mobile.page.prototype.options.degradeInputs.date = true;
          });
        </script>

        <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.3.2.js"></script>

        <script type="text/javascript" src="js/jQuery.ui.datepicker.js"></script>
        <script type="text/javascript" src="js/jquery.ui.datepicker.mobile.js"></script>

        <script type="text/javascript" src="js/index.js"></script>

        <script>
            function onBodyLoad()
            {     
                document.addEventListener("deviceready",onDeviceReady,false);
            }
        </script>     

    </body>
</html>

index.js

var latitude;
var longitude;

$(document).bind('deviceready', function(){
    navigator.geolocation.getCurrentPosition(onSuccess, onError);

    $("#main_content").load('user_register.html');
    registration();
});

function alertDismissed()
{
    // do something
}

function is_email(email) 
{
  var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return regex.test(email);
}

function onSuccess(position)
{
    latitude = position.coords.latitude;
    longitude = position.coords.longitude;
}

function onError(error)
{
    alert('code: '    + error.code    + '\n' +
          'message: ' + error.message + '\n');
}

function registration()
{
    $("#register").submit(function() {
        $('.error').hide();

        var user_name = $("input#user_name").val();  

        if (user_name == "")
        {
            navigator.notification.alert(
                'Please fill up user name.',  // message
                alertDismissed,         // callback
                'User Name',            // title
                'Done'                  // buttonName
            );
            // alert("Please fill up user name.");
            return false;  
        }

        if (!is_email(user_name))
        {
            navigator.notification.alert(
                'Not a valid email.',  // message
                alertDismissed,         // callback
                'User Name',            // title
                'Done'                  // buttonName
            );
            // alert("Not a valid email.");
            return false;  
        }

        var password = $("input#password").val();  

        if (password == "")
        { 
            navigator.notification.alert(
                'Please fill up password.',  // message
                alertDismissed,         // callback
                'Password',            // title
                'Done'                  // buttonName
            );
            // alert("Please fill up password.");
            return false;  
        }

        if (password.length < 6)
        {
            navigator.notification.alert(
                'Password too short.',  // message
                alertDismissed,         // callback
                'Password',            // title
                'Done'                  // buttonName
            );
            // alert("Password too short.");
            return false;
        }

        var confirm_password = $("input#confirm_password").val();  

        if (confirm_password == "") 
        {
            navigator.notification.alert(
                'Please fill up confirm password.',  // message
                alertDismissed,         // callback
                'Confirm Password',            // title
                'Done'                  // buttonName
            );
            // alert("Please fill up confirm password.");
            return false;  
        }

        if (confirm_password != password) 
        {
            navigator.notification.alert(
                'Password and confirm password field does not match.',  // message
                alertDismissed,         // callback
                'Confirm Password',            // title
                'Done'                  // buttonName
            );
            // alert("Password and confirm password field does not match.");
            return false;  
        }

        var full_name = $("input#full_name").val();

        if (full_name == "")
        {
            navigator.notification.alert(
                'Please fill up your full name field.',  // message
                alertDismissed,         // callback
                'Confirm Password',            // title
                'Done'                  // buttonName
            );
            // alert("Please fill up your full name field");
            return false;
        }

        var date_of_birth = $("input#date_of_birth").val();
        var sex = $("input#sex").val();

        var dataString = 'user_name='+ user_name + '&password=' + password + '&name=' + full_name + '&sex=' + sex + '&date_of_birth=' + date_of_birth;
        var obj;
        $.ajax({
            type: "POST",
            url: "test.php",
            data: dataString,
            success: function(data,textStatus,XMLHttpRequest)
            {
                obj = jQuery.parseJSON(data);
                navigator.notification.alert(
                    obj.message,  // message
                    alertDismissed,         // callback
                    'Confirm Password',            // title
                    'Done'                  // buttonName
                );
                // alert(obj.message);
            },
            error: function(XMLHttpRequest, textStatus, errorThrown)
            {
                var msg = 'There was an ' + errorThrown +
                                      ' error due to a ' + textStatus + 
                                      ' condition.'+ 'XMLHttpRequest: ' + XMLHttpRequest[0] + 
                                      ' Error Thrown: ' + errorThrown;
                navigator.notification.alert(
                    msg,  // message
                    alertDismissed,         // callback
                    'Confirm Password',            // title
                    'Done'                  // buttonName
                );
            },
            complete: function(XMLHttpRequest, status)
            {
                if (obj.status == 0)
                {
                    $('form')[0].reset();
                    $("#main_content").load('user_login.html');
                }
            }
        });
        return false;
    });
}

user_register.html

<div data-role="page" id="register">
    <div data-theme="a" data-role="header" data-position="fixed">
        <a data-role="button" data-transition="slidedown" href="index.html" class="ui-btn-left">
            Cancel
        </a>
        <h3 id="register">
            Register
        </h3>
    </div>
    <div data-role="content">
        <form id="register">
            <div data-role="fieldcontain">
                <label for="user_name">
                    User Name
                </label>
                <input name="user_name" id="user_name" placeholder="user@email.com" value=""
                type="email">
            </div>
            <div data-role="fieldcontain">
                <label for="password">
                    Password
                </label>
                <input name="password" id="password" placeholder="password" value="" type="password">
            </div>
            <div data-role="fieldcontain">
                <label for="confirm_password">
                    Confirm Password
                </label>
                <input name="confirm_password" id="confirm_password" placeholder="password"
                value="" type="password">
            </div>
            <div data-role="fieldcontain">
                <label for="full_name">
                    Full Name
                </label>
                <input name="full_name" id="full_name" placeholder="First Middle Last"
                value="" type="text">
            </div>
            <div data-role="fieldcontain">
                <label for="sex">
                    Sex:
                </label>
                <select id="sex" name="sex">
                    <option value="0">
                        Male
                    </option>
                    <option value="1">
                        Female
                    </option>
                </select>
            </div>
            <div data-role="fieldcontain">
                <label for="date">Date of Birth:</label>
                <input type="date" name="date_of_birth" id="date_of_birth" value=""  />
            </div>
            <input id="submit" type="submit" value="Submit">
        </form>
    </div>
</div>

现在应用程序运行，只出现一个白屏。它没有按预期加载 user_register.html！

任何帮助将不胜感激:)

4

0 回答 0