jquery.validate.js插件应用举例，ajax方式提交数据。

html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jquery.valisdate.js学习</title>

<style type="text/css">

    table,td{border:0}

    .error,.myerror{ color:#933;}

</style>

</head>

<body>

<form id="commentForm" >

    <table>

      <tr>

        <td><label for="username">账号（必填，至少2个字符）</label></td>

        <td>

            <input id="username" name="username" type="text" />

        </td>

      </tr>

      <tr>

        <td>E-Mail（必填）</td>

        <td>

            <input id="email" type="email" name="email" />

        </td>

      </tr>

      <tr>

        <td colspan="2"><input class="submit" type="submit" value="Submit"/></td>

      </tr>

    </table>

</form>

<script src="jquery-1.11.1.js"></script>

<script src="jquery.validate.min.js"></script>

<script>

$("#commentForm").validate({

    rules:{

        username:{

            required:true

            },

        email:{

            required:true,

            email:true

            }

        },

    messages:{

        username:"请输入用户名",

        email:{

            required:"请输入邮箱",

            email:"邮箱格式错误"

            }

        },

    // ajax方式提交

    submitHandler: function(form)

    {

        $.ajax({

            type:"post",

            url:"check.php",

            data:{

                username:$("#username").val(),

                email:$("#email").val(),

            },

            success:function(data){

                if(data == 'true'){

                    alert('注册成功！');

                }else{

                    alert('用户名已经被占用！');

                }

            }

        });

    }

});

// 这段代码可以封装到单独的js文件中，然后引入即可

jQuery.extend(jQuery.validator.messages, {

    required: "必选字段",

    remote: "请修正该字段",

    email: "请输入正确格式的电子邮件",

    url: "请输入合法的网址",

    date: "请输入合法的日期",

    dateISO: "请输入合法的日期 (ISO).",

    number: "请输入合法的数字",

    digits: "只能输入整数",

    creditcard: "请输入合法的信用卡号",

    equalTo: "请再次输入相同的值",

    accept: "请输入拥有合法后缀名的字符串",

    maxlength: jQuery.validator.format("请输入一个 长度最多是 {0} 的字符串"),

    minlength: jQuery.validator.format("请输入一个 长度最少是 {0} 的字符串"),

    rangelength: jQuery.validator.format("请输入 一个长度介于 {0} 和 {1} 之间的字符串"),

    range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),

    max: jQuery.validator.format("请输入一个最大为{0} 的值"),

    min: jQuery.validator.format("请输入一个最小为{0} 的值")

});

</script>

</body>

</html>

php处理程序代码：

<?php

$username = $_POST['username'];

$email = $_POST['email'];

if($username == 'user001')

{

    echo 'false';

}

else

{

    echo 'true';

}

当用户名输入user001时，会提示用户名已经被占用。

表单验证神器——jquery.validate插件的更多相关文章

  1. 表单验证之JQuery Validate控件

    概述 jQuery Validation Plugin v1.14.0,基于JQuery,官网http://jqueryvalidation.org/ 该插件捆绑了一套有用的验证方法,包括 URL 和 ...

  2. jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件

    jQuery框架学习第一天:开始认识jQueryjQuery框架学习第二天:jQuery中万能的选择器jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQuer ...

  3. 前端验证，jquery.validate插件

    jQuery Validate 简介: jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用 ...

  4. JS组件系列——Form表单验证神器： BootstrapValidator

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  5. 黄聪： Bootstrap之Form表单验证神器： BootstrapValidator（转）

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  6. Form表单验证神器： BootstrapValidator

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  7. BootstrapValidator：表单验证神器

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  8. Bootstrap之Form表单验证神器： BootstrapValidator（转）

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  9. 表单验证插件jquery.validate的使用方法演示

    jQueryValidate表单验证效果 jquery.validate验证错误信息的样式控制 <!--validate验证插件的基础样式--> input.error{border: 1 ...

随机推荐

  1. 使用Newtonsoft JsonConvert反序列化Json数据到DataTable

    //JsonStr为Json字符串 JArray array = JsonConvert.DeserializeObject(JsonStr) as JArray;//反序列化为数组 ) { Stri ...

  2. 9月9日HTML上午表单元素2（框架、样式表）

    五.框架 1.frameset是双标签框架集,如果使用框架集,当前页面不能有body. frameset属性:①cols代表左右拆分.cols=“300,*”表示左边框架宽300,右边宽剩余的宽度.* ...

  3. Runner站立会议01

    开会时间:9.10-9.30 地点:二教 今天做了什么:学了文本输入,button按钮,界面转换(意图) 遇到什么困难:界面转换时,出现问题,没有正常跳转 明天打所作什么:解决今天遇到的问题,学了第二 ...

  4. 使用ASP.NET Web Api构建基于REST风格的服务实战系列教程【七】——实现资源的分页

    系列导航地址http://www.cnblogs.com/fzrain/p/3490137.html 前言 这篇文章我们将使用不同的方式实现手动分页(关于高端大气上档次的OData本文暂不涉及,但有可 ...

  5. sublime2的快捷键

    1.快速文件转换 与sublime2中搜索文件快捷键一样,ctrl+p ctrl + p //window comm + p //mac 2.在代码中搜索 在所有已加载的文件中查找一个特定的字符串,支 ...

  6. CentOS6.x安装配置nginx

    nginx安装 nginx的官网:http://nginx.org/   相应下载页面:http://nginx.org/en/download.html   我这里使用nginx的yum在线安装 w ...

  7. jquery满屏滚动代码

    //获取显示器宽度 .高度 $screenW = document.body.clientWidth; $screenH = ; $BTimer = ; // 时间周期 $liSize = $(&qu ...

  8. 网络框架 & 云端

    Scut 傲瑞组件开发手册(02) -- 轻量级的通信引擎 StriveEngine http://blog.oraycn.com/StriveEngine.aspx

  9. Auto generating Entity classes with xsd.exe for XML Serialization and De-Serialization

    More info here: http://blogs.msdn.com/b/yojoshi/archive/2011/05/14/xml-serialization-and-deserializa ...

  10. Effective Objective-C 2.0 — 第二条：类的头文件中尽量少引入其他头文件

    第二条:类的头文件中尽量少引入其他头文件 使用向前声明(forward declaring) @class EOCEmployer 1, 将引入头文件的实际尽量延后,只在确有需要时才引入,这样就可以减 ...