jQuery Validate 插件验证,,返回不同信息(json remote)自定义

问题

申请账号需要确认该账号是存在

1. jquery.validate.js中的remote

2. Jquery Ajax获取后台返回的Json数据后,添加自定义校验

解题思路:输入的登陆信息远程验证是否该账号已存在,并提示相对应的信息

No1.jquery.validate remote的用法 异步处理

常用

例子

注意远程返回数据时，一定要返回"true"或者"false",否则就是永远就是验证不通过。

$(document).ready(function() {
// 在键盘按下并释放及提交后验证提交表单
  $("#signupForm").validate({
    rules: {
      username:{
            required: true,
             remote   : {
                    url : '#index.php?check_suser_name_exist',
                    type: 'get',
                    data:{
                        username : function(){
                            return $('#username').val();
                        },
                        supplier_id: function(){
                            return     $("#select_supplier_id").val();
                        }
                    }
                }
            },
      password: {
        required: true,
        minlength: 5
      },
      confirm_password: {
        required: true,
        minlength: 5,
        equalTo: "#password"
      },
    },
    messages: {
     supplier_username:{
                required: '<i class="icon-exclamation-sign"></i>请填写登录账号',
                remote     : '<i class="icon-exclamation-sign"></i>登录账号已经被占用，请换一个'
            },
 
      password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字母"
      },
      confirm_password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字母",
        equalTo: "两次密码输入不一致"
      },
 
});

remote(url):请求远程校验。url 通常是一个远程调用方法。

remote url 异步处理php代码

    public function check_suser_name_existOp() {
        $condition = array();
        $condition['suser_name'] = $_GET['username'];
        $condition['supplier_id'] = intval($_GET['supplier_id']);//本供应商唯一 
 
        $model_supplier_user = Model('supplier');
        $result = $model_supplier_user->getSupplierUserInfo($condition,'suser_id');
        if(!$result) {
            echo 'true';
        } else {
            echo 'false';
        }
    }

延伸:输入的登陆信息远程验证是否该账号已存在,但remote 返回true或false,但如果需要存在第三种情况,例如已经注册但还没启用??

Jquery 使用Ajax获取后台返回的Json数据后,添加自定义校验

常用

例子

添加自定义效验

addMethod：name, method, message

jQuery Validate 代码

supplier_username:{
                required:true,
                check_suser_name: true
 
            },

//s make-in-lemon 账户存在重复处理
jQuery.validator.methods.check_suser_name = function(value, element) {
    var result = true;
    $.ajax({
        type:"GET",
        url:'index.php?act=supplier_joinin&op=check_user_name_exist',
        data:{
                    username : function(){
                        return $('#username').val();
                    },
                    supplier_id: function(){
                        return     $("select[name='supplier_id']").val();
                    }
                },
        dataType: 'json',
        success:function(data){
                 if(data == 'already'){
                     alert('登录账号已经被占用，请换一个');
                     $('#username').val('');
 
                 }
                 if(data == 'close'){
                   alert('此账号在审核中，请直接登录查看');
                   $('#username').val('');
                   $('#username_tips').css('display','');
         }
                 if(data == 'success'){
                    return $('#username').val();
                 }
                } 
 
    });
    return result;
};
//e make-in-lemon 账户存在重复处

check_suser_name 自定义

由  check.php 获取 返回值 1.already 2.close 3.success

提示相应的提示

remote url 异步处理php代码

  public function check_user_name_existOp() {
        $condition = array();
        $condition['suser_name'] = $_GET['username'];
        $condition['supplier_id'] = intval($_GET['supplier_id']);//本供应商唯一 
 
        $model_supplier_user = Model('supplier');
        $result = $model_supplier_user->getSupplierUserInfo($condition,'suser_id');
		$supplier_user_exit = $model_supplier_user->getSupplierUserInfo($condition);
		if($supplier_user_exit['suser_state'] == 1) {
                    echo json_encode('already');
                } elseif(  $supplier_user_exit['suser_state'] == "0" ||  $supplier_user_exit['suser_state'] == 2) {
                    echo json_encode('close');
                }else{
					 echo json_encode('success');
				}

相关链接

JQuery的详细教程

JQuery中$.ajax()方法参数详解

jquery-validate 的remote验证

jquery下的json格式ajax实现