@model sf_account
@{
    ViewBag.SubTitle = "Sign up account";
    Layout = "~/Plugins/SFUser/Views/Shared/_Layout.cshtml";
}
@section head
{
    <link rel="stylesheet" type="text/css" href="/plugins/sfuser/css/reg.css" media="all" />
}
<div id="container">
    <div class="grid-780 grid-780-border fn-mt30 fn-clear">
        <div class="ui-form-welcome">
            Please carefully fill in and keep in mind the following registration information to protect your interests.</div>
        <form id="form" method="post" class="ui-form ui-form-l" action="/SFUser/Account/Join"
        autocomplete="off">
        <div class="ui-form-item">
            <label for="username" class="ui-label">
                Account Name:</label>
            @Html.TextBoxFor(m => m.username, new { @class = "ui-input" })</div>
        <div class="ui-form-item">
            <label for="password" class="ui-label">
                Password:</label>
            @Html.PasswordFor(m => m.password, new { @class = "ui-input" })</div>
        <div class="ui-form-item">
            <label for="queryPwdConfirm" class="ui-label">
                Confirm Password:</label>
            @Html.Password("queryPwdConfirm", "", new { @class = "ui-input" })
        </div>
        <div class="ui-form-item">
            <label for="email" class="ui-label">
                E-Mail:</label>
            @Html.TextBoxFor(m => m.email, new { @class = "ui-input" })
        </div>
        <div class="ui-form-item">
            <label for="checkCode" class="ui-label">
                Verification code</label>
            <input autocomplete="off" class="ui-input checkcode-input ime-disabled" type="text"
                id="checkCode" name="checkCode" maxlength="5">
            <img title="Click picture to refresh verification code" alt="Input verification code" id="checkcodeimg" class="checkcodeimg" src="/Common/Captcha">
        </div>
        <div class="ui-form-dashed">
        </div>
        <div class="ui-form-item">
            <input type="checkbox" checked="checked" class="checkbox" value="" name="read" id="read_phone">
            <a target="_blank" href="/SFUser/Account/UserAgreement">Read and agree with the user agreement</a>
        </div>
        <div class="ui-form-item">
            <div id="submitBtn" class="ui-button ui-button-lorange">
                <input id="regSubmit" type="submit" class="ui-button-text" value="Sign up" data-validatorflag="true">
            </div>
            <span class="ui-form-confirm"><span class="loading-text fn-hide">Submitting information</span></span>
        </div>
        </form>
    </div>
</div>
<script type="text/javascript">

    $.validator.addMethod("ennum", function (value, element) { return this.optional(element) || /^[a-zA-Z0-9_]+$/.test(value); });
    $.validator.addMethod("email", function (value, element) { return this.optional(element) || /^([a-zA-Z0-9])*([a-zA-Z0-9]+[_|\_|\.]?)+@@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(value); });

    saveform({
        rules: {
            username: {
                required: true,
                ennum: true,
                minlength: 5,
                maxlength: 12,
                remote: {
                    type: "POST",
                    url: '/SFUser/Account/UserNotExists'
                }
            },
            password: {
                required: true,
                ennum: true,
                minlength: 6,
                maxlength: 25
            },
            queryPwdConfirm: {
                required: true,
                equalTo: 'input[name=password]'
            },
            email: {
                required: true,
                email: true,
                remote: {
                    type: "POST",
                    url: '/SFUser/Account/EmailNotExists'
                }
            },
            checkCode: {
                required: true
            }
        },
        messages: {
            username: {
                required: "Please enter account",
                ennum: "Account must be alphanumeric or underline",
                minlength: "Minimum account size 5",
                maxlength: "Maximum account size 12",
                remote: "Account has been registered"
            },
            password: {
                required: "Please input password",
                ennum: "Password must be alphanumeric or underline",
                minlength: "Minimum password length 5",
                maxlength: "Maximum password length 20"
            },
            queryPwdConfirm: {
                required: "Please enter the confirmation password",
                equalTo: 'Two input passwords are inconsistent'
            },
            email: {
                required: "Please enter the E-Mail",
                email: 'E-Mail format error',
                remote: "The E-Mail has been used."
            },
            checkCode: {
                required: "Please enter the verification code"
            }
        },
        success: function (msg) {
            alert(msg);
            window.location.href = "/SFUser/Center/Index";
        },
        failure: function (msg) {
            tip({ msg: msg });
        }
    }
);
</script>