首页 > 代码库 > 表单验证神器——jquery.validate插件

表单验证神器——jquery.validate插件

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时,会提示用户名已经被占用。

文章转自:http://www.zf-bbs.com/viewtopic.php?f=21&t=23

表单验证神器——jquery.validate插件