jquery.validate.js插件应用举例,ajax方式提交数据。
html代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/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时,会提示用户名已经被占用。