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. Java递归算法——三角数字

    import java.io.BufferedReader; import java.io.IOException; import java.io.InputStream; import java.i ...

  2. Starling Tutorial

    http://www.hsharma.com/tutorials/starting-with-starling-ep-1-intro-setup/

  3. 使用System Sound Services 播放音效（最简单，比较底层），调用AudioServicesPlaySystemSound()

    1.适用范围:一些很小的提示或警告音频. 2.使用限制: 声音长度不能超过30秒 声音文件必须是PCM或IMA4(IMA/ADPCM)格式.(有时候可播放一些特殊的.mp3) 打包成.caf..aif ...

  4. Robot Framework--安装篇

    一.安装包 1.Python 2.robotframework 3.selenium 4.selenium2library 5.WxPython 6.安装RIDE 二.安装过程 1.安装python ...

  5. docker管理shipyard中文版v3.0.2更新

    shipyard中文版v3.0.2更新  https://console.dockerclub.net/ https://dockerclub.net/docs/intro/getting_start ...

  6. The method below converts an array of objects to a DataTable object in C#.

    http://www.c-sharpcorner.com/blogs/dynamic-objects-conveting-into-data-table-in-c-sharp1 public stat ...

  7. 百度文件上传webuploader上传文件，含文件大小、类型验证

    你的上传初始化文件upload_XXX.js中:(见红色字) // 初始化Web Uploader var allMaxSize = 10; var uploader = WebUploader.cr ...

  8. IE禁用Cookie后的session处理

    IE禁用Cookie后解决方案:URL重写 购物车案例<IE禁用Cookie后> 购物界面ShowBook.servlet public void doGet(HttpServletReq ...

  9. Promise 异步(asynchronous )编程

    概述 Promise.all(iterable) 方法返回一个promise,该promise会等iterable参数内的所有promise都被resolve后被resolve,或以第一个promis ...

  10. 遍历一个类的属性--并转换为Dictionary类型

    参考地址...http://www.cnblogs.com/xwgli/p/3306297.html 记录点滴...以前很少用泛型...HaHa... /// <summary> /// ...