jQuery验证插件的例子( 表单验证vs2013)

1 插件支持IE8及以上的版本,不再支持IE6、7;

2 使用范围:企业级别的系统开发(用户数目几十到几千人也行),统一安装IE8以上的浏览器即可;

3 如果是企业级宣传网站,则不能使用;

html:

<script src="js/jquery-1.11.3.js"></script>

<script src="js/jquery.validate.js"></script>

<!--<script src="js/jquery-migrate-1.2.1.js"></script>-->

<script type="text/javascript">

$(function () {

$("#reg").validate({

//验证成功后,提交数据,使用AJAX提交

submitHandler: function (form) {

$.ajax({

type: "post",

url: "Submit.aspx",

data: $(form).serialize(),

success: function (response, status, xhr) {

if (response == "ok") {

window.location = "HtmlPage2.html";

}

else {

alert("注册失败!");

}

},

error: function () {

alert("ajax服务器错误!");

}

});

},

//验证成功,添加一个对号图片

success: function (lable) {

lable.html(‘<img style="width: 15px; height: 14px; " src="../img/aa.png" />‘);

},

//验证规则

rules: {

userName: {

required: true,//不为空

remote: "Ajax.aspx?action=dan"

},

pwd: {

required: true,//不为空

minlength: "6",

},

confirmPwd: {

required: true,

equalTo: "#userPwd"//和密码是否相等

},

email: {

required: true,

email: true

},

tsPwd: {

required: true,

geshi:true

}

},

messages: {

userName: {

required: ‘<span class="errorMes">用户名不能为空!</span>‘,

remote: ‘<span class="errorMes">用户名已存在,请重新输入!</span>‘,

},

pwd: {

required: ‘<span class="errorMes">密码不能为空!</span>‘,

minlength: jQuery.format(‘<span class="errorMes">密码不能少于{0}位!</span>‘),

},

confirmPwd: {

required: ‘<span class="errorMes">确认密码不能为空!</span>‘,

equalTo: ‘<span class="errorMes">密码不一致,请重新输入!</span>‘

},

email: {

required: ‘<span class="errorMes">邮箱不能为空!</span>‘,

email: ‘<span class="errorMes">邮箱格式不正确!</span>‘

},

tsPwd: {

required: ‘<span class="errorMes">不能为空!</span>‘,

}

}

});

////单独添加

//$("#tsPwd").rules("add", {

//    required: true,

//    geshi: true,

//    messages: {

//        required: ‘<span class="errorMes">不能为空!</span>‘,

//    }

//});

//自定义验证规则

$.validator.addMethod("geshi", function (value,element) {

var reg = /^((\w*\d\w*[a-z]\w*)|(\w*[a-z]\w*\d\w*))$/i;

return this.optional(element)||(reg.test(value));

},‘必须是数字和字母或下划线的组合!‘);

});

</script>

<style type="text/css">

.star, .errorMes {

color: red;

font-weight: bold;

}

</style>

</head>

<body>

<form  id="reg" >

<input type="hidden" name="action" value="ChaJianVal" />

<p>用户名:<input id="userName" type="text" name="userName" /><label id="isExist"></label><span class="star">*</span></p>

<p>密码:<input id="userPwd" type="text" name="pwd" /><span class="star">*</span></p>

<p>确认密码:<input type="text" name="confirmPwd" /><span class="star">*</span></p>

<p>邮箱:<input type="text" name="email" /><span class="star" >*</span></p>

<p>特殊密码:<input type="text" name="tsPwd" id="tsPwd" /><span class="star">*</span></p>

<p><input id="sub" type="submit" value="提交" /></p>

</form>

</body>

时间: 2024-10-23 09:11:10

jQuery验证插件的例子( 表单验证vs2013)的相关文章

jQuery学习之:Validation表单验证插件

http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每个人都能够有所掌握,慢慢会用.于是,自己便开始学习…… 由于Struts2自己早就学过,因而不需要花多少时间.而AJAX之前没怎么用过.现在AJAX框架如此之多,选择哪一个呢?开始打算选择 dojo,但是看了一点后,发现蛮复杂的.在之前有学过一点点jQuery,而网上也说jQuery很强大而且很容易

JQuery中一个简单的表单验证的实例

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=&quo

jQuery插件——Validation Plugin表单验证

jQuery表单验证插件:https://plugins.jquery.com/tag/validate/ jQuery Validation插件是最常用的插件之一:http://jqueryvalidation.org/ 一.基本API rules里面的“username”是input中的“name”,不是“id”. 表单验证,主要是俩:一是规则,二是提示信息 当在使用validate插件的时候: 使用validate()方法的时候将debug设置为true,那么表单不会提交,只进行检查,调试

jquery配合Bootstrap中的表单验证插件bootstrapValidator使用方法

使用bootstrap遇到表单校验,最常用的一款表单校验插件 github地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用: 将文件下载 或者用 git clone下来 1.引入css到head中,引入js到body结束标签的前面即可 提示: 默认是英语的,需要变成中文: 将github中dist中的\js\language\zh_CN.js 引入文件中即可 官方完整实例版: <!DOCTYPE html> <html>

jQuery应用实例5:表单验证

1.validation插件的使用: 入门案例: <html> <head> <meta charset="UTF-8"> <title>validate入门案例</title> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <!--validate.js是建立在jquer

用jquery写自己的form表单验证

这几天看了锋利的jquery,感觉很不错.特别是jquery强大的选择器.今天就利用jquery写了一个自己的form表单验证的小案例.当巩固下jquery.首先贴下代码,当然只是一个小案例. 思路:   1.<input type="text" Validate="Date" id="date"/>这里的 Validate:是我们需要验证的类型(属于日期类型),这里你也可以自己定义.id属性就不用说了.<input type=

jquery.validate.js之自定义表单验证规则

1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 <script type="text/javascript" src="jquery-1.8.3.js"></script> 5 <script type="text/jav

(转)强大的JQuery表单验证插件 FormValidator使用介绍

jQuery formValidator表单验证插件是客户端表单验证插件.在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者(JavaScript开发者)需要编写大量的JavaScript来进行表单元素的校验,而这些校验在平时开发中不停的重复书写.常见的校验如不能为空,必须满足长度要求,必须为数字,必须为Email等等.一般要判断的表单元素比较多,开发过程就显得枯燥无味--重复的代码不断重复,而且可能还要兼容多种浏览器,更多

10个强大的Javascript表单验证插件推荐

创建一个JavaScript表单验证插件,可以说是一个繁琐的过程,涉及到初期设计.开发与测试等等环节.实际上一个优秀的程序员不仅是技术高手,也应该是善假于外物的.本文介绍了10个不错的JavaScript表单验证插件,使用它们完全可以节省你的时间!希望你喜欢. 1. validate.js Validate.js是一个非常不错的JavaScript表单验证库,源于CodeIgniter API.该库相当轻巧(不到1KB),不要求任何JavaScript框架,可以在所有主流浏览器中运行(包括IE

【锋利的jQuery】表单验证插件踩坑

和前几篇博文提到的一样,由于版本原因,[锋利的jQuery]表单验证插件部分又出现照着敲不出效果的情况. 书中的使用方法: 1. 引入jquery源文件, 2. 引入表单验证插件js文件, 3. 在form中class类名中添加"required","email"等去作为验证时读取的参数. 4. 调用代码: $("#commentform").validate(); 很不幸,报错了.前端有个说法是学新不学旧,这里就不去深究原因,直接提供最新的写法