Twitter注册之js传参

, 更换主题,然后看看下面的提示消息有什么变化?

1. 无需侵入HTML结构,全js调用
2. 你还可以自由控制消息的位置,只要设置msgStyle参数就可以了,例如:"margin-left:10px;margin-top:5px;"
3. 所谓主题,是通过配置表单的class、消息模板以及其他一些参数实现的不同展现效果
4. 所有参数(除了rules和messages), 都可以用来配置主题; 主题名字可以随意定义
5. 主题配置可以覆盖全局配置,同时也会被调用时的传参覆盖
Preview
HTML
<div id="result" class="tip-ok" style="display:none">提交成功</div>
<form id="signup_form" class="signup" autocomplete="off">
<fieldset>
    <div class="form-item">
        <div class="field-name">全名</div>
        <div class="field-input">
          <input type="text" name="user[name]" maxlength="20" autocomplete="off">
        </div>
    </div>
    <div class="form-item">
        <div class="field-name">电子邮件地址</div>
        <div class="field-input">
          <input type="text" name="user[email]" autocomplete="off">
        </div>
    </div>
    <div class="form-item">
        <div class="field-name">创建密码</div>
        <div class="field-input">
          <input type="password" name="user[user_password]">
        </div>
    </div>
    <div class="form-item">
        <div class="field-name">选择你的用户名</div>
        <div class="field-input">
          <input type="text" name="user[screen_name]" maxlength="15" autocomplete="off">
        </div>
    </div>
</fieldset>
    <button id="btn-submit" class="btn-submit" type="submit">创建我的账号</button>
</form>
Javascript
//验证初始化
$('#signup_form').validator({ 
    theme: 'simple_right',
    focusCleanup: true,
    stopOnError:false,
    //debug: true,
    timely: 2,
    //自定义规则(PS:建议尽量在全局配置中定义规则,统一管理)
    rules: {
        username: [/^[a-zA-Z0-9]+$/, '用户名无效! 仅支持字母与数字。']
    },
    fields: {
        "user[name]": {
            rule: "required",
            tip: "输入你的名字与姓氏。",
            ok: "名字很棒。",
            msg: {required: "全名必填!"}
        },
        "user[email]": {
            rule: "email;remote[check/email.php]",
            tip: "你的邮件地址是什么?",
            ok: "我们将会给你发送确认邮件。",
            msg: {
                required: "电子邮箱地址必填!",
                email: "不像是有效的电子邮箱。"
            }
        },
        "user[user_password]": {
            rule: "required;length[6~];password;strength",
            tip: "6个或更多字符! 要复杂些。",
            ok: "",
            msg: {
                required: "密码不能为空!",
                length: "密码最少为6位。"
            }
        },
        "user[screen_name]": {
            rule: "required;username;remote[check/user.php]",
            tip: "别担心,你可以稍后进行修改。",
            ok: "用户名可以使用。<br>你可以稍后进行修改。",
            msg: {required: "用户名必填!<br>你可以稍后进行修改。"}
        }
    },
    //验证成功
    valid: function(form) {
        $.ajax({
            url: 'results.php',
            type: 'POST',
            data: $(form).serialize(),
            success: function(d){
                $('#result').fadeIn(300).delay(2000).fadeOut(500);
            }
        });
    },
    //验证失败
    invalid: function(form) {
        //按钮动画效果
        $('#btn-submit').stop().delay(100)
            .animate({left:-5}, 100)
            .animate({left:5}, 100)
            .animate({left:-4}, 100)
            .animate({left:4}, 100)
            .animate({left:-3}, 100)
            .animate({left:0}, 100);
    }
});