jquery validate 实例 remote操作 自定义错误提示

关于这个网站上好多的示例，但是为看到过有关于remote的操作，还有关于自定义错误提示的示例，自己google一下，自己又测试了一下来个PHP版本的，此项目方案更适合于QEEPHP框架，或者其他的框架。

html代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<form id='complete-form' action="" method="post">
  	<li class="input">
        <span class="title">邮箱</span>
        <input id='email' name='email' type="email" />
        <span class="back"></span>
    </li>
    <li class="input">
        <span class="title">登录密码</span>
        <input id='password' name='password' type="password" />
        <span class="back"></span></li>
    <li class="input">
        <span class="title">确认密码</span>
        <input id='repassword' name='repassword' type="password" />
        <span class="back"></span>
    </li>
    <li class="submit">
        <span>完成注册</span>
    </li>
  </form>

js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<script language="javascript">
    $(function(){
        $('form#complete-form').validate({
            rules: {
                email:{
                    required:true,
                    email:true,
                    remote:{
                        url:'/default/isemail/type/validate',
                        type:'post'
                    },
                },
                password:{
                    required:true,
                    minlength:6,
                },
                repassword:{
                    required:true,
                    equalTo:password,
                    minlength:6,
                }
            },
            messages:{
                email:{
                    required:'邮箱地址不能为空',
                    email:'邮箱格式错误',
                    remote:'该邮箱已经被注册 <a href="/default/bind">绑定账号</a>'
                },
                password:{
                    required:'登录密码不能为空',
                    minlength:'密码长度不能少于6个字符'
                },
                repassword:{
                    required:'确认密码不能为空',
                    minlength:'密码长度不能少于6个字符',
                    equalTo:'确认密码与输入的密码不一致'
                }
            },
            errorElement:'em',
            errorPlacement: function(error, element) {
                error.appendTo( element.parent().find('.back'));       
                
            },
        });
        
        $("#complete .submit span").click(function(){
            $("#complete form").submit();	
        })
    });
</script>

php后台操作代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/**
 * Email是否存在
 */
public function actionIsEmail(){
    $email = $this->_context->post('email','');
    $ajaxType = $this->_context->get('type','');

    $email = $this->filter($email);
    $obj = User_Star::find('email=?',$email)->query();
    
    if(empty($obj->id)){
        if($ajaxType != 'validate'){
            $message['error'] = 1;//可以注册
            $message['email'] = false;
            echo json_encode($message);
            exit;
        }else{
            echo 'true';
            exit;
        }
    }else{
        if($ajaxType != 'validate'){
            $message['error'] = 0;//不可以注册
            $message['email'] = true;
            echo json_encode($message);
            exit;
        }else{
            echo 'false';
            exit;
        }
    }
}

这里提示几点，

1，记载jquery框架库

2，加载jauery.validate插件

3，php后台输出操作，一定是字符串型的