jQuery validate表单验证demo

Query Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。

官方文档 http://jqueryvalidation.org/documentation/

也可以看看这里的，讲的也很详细 http://www.runoob.com/jquery/jquery-plugin-validate.html

测试demo

提示：要想改变提示信息的位置及样式，可以用浏览器查看修饰它的样式，自定义覆盖它。如提示信息默认字体是黑色的，重写类error，把字体改成红色了。

代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>jquery validate -demo</title><style type="text/css">.error{color: red;}.content{width:500px;margin-left:100px;border: solid 1px blue;text-align: left;padding-left: 50px;}</style>
</head>
<body>
<div class="content"><h2>jquery validate -demo</h2><form id="submitForm"> 联系人：<input type="text" id="contactPerson" name="contactPerson" /><br/><br/>电话：   <input type="text" id="mobile" name="mobile" /><br/><br/>地址：   <input type="text" id="address" name="address" /><br/><br/>邮箱：   <input type="text"  id="email" name="email" /><br/><br/>   <input type="submit" id="submit" value="提交"/>    </form>
</div>    <!--jq--><script type="text/javascript" src="js/jquery.min.js" ></script><!--validate校验库--><script type="text/javascript" src="js/validate/jquery.validate.min.js" ></script><!--国际化库，中文提示--><script type="text/javascript" src="js/validate/messages_zh.min.js" ></script><!-- --><script type="text/javascript" >$(function() {$("#submitForm").validate({rules: {contactPerson: "required",mobile: "required",address: "required",email: "required",email:{isEmail:true},mobile: {isMobile:true},messages : {mobile : {isMobile : "请正确填写您的手机号码"},email : {isEmail : "请正确填写您的邮箱地址"}}},submitHandler: function(form) { //通过之后回调var p = $('#submitForm').serializeObject();$.ajax({type: "POST",url: "/jsonapi/base/data.json",                                  dataType: 'json',error: function(request) {alert('添加失败');},success: function(result) {console.log(result)if(result.code == 0){alert('保存成功');} else {alert(result.message);}}});},invalidHandler: function(form, validator) { //不通过回调return false;}});// 手机号码验证jQuery.validator.addMethod("isMobile", function(value, element) {var length = value.length;var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;return this.optional(element) || (length == 11 && mobile.test(value));}, "请正确填写您的手机号码");//邮箱验证jQuery.validator.addMethod("isEmail", function(value, element) {var tel = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;return this.optional(element) || (tel.test(value));}, "请正确填写您的邮箱");});</script></body>
</html>

jQuery validate表单验证demo相关推荐

html中表单的校验的插件,功能强大的jquery.validate表单验证插件
本文实例为大家分享了jquery.validate表单验证的使用方法,供大家参考,具体内容如下 1 .表单验证的准备工作在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助 ...
jQuery Validate表单验证框架详解
jQuery表单验证框架总结 jQuery Validate验证框架详解 jQuery校验官网地址:bassistance.de » jQuery plugin: Validation 一.导入js库 ...
jQuery Validate 表单验证插件----自定义校验结果样式
一.下载依赖包网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...
jQuery validate 表单验证，涵盖各种类型数据
本来觉得用这个会很难,结果试了试,发现却是简单了不少东西啊,什么getElementById,if 什么的,只用几个属性名什么的就可以解决不同状态显示不同提示,很强大很方便. <%@ page ...
jquery validate表单验证插件
1 表单验证的准备工作在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
jQuery Validate 表单验证插件----在class属性中添加校验规则进行简单的校验
一.下载插件包. 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.jQuery表单验证插件----添加class属性形式的校验 <!DOCTY ...
jQuery Validate 表单验证插件----Validate简介，官方文档，官方下载地址
一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆 ...
jQuery Validate 表单验证插件
一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑 ...
jQuery Validate 表单验证框架
目录一.jQuery Validate 是什么? 二.使用步骤 1.引入js 2.默认校验规则和提示 3.自定义规则和提示一.jQuery Validate 是什么? jQuery Validat ...

jQuery validate表单验证demo

jQuery validate表单验证demo相关推荐

最新文章

热门文章