表单验证神器——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时，会提示用户名已经被占用。

转载于:https://www.cnblogs.com/shaoyikai/p/4024234.html

表单验证神器——jquery.validate插件相关推荐

jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQ ...
JavaScript(四)——面向对象编程、BOM、DOM、表单验证、jQuery
文章目录 1. 面向对象编程 2. 操作BOM对象(重点) 3. 操作DOM对象(重点) 4. 操作表单(验证) 5. jQuery 1. 面向对象编程 (1) 原型对象 javascript.Jav ...
黄聪： Bootstrap之Form表单验证神器： BootstrapValidator（转）
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
Form表单验证神器： BootstrapValidator常见的坑，input框的value值改变二次验证不了？
BootstrapValidator表单验证是通常是用来设置form表单提交时,限制某些字段不能为空,为空时type="submit"的按钮一直提交不了,如下图 +++++++++ ...
JQuery.validationEngine表单验证插件
一.说明 JQuery.validationEngine表单验证控件功能强大,自带了样式显示模式: 1.字符类型:非空验证.最大长度.最小长度.相等判断.数字和空格.数字和英文字母 2.数字类型:数字 ...
前端框架Vue（11）——Vue+表单验证 VeeValidate 实践
这次来讲一下表单验证插件 VeeValidate,那为什么要结合 Vue 来讲呢?来看一下 github 上的图片就明白了! 为 Vue 而来的!不清楚是不是 Vue 的官方表单验证插件. 废话不多说 ...
jquery的validate表单验证表单注册插件
这款插件非常好用! 首先导入插件: <script src="js/jquery.validate.min.js" type="text/javascript&qu ...
jQuery Validate 表单验证插件
一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑 ...
12个方便易用的jquery表单验证插件
绝大部分网站都是开放注册的,而注册就需要使用表单验证,因为网站都需要对注册用户的信息安全性和合理性做出判断,表单的注册都应该具备完善的验证方式,比如注册使用的手机号是否是真实的?用户填写的验证码是否正 ...
使用jquery validate结合zui作表单验证
1.引入jquery validate和zui  <script src="${_b ...

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

表单验证神器——jquery.validate插件相关推荐

最新文章

热门文章