`

利用jquery.validate异步验证用户名是否存在

 
阅读更多

经过上百次的试验试和搜索,终于把jquery.validate的各种功能用法了解清楚,网上关于jquery.validate的AJAX表单验证比较少,特别是对rules里面的remote提得比较简单,使得学习起来比较难,下面发布一下我个人的用法:

HTML头部引用:

<script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../js/jquery.validate.min.js"></script>
<script type="text/javascript" src="../js/messages_cn.js"></script>

HTML内容(部分):

<form name="form1" id="form1" method="post" action="">
<dl>
  <dt>用户名:</dt>
  <dd><input name="txtUserName" id="txtUserName" type="text" class="input1" /></dd>
</dl>
</form>

JS代码部分:

$(function() {
//表单验证JS
    $("#form1").validate({
        //出错时添加的标签
        errorElement: "span",
        rules: {
            txtUserName: {
                required: true,
                minlength: 3,
                maxlength: 16,
                remote: {
                    type: "post",
                    url: "/tools/ValidateUserName.ashx",
                    data: {
                        username: function() {
                            return $("#txtUserName").val();
                        }
                    },
                    dataType: "html",
                    dataFilter: function(data, type) {
                        if (data == "true")
                            return true;
                        else
                            return false;
                    }
                }
            }
        },
        success: function(label) {
            //正确时的样式
            label.text(" ").addClass("success");
        },
        messages: {
            txtUserName: {
                required: "请输入用户名,3-16个字符(字母、数字、下划线),注册后不能更改",
                minlength: "用户名长度不能小于3个字符",
                maxlength: "用户名长度不能大于16个字符",
                remote: "用户名不可用"
            }
        }

    });
});

应注意的地方:

data: {
   username: function() {
   return $("#txtUserName").val();
}
有返回值,如果直接写“data: {username: $("#txtUserName").val();}”,这样是获取不到值的。

分享到:
评论

相关推荐

    利用jQuery.Validate异步验证用户名是否存在(推荐)

    异步验证是通过AJAX(Asynchronous JavaScript and XML)技术实现的,具体是利用jQuery.Validate插件中的remote规则来完成。 在开始之前,需要在HTML头部引入必要的jQuery库文件。首先,是jQuery本身,其次,是...

    jQuery.validate.js

    除了基本的验证规则,jQuery.validate.js还支持自定义规则、异步验证(如检查用户名是否已存在)、分组验证等高级功能。例如,你可以创建一个自定义规则来验证密码强度: ```javascript $.validator.addMethod(...

    jQuery.validate 用法

    除了基本的验证功能,jQuery.validate还提供了许多高级特性,如远程验证(`remote`)和异步验证。例如,可以使用`remote`规则来检查用户名是否已被注册: ```javascript username: { required: true, remote: ...

    jQuery.validate.js表单验证及API

    1. **异步验证**:利用AJAX实现对数据的后台验证,如邮箱的唯一性检查。 2. **动态验证**:根据其他字段的值改变验证规则,提供更灵活的验证体验。 3. **显示和隐藏错误提示**:使用`.error()`和`.success()`方法...

    jquery.validate.js 和 帮助文档.rar

    jQuery Validate插件还支持异步验证,例如验证用户名是否已存在,只需添加`remote`规则: ```javascript $("#myForm").validate({ rules: { username: { required: true, remote: "check-username.php" // 后端...

    jquery.validate.js表单验证[借鉴].pdf

    - 异步验证:`remote` 规则支持异步验证,这对于检查用户名是否可用或密码是否符合复杂性要求非常有用。 ### 五、使用示例 下面是一个简单的使用示例,展示了如何在表单上应用 `jQuery.validate.js` 进行验证: `...

    jquery.validate.js jquery.metadata.js

    此外,`remote`验证规则是jQuery Validate的一个亮点,它允许进行异步验证。例如,检查用户名是否已被注册,可以通过向服务器发送Ajax请求来实现: ```javascript username: { required: true, remote: "check_...

    jQuery.validate插件(附代码实例)

    这个`uniqueUsername`方法通过发送异步请求到服务器来验证用户名是否可用,如果返回的结果不是"available",则表示用户名已被占用,验证失败。 总之,jQuery.validate插件通过简单易用的API,使得在网页开发中进行...

    Jquery.validate插件使用方法

    6. **用户名异步验证**:标签中提到了“异步验证用户名”,这通常涉及到服务器端的交互。可以使用`remote`规则进行异步验证。 ```javascript $('#username').rules('add', { required: true, remote: { url: ...

    jQuery.validate.js+API中文

    4. 阻止默认行为:通过设置submitHandler回调,可以阻止表单的默认提交行为,实现异步验证或自定义提交逻辑。 四、API详解 1. .validate(options):主方法,用于初始化验证插件,options是包含各种配置项的对象。 ...

    jquery.validate.js jquery表单验证

    3. **中文验证**:描述中提到的“含有中文验证”可能是指 `jQuery Validate` 插件支持对中文字符的验证,比如验证用户名或密码是否包含中文字符,或者验证中文输入是否符合特定要求。这通常是通过自定义验证规则实现...

    jquery.validate.js表单验证.pdf

    这个库提供了丰富的功能,能够轻松地实现各种验证规则,包括基本的非空检查、长度限制、邮箱格式验证,甚至复杂的自定义规则和Ajax异步验证。 在使用jQuery Validate时,首先需要在HTML文档中引入jQuery库和jQuery ...

    jquery.validate.1.8.1.rar

    3. **异步验证**:支持通过AJAX进行后台验证,如检查用户名是否已存在。 4. **显示和隐藏错误**:自动管理错误消息的显示和隐藏,提高用户体验。 5. **自定义验证规则**:开发者可以通过扩展插件,定义自己的验证...

    jquery.validate.js 用法

    这里定义了一个名为`stringCheck`的自定义验证方法,用于验证用户名是否符合特定的格式要求。 #### 三、默认校验规则及提示 **1. 默认校验规则** - `required:true`: 必填字段。 - `remote:"check.php"`: 使用...

    jquery.validate例子

    `jQuery Validate`还支持异步验证、自定义验证方法、分组验证等高级功能。这些可以用来创建更复杂的验证场景,比如验证密码强度、手机号码格式等。 在`second.html`文件中,我们可以期待看到一个实际的表单示例,它...

    jquery.validate.js

    在某些情况下,如验证用户名是否已存在,我们可能需要进行异步请求。validate.js支持使用remote规则,将验证委托给服务器。 ```javascript $("#myForm").validate({ rules: { username: { required: true, ...

    jQueryValidate.rar

    在实际项目中,我们可能会遇到异步验证的需求,比如检查用户名是否已存在。这时,可以使用jQuery Validate的远程验证功能。通过设置`remote`规则,并指定一个返回JSON格式结果的URL,插件会在用户提交表单时发送请求...

    jquery.validate学习实例

    - **异步验证**:对于需要服务器端验证的情况,可以使用`remote`规则,通过AJAX请求来验证数据。 - **组验证**:使用`groups`选项,可以对一组相关的输入进行一次性验证。 - **显示和隐藏错误**:通过调整`...

    jquery.validate.js的用法

    除了基础的规则和消息配置外,jQuery.validate.js 还提供了许多高级功能,比如异步验证、自定义方法等。 ##### 异步验证 使用 `remote` 规则可以实现异步验证。这通常用于服务器端校验唯一性,例如用户名或邮箱...

Global site tag (gtag.js) - Google Analytics