jQuery Validator remote 远程Ajax校验器

jQuery Validator remote 远程Ajax校验器

中文手册  2016年05月26日  暂无评论

jQuery Validator的remote远程校验器用于通过远程AJAX请求对指定输入进行校验。

该校验器要求远程服务器端必须响应JSON对象字符串。

语法

jQuery Validator 1.0 新增。

// 在校验规则对象中指定该属性
remote: options

// 例如：
remote: "http://www.365mini.com/user/checkExists" 
remote: { url: "url", data: {  } }

参数

参数	描述
options	String/Object/Function类型一个远程请求URL，或一个可用于$.ajax(options)的参数对象，或者一个返回前面两种参数的函数。

remote远程校验器将通过jQuery的$.ajax()方法执行一个远程请求，并根据返回结果判断校验是否成功。

参数：字符串(String)类型

如果options是一个字符串，则表示远程请求的URL。remote校验器会自动为该AJAX请求添加当前校验的表单元素的"name属性值=value值"作为参数。

参数：对象(Object)类型

如果简单的"请求URL + 参数"无法满足你的需求，你还可以自定义发送该AJAX请求所需的任何选项参数。例如：

remote: {
    url:"请求地址",
    data: "请求参数" // 也可以是{name: value}形式的对象

    // 校验器已内置如下3个参数，可以不用设置，也请不要随意更改
    // 尤其是async和dataType，否则将可能导致出现无法预料的行为
    //  type: "post",
    //  async: false,
    //  dataType: json
}

详细参数列表，请参见$.ajax()的参数说明部分。

参数：函数(Function)类型

如果options是一个函数，则它的返回值应该是前面两种类型，校验器将使用该返回值继续完成远程请求校验工作。

校验器在调用该函数时，会如下所示传入对应的参数：

options(value, context){
    // 函数中的 this 指向window对象

    // value 是当前表单元素输入的值(有可能已被格式化处理)
    // context 是校验的上下文对象
}

服务器端响应及后续处理

远程服务器端必须响应一个JSON对象，该对象可以通过设置以下约定属性以控制remote校验器的处理行为：

// 以下属性均是可选的
{
    status : "OK", // 当且仅当status为"OK"时，表示校验通过
    message: "该用户名已存在！", // 校验失败时的提示信息
    callback: "funcName" // 回调函数名称，不管校验成功失败，在返回结果前，均会调用该函数
}

// 如果指定了callback，校验器在调用函数时，会为该函数传入如下所示的参数：
funcName: (data, value, context){
    // 函数中的 this 指向当前校验的表单元素的jQuery对象

    // data 是服务器响应的JSON对象，你可以通过修改status属性来"扭转乾坤"
    // value 是当前表单元素输入的值(有可能已被格式化处理)
    // context 是校验的上下文对象
}

示例&说明

以如下HTML表单为例：

<form action="http://www.365mini.com/">
    <div>
        <label>用户名</label>：
        <input id="username" name="username" type="text" >
    </div>
    <div>
        <label>密码</label>：
        <input id="password" name="password" type="password" >
    </div>
    <input type="submit" value="提交" />
</form>

我们可以使用remote校验器来判断该用户名是否已存在：运行代码

// 在表单提交时执行校验
$("form").v("submit", {
    "#username": {
        text: /^[a-z]\w{5,15}$/i, // 先校验格式是否正确
        remote: "/user/check.php" // 校验器会自动附加请求参数:"username=输入值"
    },
    "#password": "password"
});

jQuery Validator remote 远程Ajax校验器

中文手册  2016年05月26日  暂无评论

jQuery Validator的remote远程校验器用于通过远程AJAX请求对指定输入进行校验。

该校验器要求远程服务器端必须响应JSON对象字符串。

语法

jQuery Validator 1.0 新增。

// 在校验规则对象中指定该属性
remote: options

// 例如：
remote: "http://www.365mini.com/user/checkExists" 
remote: { url: "url", data: {  } }

参数

参数	描述
options	String/Object/Function类型一个远程请求URL，或一个可用于$.ajax(options)的参数对象，或者一个返回前面两种参数的函数。

remote远程校验器将通过jQuery的$.ajax()方法执行一个远程请求，并根据返回结果判断校验是否成功。

参数：字符串(String)类型

如果options是一个字符串，则表示远程请求的URL。remote校验器会自动为该AJAX请求添加当前校验的表单元素的"name属性值=value值"作为参数。

参数：对象(Object)类型

如果简单的"请求URL + 参数"无法满足你的需求，你还可以自定义发送该AJAX请求所需的任何选项参数。例如：

remote: {
    url:"请求地址",
    data: "请求参数" // 也可以是{name: value}形式的对象

    // 校验器已内置如下3个参数，可以不用设置，也请不要随意更改
    // 尤其是async和dataType，否则将可能导致出现无法预料的行为
    //  type: "post",
    //  async: false,
    //  dataType: json
}

详细参数列表，请参见$.ajax()的参数说明部分。

参数：函数(Function)类型

如果options是一个函数，则它的返回值应该是前面两种类型，校验器将使用该返回值继续完成远程请求校验工作。

校验器在调用该函数时，会如下所示传入对应的参数：

options(value, context){
    // 函数中的 this 指向window对象

    // value 是当前表单元素输入的值(有可能已被格式化处理)
    // context 是校验的上下文对象
}

服务器端响应及后续处理

远程服务器端必须响应一个JSON对象，该对象可以通过设置以下约定属性以控制remote校验器的处理行为：

// 以下属性均是可选的
{
    status : "OK", // 当且仅当status为"OK"时，表示校验通过
    message: "该用户名已存在！", // 校验失败时的提示信息
    callback: "funcName" // 回调函数名称，不管校验成功失败，在返回结果前，均会调用该函数
}

// 如果指定了callback，校验器在调用函数时，会为该函数传入如下所示的参数：
funcName: (data, value, context){
    // 函数中的 this 指向当前校验的表单元素的jQuery对象

    // data 是服务器响应的JSON对象，你可以通过修改status属性来"扭转乾坤"
    // value 是当前表单元素输入的值(有可能已被格式化处理)
    // context 是校验的上下文对象
}

示例&说明

以如下HTML表单为例：

<form action="http://www.365mini.com/">
    <div>
        <label>用户名</label>：
        <input id="username" name="username" type="text" >
    </div>
    <div>
        <label>密码</label>：
        <input id="password" name="password" type="password" >
    </div>
    <input type="submit" value="提交" />
</form>

我们可以使用remote校验器来判断该用户名是否已存在：运行代码

// 在表单提交时执行校验
$("form").v("submit", {
    "#username": {
        text: /^[a-z]\w{5,15}$/i, // 先校验格式是否正确
        remote: "/user/check.php" // 校验器会自动附加请求参数:"username=输入值"
    },
    "#password": "password"
});